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 setup the Google API, Create OAuth Client.

Requirements

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

Create Google OAuth Client ID and Secret

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

Go to the APIs & Services' Credentials Page Once land at the Credentials Page, you'll see APIKeys, OAuth 2.0 Client IDs, Service Accounts.

Click CREATE CREDENTIALS and choose OAuth Client ID.

For the detail of the OAuth Client ID, reference as below

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

Click the Create button, once create the OAuth, we'll be able to obtain the Google client ID and secret, store these for now cause we'll need these value later.

Configure OAuth Consent Screen

First of all, what's this OAuth Consent Screen, right? So enter the information at OAuth Consent Screen, can control below options when user use Google Account to Sign In.

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

As you can see, Enter detail information can help user to find more detail about the application during the sign-in process.

Load with Default Setting

Once create OAuth Client ID, Secret and fill out OAuth Consent Screen, the Setting for the Google part is done, now, base on the Google Account's instruction, at very minimal with below information you can use the Google Account now.

First, add following script file to the page.

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

Then, create button with 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 these setup, once launch the app with port http://localhost:3000 and click the button Sign In will open Google Account, and once finish the Google Account's authentication will redirect to your app's redirect URL and post the JWT token information.

You can enhance above code so you can use the Google Account Sign in, but at this tutorial we'd like also try the next-auth.js for authentication.

Conclusion

Sign In with Google is the quick way to let your user to authenticate to your application, without manage user's password, this blog is focus on how to setup the Google Sign-in at Google, next will demo how to use the same setting to create Google Sign-in with next-auth or build system your self to intergrade with Google Sign-in.