What is a Client ID?
A Google Client ID (or ClientID) is a unique identifier that is assigned to an application/user. It is used to authenticate clients and servers using OAuth (Auth 2.0).
To get a Google Client ID, open the Google Cloud Console, and start a new project. For this tutorial, we'll name the project "GoogleReact Sign-In," but you can choose any name you prefer.
After creating the project, navigate to the Credentials section in the API and Services menu. Here, you will find a dashboard where your current project name should be visible in the top-left corner, close to the Google Cloud logo.
Now, before you create your credentials, let's go over to the OAuth consent screen to set up the consent screen.
Set up a Google Sign-In Consent Screen.
The consent screen, as the name implies, is a page that requires the user to log in via an external or third party library. This popup informs the user that they are leaving your app's root page and granting access to a third-party page. example of a Google Sign-In consent screen shown below
Simply put, when you utilize OAuth 2.0 for authorization, your app asks the user to authorize one or more scopes of access using their Google account. Scopes of access include any information or activities that your app is authorized to access or do on the user's account.
To set up the Google consent page for your React app, navigate to the "OAuth consent screen" tab on the left-hand menu of your Google Cloud Console.
Once in this tab, select “external” the only option allowed unless you are using a Google-verified company or application, then click the “Create” button to generate your consent screen.
Next, under the same page, Provide a name for your application and an email address to receive updates on the status of the project.
You can leave the remaining needs and options blank for now, but if you have the details available, you can add them during this phase.
For the time being, you can skip the remaining registration sections. Simply scroll down in each section, click Save, and then return to the dashboard once completed.
After designing the OAuth consent page, we must publish the app before we experiment with it or ensuring that authentication works. By default, its state is “Testing," and after publishing, it is moved to production.
Once you've marked your app as "In production," it will be accessible to everyone with a Google account.
Generate your web client ID.
Now, we’ll go back to the Credential’s option to access the page where you can create your web client ID.
On the screen, select CREATE CREDENTIALS at the top of the page, and then click the OAuth client ID.
You will be asked to choose an application type as we have below. Go for Web application If you are following these steps for React (we are using the Google client ID for web).
Next, we'll pick a name for our client ID to identify or specify the specific ID link to a single app, this name is used. To distinguish between web, iOS, and Android IDs, we can put "Web ID," "Android ID," "iOS ID," and so on in their naming conventions:
Following that, we'll introduce two types of URLs: authorized JavaScript origins and authorized redirect URLs.
The “Authorized JavaScript origins URL” is the URL that your application logs in from. For React developers, it’s localhost (localhost:3000) or your hosted URL if you’ve hosted your app.
The “Authorized redirect URL” is the link that Google will return the user to after you’ve successfully logged them in. For instance, you might return them to your original link or redirect them to a different link. You’ll need to add the URL here.
Add the following URLs to the authorized javaScript origins and authorized redirect URLs: http://localhost:5174 and http://localhost, respectively: ( You can change that to your redirect URLs)
To create a web client ID, you will need to click the “CREATE” button. You will be returned to the homepage, where you can view your freshly created credentials. To copy your new web client ID, hit the Copy icon.
Now that we've successfully built our web client ID, You'll go into our React app and add your cliend ID into .env file.
Top comments (0)