Shubham Sharma
Shubham Sharma

Follow

Shubham Sharma

Follow
Add Google Authentication to your NextJs project using NextAuth.js

Add Google Authentication to your NextJs project using NextAuth.js

Shubham Sharma's photo
Shubham Sharma
ยทAug 27, 2022ยท

3 min read

Table of contents

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 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"

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 */}
        </>
    )
}

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

Did you find this article valuable?

Support Shubham Sharma by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this