Open In App

Adding user Authentication in Next.js using NextAuth

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn How we can add user authentication in our NextJS project. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.

Approach: To add the user authentication in our project first we will install the nextauth module. After that, we will create a dynamic file with […nextauth].js name. Then we will add different providers inside this file for authenticating. After that, we will add login and signout option on our homepage.

Create NextJS Application:

Step 1: You can create a new NextJs project using the below command:

npx create-next-app gfg

Project Structure: It will look like this.

Step 2: Install NextAuth using the below command:

npm i next-auth

Step 3: Now go to Google developer console and get your Oauth API ID and key.

Step 4: Now create a new folder inside the page/api directory and name that folder auth. Inside that folder create a new file with the name […nextauth].js and add the below code in that file.




import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
  
export default NextAuth({
      
  providers: [
    GoogleProvider({
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
    }),
  ],
})


Here first we are import NextAuth and GoogleProvider from next-auth. After that, we are using only Google as our authentication provider.

Step 5: Now we are going to add Provider on every page and for that, we will add Provider in our _app.js file. Add the below code in your _app.js file.




import { Provider } from "next-auth/client"
  
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <Provider session={session}>
      <Component {...pageProps} />
    </Provider>
  )
}


Step 6:  Now we can add the login and logout buttons on our homepage. For that, we are going to use the useSession() hook to check if the user is logged in or not. We will add the below code in our index.js file.




import { useSession, signIn, signOut } from "next-auth/client"
  
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        <h1>GeeksforGeeks</h1>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      <h1>GeeksforGeeks</h1>
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}


Here first we are checking if a session exists or not. If a session exists that means the user is already logged in then we are showing the user Sign out button but if the user is not logged in then we are showing the Sign In button.

Step to run the application: Now run the app using the below code:

npm run dev

Output



Last Updated : 18 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads