These are the version of next js and next auth I'm using 

```
 "next": "14.1.3",  
  "next-auth": "^4.24.7",
```


1 :  We need to wrap our app in sessionprovider so that we can access session obj in client component. Sessionprovider is a client thing so we will not make our RootLayout as client but in a define it in a seperate client file.

```
"use client";
import React, { ReactNode } from "react";
import { SessionProvider } from "next-auth/react";

export default function Provider({ children }: { children: ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}
```


2 :  then import it in our root layout

```
import { auth } from "./configurations/auth";
import Provider from "@/components/provider";

export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const serverSession = await auth();
  console.log("serverSession", serverSession);
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider>
            {children}
        </Provider>
      </body>
    </html>
  );
}
```


3  : Now we can define our own login lage, so that we can manage the design / css. I created under app->auth->login->page.tsx. To test/try i have login and lagout defined here


```
import { signIn, signOut } from "next-auth/react";
import { useRouter } from "next/navigation";

const router = useRouter();

const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  const res = await signIn("credentials", {
    username: formData.get("username"),
    password: formData.get("password"),
    redirect: false,
  });
  router.refresh();
};
const handleLogOut = async () => {
  let out = await signOut({ redirect: false });
  console.log("logout", out);
};

```
as you can see i have redirect = false and router.refresh() defined here, which I will explain later. you can call this login function from your form and this is a client component

4 : Now we can define the Next-Auth credential providor. this is a 3 step work.

First -> define route.ts file under app->api->auth->[...nextauth] folder

```
import NextAuth from "next-auth";
import type { NextAuthOptions } from "next-auth";

import { config } from "../../../configurations/auth";

const authOptions: NextAuthOptions = config;
const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };
```

Second -> define the config used in firist part


```
import type {
  GetServerSidePropsContext,
  NextApiRequest,
  NextApiResponse,
} from "next";
import type { NextAuthOptions } from "next-auth";
import { getServerSession } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const config = {
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: {},
        password: {},
      },
      async authorize(credentials) {
        const response = await fetch("http://127.0.0.1:8000/auth/login/", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json ",
          },
          body: JSON.stringify({
            username: credentials?.username,
            password: credentials?.password,
          }),
        });
        const data = await response.json();
        console.log("data", data);

        if (response.ok && data) {
          return data;
        }
        return null;
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      return { ...token, ...user };
    },
    async session({ session, token }) {
      session.user.token = token;
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/auth/login",
  },
} satisfies NextAuthOptions;

// Use it in server contexts
export function auth(
  ...args:
    | [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]]
    | [NextApiRequest, NextApiResponse]
    | []
) {
  return getServerSession(...args, config);
}
```

Note - the backend I'm using is Django Rest Framework and the data which I recieve after the post request is an object with a single value named token. example  {token:"abc"}, I have handled this at my django side which I have not discussed here, you may check what is the data you recieve after the post request and work accordingly.

async jwt function recieve this data (const data = await response.json()) as user, and then I return { ...token, ...user } from this function.

async session funciton recieves the data returned from jwt function as token, since this token is my jwt returned from django I put this token is the session (session.user.token = token) and then return the session. This session is available in our next application.


Third -> define .env variable used in config

```
NEXTAUTH_URL= "http://localhost:3000"
NEXTAUTH_SECRET= "yARYkjQfe95Ges+" 
```

Thats all, now we are ready to read session

at server side -> check point number 2, we have {auth} imported in the rootlayout component. auth is defined in point number 4 and we can get the value of session server side.

at client side ->

```
import { useSession } from "next-auth/react";
const { data: session, status } = useSession();
```

At point number 3 -> if you put redirect = true the page will refresh, reload, to get the session. if it is false it does not get the session immediatly, it get after a rerender, so we put router.refresh()  with redirect =  false. This help to get the session immediatly without reloading the page.

We will use next-auth / auth.js to sign in to our application and use the session in our client and server components, server actions, etc. We will use a custom backend with an authentication API to generate a JWT web token to authenticate users.

Next.js next-auth, auth.js credential provider with custom backend api and jwt scheme

Contact Me

I want to hear from you