To implement the backend, you can use the credentials provider. We are going to use the NextAuth credentials provider to authenticate Nextjs with Magento. <\/p>\n\n\n\n
we hope this will help you out if you’re in the same boat!<\/p>\n\n\n\n
Also, Magento 2 Headless Development<\/a> services will allow you to gain access to the headless development architecture.<\/p>\n\n\n\n We recommend creating a new Next.js app using, which sets up everything automatically for you. To create a project, Open a command prompt or terminal window in the location where you wish to save your project and run the following command.<\/p>\n\n\n\n After the installation is complete:<\/p>\n\n\n\n Now let’s add the NextAuth package by running the below command.<\/p>\n\n\n\n This time to add NEXTAUTH URL in our .env file. Add the following to your .env file.<\/p>\n\n\n\n First, we need to set up the next-auth for the app. It’s a straightforward process and the instructions can be found here<\/a><\/p>\n\n\n\n Magento 2 CMS offers versatile features to build a dynamic and powerful e-store. This CMS enables you to build a robust and highly secured e-store. <\/p>\n\n\n\n Magento CMS can create and manage multiple storefronts with one Admin Panel. Magento CMS supports multiple languages, multiple currencies, and multiple pricing.<\/p>\n\n\n\n Moreover, you can create a headless storefront using the best available frameworks such as Magento 2 ReactJS<\/a> or NextJS or GatsbyJS and many more.<\/p>\n\n\n\n Now we have to set up Add MAGENTO_URL in our .env file. Add the following to your .env file.<\/p>\n\n\n\n All requests to Further Reading<\/strong>:<\/p>\n\n\n\n Let’s create your login page which in our case is At this point, if you have entered the correct credentials and your API endpoint is working as you’d hope it to work, you should be able to log in just fine.<\/p>\n\n\n\n But if there is any issue such as the server being down, invalid credentials, etc. you will be redirected to the default error page (like the image below).<\/p>\n\n\n\n Instead what I want is to redirect it to my custom login page and explain the situation in a bit more detail to the user. So here’s what we do, we can stop the redirection using the below code on the login page.<\/p>\n\n\n\n The NextAuth.js client library makes it easy to interact with sessions from React applications.<\/p>\n\n\n\n We can get token from session using useSession()<\/p>\n\n\n\n The Make sure that NextAuth.js provides a It calls Note:<\/strong> When calling For more detailed info: That’s all about the NextAuth. If you have any questions please comment below, and we will try to respond to you. <\/p>\n\n\n\n You may also Hire Magento 2 Developers<\/a> for Headless development<\/a> on Nextjs with Magento 2<\/p>\n\n\n\n Thanks \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"Create your Project<\/h2>\n\n\n\n
npx create-next-app@latest\n# or\nyarn create next-app\n# or\npnpm create next-app<\/pre>\n\n\n\n
\n
npm run dev<\/code> or yarn dev<\/code> to start the development server on http:\/\/localhost:3000<\/code><\/li>\n\n\n\nhttp:\/\/localhost:3000<\/code> to view your application and see the following.<\/li>\n<\/ul>\n\n\n\n![\"Screenshot-from-2022-04-09-17-09-55\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-from-2022-04-09-17-09-55.png\")
Let’s Start Setting up the API<\/h2>\n\n\n\n
yarn add next-auth<\/pre>\n\n\n\n
NEXTAUTH_URL=http:\/\/localhost:3000<\/pre>\n\n\n\n
Why we are using Magento?<\/h2>\n\n\n\n
pages\/api\/[..nextauth].js<\/code> in our project. This contains the NextAuth.js dynamic route handler.<\/p>\n\n\n\nMAGENTO_URL=http:\/\/mymageServer.com<\/pre>\n\n\n\n
import NextAuth from "next-auth";\nimport CredentialProvider from "next-auth\/providers\/credentials";\n\nexport default NextAuth({\n providers: [\n CredentialProvider({\n async authorize(credentials) {\n const baseUrl = process.env.MAGENTO_URL;\n const response = await fetch(\n baseUrl + "\/rest\/V1\/integration\/customer\/token",\n {\n method: "POST",\n body: JSON.stringify(credentials),\n headers: {\n "Content-Type": "application\/json",\n },\n }\n );\n const data = await response.json();\n \/\/ Returning token to set in session\n return {\n token: data,\n };\n },\n }),\n ],\n callbacks: {\n jwt: async ({ token, user }) => {\n user && (token.user = user);\n return token;\n },\n session: async ({ session, token }) => {\n session.user = token.user; \/\/ Setting token in session\n return session;\n },\n },\n pages: {\n signIn: "\/login", \/\/Need to define custom login page (if using)\n },\n});<\/pre>\n\n\n\n\/api\/auth\/*<\/code> (signIn<\/code>, callback<\/code>, signOut<\/code>, etc.) will automatically be handled by NextAuth.js.<\/p>\n\n\n\n\n
pages\/login.js<\/code> will have a form submit handler that will use nextauth’s signIn()<\/code> callback to control if a user is allowed to sign in.<\/p>\n\n\n\nimport { signIn } from 'next-auth\/client'\n\nconst handleLogin = () => {\n signIn('credentials',\n {\n email,\n password,\n \/\/ The page where you want to redirect to after a \n \/\/ successful login\n callbackUrl: `${window.location.origin}\/account_page` \n }\n )\n }<\/pre>\n\n\n\n![\"Screenshot-from-2022-04-09-17-35-45\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-from-2022-04-09-17-35-45.png\")
const res = await signIn('credentials',\n {\n email,\n password,\n callbackUrl: `${window.location.origin}\/account_page` \n redirect: false,\n }\n )\nif (res?.error) handleError(res.error)\nif (res.url) router.push(res.url);<\/pre>\n\n\n\nHow to get token from the session?<\/h2>\n\n\n\n
using useSession()<\/h2>\n\n\n\n
\n
useSession()<\/code> React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.<\/p>\n\n\n\n<SessionProvider><\/code><\/a> is added to pages\/_app.js<\/code>.<\/p>\n\n\n\nimport { useSession } from "next-auth\/react"\n\nexport default function Component() {\n const { data: session, status } = useSession()\n\n if (status === "authenticated") {\n return <p>Signed in user token {session.user.token}<\/p>\n }\n\n return <a href="\/api\/auth\/signin">Sign in<\/a>\n}<\/pre>\n\n\n\nuseSession()<\/code> returns an object containing two values: data<\/code> and status<\/code>:<\/p>\n\n\n\n\n
data<\/code><\/strong>: This can be three values: Session<\/code><\/a> \/ undefined<\/code> \/ null<\/code>.\n\n
data<\/code> will undefined<\/code><\/li>\n\n\n\ndata<\/code> will be null<\/code><\/li>\n\n\n\ndata<\/code> will be Session<\/code><\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\nstatus<\/code><\/strong>: enum mapping to three possible session states: \"loading\" | \"authenticated\" | \"unauthenticated\"<\/code><\/li>\n<\/ul>\n\n\n\nUsing getSession()<\/h2>\n\n\n\n
\n
getSession()<\/code> method which can be called client or server-side to return a session.<\/p>\n\n\n\n\/api\/auth\/session<\/code> and returns a promise with a session object, or null if no session exists.<\/p>\n\n\n\nClient Side Example<\/h2>\n\n\n\n
async function myFunction() {\n const session = await getSession()\n \/* ... *\/\n}<\/pre>\n\n\n\nServer Side Example<\/h2>\n\n\n\n
import { getSession } from "next-auth\/react"\n\nexport default async (req, res) => {\n const session = await getSession({ req })\n \/* ... *\/\n res.end()\n}<\/pre>\n\n\n\ngetSession()<\/code> server-side, you need to pass {req}<\/code> or context<\/code> object.<\/p>\n\n\n\nvisit here<\/code><\/a><\/p>\n\n\n\n