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