Please wait a little bit, we are fetching the blogs from the database ....
Please wait a little bit, we are fetching the blogs from the database ....
NextAuth.js or Auth.js is an open source community project. It is intended to add authentication to your app in a easy and stream lined way possible. support for various providers like google and github is there.
We have to setup a provider for NextAuth in the root layout.js file of Next.js application in order to access the details of authenticated users etc from any where in the app.
to do this we will create a Providers.jsx file in the components folder and we will import this component in the layout.js file and render it
NOTE:
Copy and paste the below code in components/Providers.jsx file
'use client'
import { SessionProvider } from 'next-auth/react'
import { Toaster } from "@/components/ui/toaster"
const Providers = ({ children }) => {
return (
<SessionProvider>
{children}
<Toaster />
</SessionProvider>
)
}
export default Providers
Copy and past the following code in root layout.js file
import './globals.css'
import { Inter } from 'next/font/google'
import Providers from '@/components/providers'
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({children})
{
return (
<html lang="en">
<body className={inter.className}>
<Providers>
<div className='max-w-[100rem] mx-auto pt-12'>
{children}
</div>
</Providers >
</body>
</html>
)
}
We should configure the authentication based on our needs. it includes specifying which O Auth provider to use etc..
we will create a separate file named auth.js in lib folder as shown below -
import { NextAuthOptions, getServerSession } from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
export const authOptions = {
secret:process.env.SECRET,
providers: [
GoogleProvider({
clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET
}),
],
}
export const getAuthSession = () => getServerSession(authOptions)
This file makes our job a lot easier! . as now we can get the user details for any page in the project.
Make sure to get NEXT_PUBLIC_GOOGLE_CLIENT_ID and NEXT_PUBLIC_GOOGLE_CLIENT_SECRET from google console and add to .env file
Next we have to set up API routes for next auth. the folder structure is app/api/auth/[…nextauth]/route.js the route.js file is the file where we write the logic for the corresponding API. copy past the below code there to finish the setup.
import { authOptions } from "@/utils/auth"
import NextAuth from "next-auth"
const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }
Now you can get the user info sign in and logout user easily. check the below example to get the idea.
"use client"
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if(session) {
return <>
Signed in as {session.user.email} <br/>
<button onClick={() => signOut()}>Sign out</button>
</>
}
return <>
Not signed in <br/>
<button onClick={() => signIn()}>Sign in</button>
</>
}