
## Table of Contents

1. [Introduction](#introduction)
2. [Requirements](#requirements)
3. [Add Google Sign-In Callback](#add-google-sign-in-callback)
4. [Use with next-session](#use-with-next-session)
5. [Conclusion](#conclusion)

## Introduction

This tutorial shows how to integrate Sign In with Google and how to handle the callback response from Google Sign-In.

## Requirements

- GCP
  - Has knowledge of using Google Cloud.
  - Already set up Google Sign-In with OAuth Client ID and Secret at Google Cloud, or reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) for how to set up Google Sign-In.

## Add Google Sign-In Callback

Once you've set up Google Sign-In, the OAuth Client, and redirect URLs, the first thing you can do is add a callback function in the application to handle the response sent by Google Sign-In.

If you define the redirect URL as **_http://localhost:3000/api/auth/callback/google_**, then once the user successfully signs in with Google, they will be redirected to that URL with a JWT token. You'll need logic to process the information — for instance, saving the **_name_** and **_email_** to the database, or saving the email to the session. This article will demonstrate how to use `next-session` to save to the session and cookie, and how to clear the session with a custom logout function.

![OAuth Create Screen](/images/sign-google-nextjs/img2.png)

Below is sample code. Once the Google callback reaches this function, you can parse the credential as a **_JWT_** token, then read the values from it. For instance, you should be able to get the name and email of the user who successfully signed in with Google.

```TypeScript
export default async function auth(req: NextApiRequest, res: NextApiResponse) {

const credential = req.body.credential;

const jwtToken = JSON.parse(Buffer.from(credential.split('.')[1], 'base64').toString())

const name = jwtToken.name;

const email = jwtToken.email;

}

```

## Use with next-session

Once you build the callback function, you need to store the information in the web application. One way to do this is by using **_next-session_**.

```TypeScript
export const getSession = nextSession({
  cookie: {
    sameSite: 'lax',
    maxAge: 60 * 60 * 24 * 365,
  }
});
```

## Conclusion

This blog demonstrated example code showing how the Google Sign-In callback works and how you can use **_next-session_** to store user-specific information across your application.


This tutorial shows how to integrate Sign In with Google and how to handle the callback response from Google Sign-In.

Sign In with Google at Next.js and Next-Session


## Table of Contents

1. [Introduction](#introduction)
2. [Requirements](#requirements)
3. [Create Google OAuth Client ID and Secret](#create-google-oauth-client-id-and-secret)
4. [Configure OAuth Consent Screen](#configure-oauth-consent-screen)
5. [Load with Default Setting](#load-with-default-setting)
6. [Conclusion](#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_.
![Choose Create OAuth](/images/sign-google-nextjs/img1.png)

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.

![OAuth Create Screen](/images/sign-google-nextjs/img2.png)

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.

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

Then, create a button with the _OAuth Client ID_.

```HTML
<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.


This tutorial shows how to integrate Sign In with Google, focusing on how to set up OAuth at GCP.

How to Configure Google Sign-In with Google


## Table of Contents

1. [Introduction](#introduction)
2. [Requirements](#requirements)
3. [Client ID, Secret, OAuth Consent Screen Setup](#client-id-secret-oauth-consent-screen-setup)
4. [Get Started with NextAuth.js with Google Sign-In](#get-started-with-nextauthjs-with-google-sign-in)
5. [Conclusion](#conclusion)

## Introduction

This tutorial shows how to integrate sign in with Google by using _next-auth.js_ under a Next.js Web Application. For how to set up or configure Google Sign-In, please reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) for details about setting up Google Sign-In.

## Requirements

Since this tutorial assumes we're using Google Account with _next-auth.js_ in Next.js, below are the minimum requirements to follow this tutorial.

- GCP
  - Has knowledge of using Google Cloud.
  - Has set up a project using Google Cloud.
- Next.js
  - Already has an application built with _Next.js_.
  - Has knowledge of how to use _Next.js_.

## Client ID, Secret, OAuth Consent Screen Setup

Regarding Google OAuth Client ID and Secret, and OAuth Consent Screen setup, please reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) to see more details.

## Get Started with NextAuth.js with Google Sign-In

Here we'll set up NextAuth.js in the Next.js application.
First, let's install the dependency packages.

```node.js
npm install next-auth
```

Next, let's replace `_app.js` with the code below.

**Before**

```Javascript
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

**After**

```Javascript
import { SessionProvider } from 'next-auth/react';

export default function App({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
```

Create **[...nextauth...].js** under the **pages/api/auth** location.
_NextAuth.js_ has many different providers, and Google Account is just one of them. Replace the below client*id and client_secret with the ones you already created in the OAuth setup. Also, \_NextAuth.js* has different callbacks that you can use to integrate with your own system, such as checking whether the user has already registered in your application or not.

```Javascript
import type { NextApiRequest, NextApiResponse } from 'next';
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  return await NextAuth(req, res, {
    providers: [
      GoogleProvider({
        clientId:
          'my_client_id',
        clientSecret: 'my_client_secret',
      }),
    ],
    callbacks: {
      async jwt({ token, account, isNewUser, profile, user }) {
        return token;
      },
      async signIn({ user, account, profile, email, credentials }) {

        if (account.provider === 'google') {
          // check if user already exist or not with custom db

          else {
            // existing user
          }
        }
        return true;
      },
      async redirect({ url, baseUrl }) {
        return baseUrl;
      },
      async session({ session, token, user }) {
        return session;
      },
    },
    theme: {
      colorScheme: 'light',
      brandColor: '#343434',
      logo: '',
      buttonText: '#333',
    },
  });
}
```

## Conclusion

Sign In with Google is a straightforward way to let your users authenticate with your application. With `next-auth`, it's even better because it is able to manage the session and makes it easy to manage user information or integrate with Google Sign-In and other third-party sign-in platforms. Next, we will cover how to integrate Google Sign-In with a Next.js web application without using `next-auth`.


This tutorial shows how to use Next-Auth to integrate sign in with Google under Next.js web application.

Google

Sign In with Google at Next.js and Next-Session

How to Configure Google Sign-In with Google

How to Use Next-Auth with Google Sign-In