DEV Community

Cover image for Add Google Authentication to your NextJs project using NextAuth.js
Shubham Sharma
Shubham Sharma

Posted on • Updated on

Add Google Authentication to your NextJs project using NextAuth.js

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
Enter fullscreen mode Exit fullscreen mode
npm install next-auth
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 Credentials tab on google api cloud
Step 3: Create credentials Creating Credentials
Step 4: Choose OAuth client ID option OAuth client ID option
Step 5: Fill some details to get you google client Id and Secret Filling Details

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

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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 */}
        </>
    )
}
Enter fullscreen mode Exit fullscreen mode

Congratulations ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

You have successfully added NextAuth.js in your project for Google Authentication.

Full source code

you can see the full code on GitHub - Link

Thank you for reading my article.

For any query you can directly reach out to me on Twitter or LinkedIn

Top comments (3)

Collapse
 
mezieb profile image
Okoro chimezie bright

@shubhamku044 well done!!!

Collapse
 
shubhamku044 profile image
Shubham Sharma

Thanks. Please share it with your friends.

Collapse
 
mezieb profile image
Okoro chimezie bright

@shubhamku044 sure i will do so.