Next.js is a framework built on top of React<\/a> that makes developing production-ready, fully-optimized React apps super fast and easy. <\/p>\n\n\n\n It is one of the best things to have come out of the React ecosystem, as it comes with a whole lot of power with zero config.<\/p>\n\n\n\n NextAuth.js is a completely secured authentication for implementation in Next.js<\/a> applications. It is a flexible authentication library designed to sync with any OAuth service.<\/p>\n\n\n\n When you need to add authentication to your next.js project, NextAuth is a wonderful option. <\/p>\n\n\n\n It\u2019s easy to see why, given its extensive provider support, which includes Google, Facebook, Credentials, and more. It can help you set up your authentication in minutes!<\/p>\n\n\n\n Let’s create NextApp.<\/strong><\/p>\n\n\n\n To create the next app visit here: How to Create Next App<\/a><\/p>\n\n\n\n After the installation of the next application, we\u2019re ready to learn how to authenticate a Next.js app with NextAuth.js.<\/p>\n\n\n\n Now let\u2019s install the NextAuth package by running the below command.<\/p>\n\n\n\n We\u2019re going to provide customers the selection to log in to our app using their Google, or Facebook<\/p>\n\n\n\n To use the Facebook login for our app, we are able to need a Facebook developer account<\/a>. Create an account after which create your app. For the app type, pick Cusumer<\/strong>. <\/p>\n\n\n\n Click next and within the details screen, pick a display name.<\/p>\n\n\n\n Once this is completed, your screen has to appear like this:<\/p>\n\n\n\n Click on Facebook Login<\/strong> and select Web<\/strong>. Now, add the following:<\/p>\n\n\n\n To get your app ID and app secret, navigate to the Basic<\/strong> section in Settings<\/strong> and copy them.<\/p>\n\n\n\n Add Next, create an\u00a0 Therefore, the filename cannot be a random name. For more information, please read\u00a0Next.js documentation on environment variables<\/a>.<\/p>\n\n\n\n Next, populate it with the following content:<\/p>\n\n\n\n Now, returned to our app. We\u2019re going to create a file named […nextauth].js in pages\/api\/auth and add the following code:<\/p>\n\n\n\n At Line 1, We are importing our main package (NextAuth). On line 2, we\u2019re importing our\u00a0Facebook Providers<\/a>\u00a0from the\u00a0 which are services that we can integrate into our app to allow users to sign in.<\/p>\n\n\n\n At Line 6, we\u2019re configuring our Facebook provider and passing in our Facebook secret and client ID through our environmental variables. <\/p>\n\n\n\n Finally, on line 13, we\u2019re exporting a function that returns the NextAuth and takes in the options variable as a third parameter.<\/p>\n\n\n\n Properly, the magic has\u00a0befallen\u00a0already. If we make use of the\u00a0REST API<\/a>\u00a0provided by\u00a0 we can log in to our app using our Facebook account. Navigate to\u00a0 Follow the process. You are logged in. Now, we need to save and display the user login state.<\/p>\n\n\n\n We need to get the login state of our users and render user details on the front end of our app. This can be easily achieved by using a Next.js feature called\u00a0custom app<\/a>. <\/p>\n\n\n\n Then, we\u2019ll wrap our component in a Provider.<\/p>\n\n\n\n Create an By wrapping our components in a\u00a0 This, in turn, will preserve our state during page navigation, improve performance, and reduce network traffic.<\/p>\n\n\n\n Next, create the Let\u2019s make use of the The session will return the user\u2019s details. Let\u2019s use the details returned to conditionally render a sign in and sign out button.<\/p>\n\n\n\n Replace everything in the return statement in We need to create the Your Feel free to sign in and sign out of the app using the header button.<\/p>\n\n\n\n Now, onto our So, replace your In this code, we are conditionally rendering the user\u2019s image, name, and photo using the data from our session state if the user is logged into our app. <\/p>\n\n\n\n If the user is not logged in, we display a dummy GIF with text instructing them to sign in.<\/p>\n\n\n\n To allow users to log in to our app using their Google account, we have to obtain OAuth 2.0 client credentials from the\u00a0Google API Console<\/a>. <\/p>\n\n\n\n Navigate to\u00a0C<\/strong>redentials<\/em>\u00a0and click on\u00a0Create credentials<\/strong>, and then\u00a0OAuth client ID<\/strong>:<\/p>\n\n\n\n Fill in the following options as asked:<\/p>\n\n\n\n Next, a popup will display your client ID and client secret.<\/p>\n\n\n\n Copy and add them to your Next, navigate to Your Restart the development server using After you restart your development server, customers should be capable of logging in on your Next.js app with the use of their Google, and Facebook accounts.<\/p>\n\n\n\n That\u2019s all about the Social Login<\/a> with NextAuth. If you have any questions please comment below, and we will try to respond to you.<\/p>\n\n\n\n To implement authentication in Nextjs with Magento 2<\/a> using the NextAuth credentials provider, check out our previous blog: Click Here<\/a><\/p>\n\n\n\n Happy coding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"What is NextAuth?<\/h2>\n\n\n\n
Set up authentication with NextAuth.js<\/h2>\n\n\n\n
npm i next-auth<\/pre>\n\n\n\n
Facebook<\/h2>\n\n\n\n
![\"SelectType\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/SelectType-1200x593.png\")
![\"AfterCreateFbApp\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/AfterCreateFbApp-1200x548.png\")
\n
http:\/\/localhost:3000\/<\/a><\/code><\/li>\n<\/ul>\n\n\n\n![\"AddWebUrl\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/AddWebUrl-1200x546.png\")
![\"App-Creds\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/App-Creds-1200x547.png\")
http:\/\/localhost:3000\/<\/a><\/code> <\/em>in the <\/em>App Domains <\/em>field.<\/em><\/p>\n\n\n\nAdd an environmental variable<\/strong><\/h4>\n\n\n\n
.env.local<\/code>\u00a0file in your project\u2019s root directory. Next.js has inbuilt support for environment variables and\u00a0.env.local<\/code>\u00a0will load those variables to\u00a0process.env<\/code>. <\/p>\n\n\n\nFACEBOOK_ID=<app id of your facebook app>\nFACEBOOK_SECRET=<app secret of your facebook app>\nNEXTAUTH_URL=http:\/\/localhost:3000<\/pre>\n\n\n\n
import NextAuth from 'next-auth';\nimport FacebookProvider from 'next-auth\/providers\/facebook';\n\nconst options = {\n providers: [\n FacebookProvider({\n clientId: process.env.FACEBOOK_ID,\n clientSecret: process.env.FACEBOOK_SECRET\n }),\n ],\n}\n\nexport default (req, res) => NextAuth(req, res, options)<\/pre>\n\n\n\nnext-auth<\/code>\u00a0library, <\/p>\n\n\n\nnext-auth<\/code>,<\/p>\n\n\n\nhttp:\/\/localhost:3000\/api\/auth\/signin<\/a><\/code>\u00a0and you should see this\u00a0<\/p>\n\n\n\n![\"sign-in\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/sign-in-1200x627.png\")
Check user login state with the
useSession()<\/code> Hook<\/strong><\/h4>\n\n\n\n_app.js<\/code> file in your pages<\/code> directory (if it doesn\u2019t already exist) and add the following code:<\/p>\n\n\n\nimport { SessionProvider } from "next-auth\/react"\nimport '..\/styles\/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <SessionProvider session={pageProps.session}>\n <Component {...pageProps} \/>\n <\/SessionProvider>\n )\n}\n\nexport default MyApp<\/pre>\n\n\n\nSession``Provider<\/code>, we enable session state to be shared between pages. <\/p>\n\n\n\ncomponents\/Header.js<\/code> file and import useSession<\/code>, signIn<\/code>, and signOut<\/code> from next-auth\/client<\/code>:<\/p>\n\n\n\nimport { useSession, signIn, signOut } from 'next-auth\/react'<\/pre>\n\n\n\nuseSession<\/code> will be used to manage the sign in and sign out state of our users, while signIn<\/code> and signOut<\/code> will be used to perform the login and logout features in our app.<\/p>\n\n\n\nuseSession<\/code> Hook:<\/p>\n\n\n\nconst { data: session } = useSession();<\/pre>\n\n\n\ncomponents\/Header.js<\/code> with the following code:<\/p>\n\n\n\n<div className="header">\n {session ? (\n <a href="#" onClick={handleSignout} className="btn-signin">\n <button>Sign out<\/button>\n <\/a>\n ) : (\n <a href="#" onClick={handleSignin} className="btn-signin">\n <button> Sign in<\/button>\n <\/a>\n )}\n<\/div><\/pre>\n\n\n\nhandleSignin<\/code> and handleSignout<\/code> methods to enable our users to sign in and sign out:<\/p>\n\n\n\nconst handleSignin = (e) => {\n e.preventDefault();\n signIn();\n };\n\n const handleSignout = (e) => {\n e.preventDefault();\n signOut();\n };<\/pre>\n\n\n\nHeader.js<\/code> should now look like this:<\/p>\n\n\n\nimport { useSession, signIn, signOut } from 'next-auth\/react'\n\nexport default function Header () {\n const { data: session } = useSession();\n\n const handleSignin = (e) => {\n e.preventDefault();\n signIn();\n };\n\n const handleSignout = (e) => {\n e.preventDefault();\n signOut();\n };\n\n return (\n <div className="header">\n {session ? (\n <a href="#" onClick={handleSignout} className="btn-signin">\n <button>Sign out<\/button>\n <\/a>\n ) : (\n <a href="#" onClick={handleSignin} className="btn-signin">\n <button> Sign in<\/button>\n <\/a>\n )}\n <\/div>\n )\n}<\/pre>\n\n\n\nRetrieve and display user information<\/strong><\/h4>\n\n\n\n
pages\/index.js<\/code>. We need to display and conditionally render user details based on their login details. First, we have to import the useSession<\/code> hook from next-auth<\/code>.<\/p>\n\n\n\nindex.js<\/code> with the following content:<\/p>\n\n\n\nimport Head from "next\/head";\nimport Header from "..\/components\/Header";\nimport styles from "..\/styles\/Home.module.css";\nimport { useSession } from "next-auth\/react";\n\nexport default function Home() {\n const { data: session, status } = useSession();\n const loading = status === "loading";\n\n return (\n <div className={styles.container}>\n <Head>\n <title>Nextjs | Next-Auth<\/title>\n <link rel="icon" href="\/favicon.ico" \/>\n <\/Head>\n <Header \/>\n <main className={styles.main}>\n <h1 className={styles.title}>\n Authentication in Next.js app using Next-Auth\n <\/h1>\n <div className={styles.user}>\n {loading && <div className={styles.title}>Loading...<\/div>}\n {session ? (\n <>\n <p style={{ marginBottom: "10px" }}>\n Welcome, {session.user.name ?? session.user.email}\n <\/p>\n <br \/>\n <img src={session.user.image} alt="" className={styles.avatar} \/>\n <\/>\n ) : (\n <p className={styles.title}>Please Sign in<\/p>\n )}\n <\/div>\n <\/main>\n <\/div>\n );\n}<\/pre>\n\n\n\n![\"SignIn\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/SignIn.png\")
Google<\/h2>\n\n\n\n
![\"google-create-api\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/google-create-api-1200x584.png\")
\n
http:\/\/localhost:3000<\/a><\/code><\/li>\n\n\n\nhttp:\/\/localhost:3000\/api\/auth\/callback\/google<\/a><\/code><\/li>\n<\/ul>\n\n\n\n![\"OAuthGoogle\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/OAuthGoogle-1200x584.png\")
env.local<\/code> file:<\/p>\n\n\n\nGOOGLE_ID=<client id of your google auth app should go in here>\nGOOGLE_SECRET=<client secret of your google auth app should go in here><\/pre>\n\n\n\n
pages\/api\/auth\/[...nextauth].js<\/code> and add the following to your array of providers:<\/p>\n\n\n\nimport GoogleProvider from 'next-auth\/providers\/google';\n...\n GoogleProvider({\n clientId: process.env.GOOGLE_ID,\n clientSecret: process.env.GOOGLE_SECRET,\n }),\n...<\/pre>\n\n\n\n[...nextauth].js<\/code> should now look like this:<\/p>\n\n\n\nimport NextAuth from "next-auth";\nimport FacebookProvider from "next-auth\/providers\/facebook";\nimport GoogleProvider from 'next-auth\/providers\/google';\n\nconst options = {\n providers: [\n FacebookProvider({\n clientId: process.env.FACEBOOK_ID,\n clientSecret: process.env.FACEBOOK_SECRET,\n }),\n GoogleProvider({\n clientId: process.env.GOOGLE_ID,\n clientSecret: process.env.GOOGLE_SECRET,\n }),\n ],\n};\n\nexport default (req, res) => NextAuth(req, res, options);<\/pre>\n\n\n\nnpm run dev<\/code>. After the server starts, test the authentication by signing in to your app with your Google account.<\/p>\n\n\n\n![\"SignInWithGoogle\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/SignInWithGoogle-1200x630.png\")