Create Google (Login) Credentials for Your Web Application

If you want to use Google (federated login) to authenticate users, you need to create a Google project with OAuth authentication screen. Here are the required steps:

1. Create Google Project or use your existing project
2. Create OAuth consent screen
3. Create the credentials

---

Create Google Project

Go to Google cloud console and create a project. This is done by clicking the button circled red in the image below.

Choose "New project" from the top left button. This opens the window to fill the project details. Assign a name to the project. Choose your organization and location. These are based on your Google Cloud account, but unless you have a big project the default settings should be fine.

Create OAuth Consent Screen

In the Google Console, select your project, if not already selected, and then click on "APIs and Services". From this screen choose the OAuth consent screen from the left menu.

For demo purposes I'm going to choose internal, but you can change this later. In the internal mode, your users are limited to Google Workspace users within your organisation. This is perfect if you're creating apps for internal use in your company.

Next add the mandatory details such as application name, User support email, and developer contact information.

Next you will need to choose the API scopes your application requires. Scopes are permissions to access the user information and services. Some of the scopes are more sensitive like access to user's Gmail. For authentication, I'm choosing the email and profile.

Continue to review the OAuth consent screen creation and complete this step.

Create Credentials

The last step is to create the credentials for your application or web service. You can add multiple credentials to use with different services.

In this example Google Login is used with a web service and thus a Web application is chosen from the list. Add a name to the service and then the URLs:

• Authorized origin is the URL where the browser is entering the Google Login. For testing, it's easiest to use localhost. If you are using a real domain name, you must have https (SSL/TLS) set-up.
• Authorized redirect is the address the user is re-directed after the authentication. This is typically your server and path that you use to login the user.

Once you save the configuration, you should see the Client ID and Client Secret.

Congratulations, you have successfully created the Google Credentials for your application.

Testing the Credentials

The fastest way to test your credentials is to open Google's OAuth login site with the URL below. Copy the URL to your browser and add your Client id to the end of the URL to test your login. If you're interested in the Google OAuth URLs, you can find Google's well-known OpenID configuration from here.

https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.profile&access_type=offline&include_granted_scopes=true&response_type=code&state=optional_parameter_to_track_state_12345&redirect_uri=http://localhost:3000/google&client_id=add_your_id_here

If you configuration was successful, you should see the Google login screen.

Once you have completed the authentication, you should be re-directed to the Re-direct URL.

Instead of writing all the logic for user authentication and token verification yourself, there are many libraries available for this, such as Passport for Node.js. Here is link to their tutorial.

Happy Coding!