Adding user Authentication in Next.js using NextAuth - GeeksforGeeks

18 Oct, 2021
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
NodeJS-Questions
JavaScript
Node.js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Installation of Node.js on Linux
Node.js fs.readFileSync() Method
How to update Node.js and NPM to next version ?
Node.js fs.readFile() Method
Node.js fs.writeFile() Method