Add Google Authentication to your NextJs project using NextAuth.js

#nextjs #webdev #tutorial #nextauthjs

Next-Auth is a complete open-source authentication for Next.Js applications. You can learn more about it here.

Here in this blog tutorial, I will show you how you can use NextAuth.js in your NextJs project to add Google authentication. In this particular tutorial I am using Typescript but you can follow it for Javascript.

Installation

You can install it using yarn or using npm.

yarn add next-auth

npm install next-auth

Adding api routes

To add NextAuth.js in your project you need to first create [...nextauth].ts inside you pages/api/auth.

// pages/api/auth/[...nextauth].ts

import NextAuth, { NextAuthOptions } from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export const authOptions: NextAuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID, // 'Your Google Client ID'
            clientSecret: process.env.GOOGLE_CLIENT_SECRET, //  'Your Google Client SECRET'
        }),
        // you can add more providers here
    ],
}

export default NextAuth(authOptions)

Grab your keys from Google Cloud

Click here and setup you app

Step 1: Create a project with any name you want.
Step 2: Go to Credentials tab
Step 3: Create credentials
Step 4: Choose OAuth client ID option
Step 5: Fill some details to get you google client Id and Secret

Step 6: After you press create button, You will get you google client id and google client secret. Save these credentials in your pc.

Setting up environment variables

Create a .env.local file inside you root directory.

GOOGLE_CLIENT_ID="Paste your google client ID here"
GOOGLE_CLIENT_SECRET="Paste you google client secret here"

Setting up OAuth inside our app

To be able to use useSession inside your app, you'll first need to wrap your top level component inside <SessionProvider></SessionProvider> which is coming from next-auth/react

// _app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
    return (
        <SessionProvider session={session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp

Now we are good to go.

Using Google Authentication in our app

To use authentication, we need to import some functions from next-auth/react

import { useSession, signIn, signOut } from 'next-auth/react'

Now, inside our components we can use useSession, signin and signout functions


export const MyComponent = () => {
  const { data: session } = useSession()

    //... Your code

    return (
        <>
            {/* Your Code */}

            {session ? (
                    <>
                        <h2>
                            Signed in as {session.user.email}
                        </h2>
                        <button onClick={() => signOut()}>
                            Sign out
                        </button>
                    </>
                ) : (
                    <button onClick={() => signIn()}>
                        Login With Google
                    </button>
                )}


            {/* Your Code */}
        </>
    )
}