How to Configure Google Sign-In with Google

Table of Contents

1. Introduction
2. Requirements
3. Create Google OAuth Client ID and Secret
4. Configure OAuth Consent Screen
5. Load with Default Setting
6. Conclusion

Introduction

This tutorial shows how to integrate Sign In with Google, along with setting up the Google API and creating an OAuth Client.

Requirements

• GCP
  • Has knowledge of using Google Cloud.
  • Has set up a project using Google Cloud.

Create Google OAuth Client ID and Secret

Since we're using Google Account for sign-in, first we'll need to create an OAuth Client ID and Client Secret.

Go to the APIs & Services' Credentials page. Once you land on the Credentials page, you'll see API Keys, OAuth 2.0 Client IDs, and Service Accounts.

Click CREATE CREDENTIALS and choose OAuth Client ID.

For the details of the OAuth Client ID, reference the following:

• Application Type
  • Choose Web Application, since we'll use Next.js.
• Name
  • Enter any meaningful name following your application's standard.
• Authorized JavaScript Origins
  • http://localhost:3000 — for testing, our Next.js app will start on port 3000.
• Authorized redirect URIs
  • http://localhost:3000/api/auth/callback/google — this is the redirect URL after the user authorizes with their Google Account.

Click the Create button. Once the OAuth client is created, you'll be able to obtain the Google Client ID and Secret. Store these values because we'll need them later.

Configure OAuth Consent Screen

First of all, what is this OAuth Consent Screen? The OAuth Consent Screen lets you control the following options that users see when they use their Google Account to Sign In:

• Application Name
• Application Logo
• Support email
• Application HomePage / Privacy Policy / Terms of Service Links

As you can see, entering detailed information can help users find more information about the application during the sign-in process.

Load with Default Setting

Once you've created the OAuth Client ID, Secret, and filled out the OAuth Consent Screen, the setup on the Google side is done. Now, based on Google's instructions, with the following minimal information you can use Google Sign-In.

First, add the following script file to the page.

<script src="https://apis.google.com/js/platform.js" defer></script>

Then, create a button with the OAuth Client ID.

<div
  id="g_id_onload"
  data-client_id="{Your_OAuth_Client_ID}.apps.googleusercontent.com"
  data-context="signup"
  data-ux_mode="popup"
  data-login_uri="auth"
  data-auto_prompt="false"
>Sign In</div>

Now, with this setup, once you launch the app at http://localhost:3000 and click the Sign In button, it will open the Google Account sign-in flow. Once the user finishes the Google Account authentication, they will be redirected to your app's redirect URL with a JWT token.

You can enhance the above code to further customize the Google Account Sign-In experience, but in this tutorial, we'd also like to try next-auth.js for authentication.

Conclusion

Sign In with Google is a quick way to let your users authenticate with your application without managing user passwords. This blog focused on how to set up Google Sign-In at Google. Next, we'll demonstrate how to use the same settings to create Google Sign-In with next-auth or build a custom system to integrate with Google Sign-In.