How to Use Next-Auth with Google Sign-In

Table of Contents

1. Introduction
2. Requirements
3. Get started with NextAuth.js with Google Sign In
4. Conclusion

Introduction

This tutorial shows how to integrate sign in with Google by use next-auth.js under Next.js Web Application, for how to setup or configure google sign-in, please reference here for detail about setup google sign-in.

Requirements

Since this tutorial assume we're use Google Account with next-auth.js Next.js, so below are least requirements to get further of this tutorial.

• GCP
  • Has knowledge of using Google Cloud.
  • Has set up project by using Google Cloud.
• Next.js
  • Already has 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, OAuth Consent Screen setup, please reference here to see more detail.

Get started with NextAuth.js with Google Sign In

Here we'll setup NextAuth.js to the Next.js First, let's install the dependencies packages.

npm install next-auth

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

Before

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

After

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

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

Create [...nextauth...].js under pages/api/auth location. NextAuth.js has many different provider, Google Account is just one of them, replace the below clientid and client_secret with the one you already created at the OAuth. Also, _NextAuth.js has different callbacks, you can use one of this to intergrade with your own system, such as check the user if already register at your application or not.

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 strict forward way to let your user to authenticate with your application, with next-auth is even better that due to it's able to manage the session and make it easy to manager the user information or intergrade with Google Sign-In and other third-party sign-in platform. Next, will be without using the next-auth, how to intergrade with Google Sign-in with Next.js web application.