How to Create a Google Client ID for Login/Register Form Block?

A login Form with a Social Login is a very widely used feature.

Using Google Login for your website will make the process of user onboarding and logging in easier than ever. You must have the Google Client ID to add the Login Form widget with an option of Google Login.

Firstly, you will need to drag and drop the Login Form widget on the page and enable the Social Login for Google from the Social Login tab of the widget.

Follow the below-enlisted steps to create an app on the Google Console to use the Social Login –

Step 1: Setup the Project

1. Visit and register your website on Google at https://console.developers.google.com/
2. You will need to be logged in with your Google Credentials.
3. If you don’t have a project yet, you must create one by clicking on the blue Create Project button on the right. While if you already have a project, click on the name of your project in the dashboard instead, which will open a modal and click on New Project.
4. Click the Create Button
5. Name your Project, and click on Create again in the top right corner of the modal.
6. Once you have a Project, you will end up in the Dashboard.

Step 2: Setup the Credentials

1. Select the OAuth consent screen in the Dashboard below Credentials from the right sidebar!
2. Let the default User Type be Internal. Enter a suitable name for your Application under the “App name”, which will appear as the app asking for consent later on.
3. Add relevant information in the below fields.
4. Fill out the “Authorized domains” field with your domain name, probably: your-site-url.com, without any https in the beginning and subdomains at the end. 
5. Press Save and Continue, and you will be redirected to the Credentials screen. Ensure all fields are filled out; otherwise, the Save button won’t work.

Step 3: Setup the OAuth credentials

1. Redirected to the Consent screen, click on the Create credentials button in the centre of the page.
2. It will open up a dropdown, select the OAuth Client ID.
3. In the next screen, you will have multiple Application Types for the applications which use OAuth ID. You must select the Application Type as Web Application.
4. You will see new options below; start with the Name of your Application.
5. Add the Authorized JavaScript Origins, which must be exactly your domain name. e.g. https://your-site-url.com without any subdomains.
6. Add the relevant Authorized redirect URIs. This must be the same, which will be added to the Social Login widget’s Content Tab under the Additional Options > Redirect After Login.
7. Now, click on the Create Button.
8. A modal should pop up with your credentials. If it doesn’t open, go to the Credentials tab in the left-sidebar and select your app by clicking on the name you entered. You will be able to copy the Client ID from here.

Paste the Google – Client ID under the WordPress Dashboard under Settings > Spectra > Login Form – Google Client ID section. And you’ve set up the client ID for Social Login successfully.