Can I set custom cookies when successfully logged in?

[dipak-webo]

Question 💬

Hi,

I've been using Next-Auth CredentialsProvider, I want to set some custom cookies when logged in, but it didn't work.

Login works perfectly but it doesn't set custom cookies. My Next-Auth version is 4.2.1. Is there any way to set custom cookies?

How to reproduce ☕️

export default (req, res) => {
  return NextAuth(req, res, {
    providers: [
      CredentialsProvider({
        name: "creds",

        credentials: {
          username: { label: "Username", type: "text", autoComlete: 'off' },
          password: {  label: "Password", type: "password" }
        },

        async authorize(credentials) {
          const user = await login(credentials);

          if ( user ) {
             res.setHeader('Set-Cookie', 'my_cookie=value');
             return user;
          }

          throw new Error("Invalid creds");
        },
      }),
    ],

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[ThangHuuVu]

I don't think there is an API for setting custom cookies in NextAuth.js atm 🤔 cc @balazsorban44. Setting cookies in the authorize callback here won't work. Instead, could you try checking the session on getServerSideProps and set cookies there?

[OxiBo]

Why won't setting cookie work in authorize? According to one of the answers here it should be possible - https://stackoverflow.com/questions/68235182/nextjs-with-next-auth-setting-cookie-received-from-node-js

[balazsorban44]

I would like to hear the use case for this.

[dipak-webo]

Hi @balazsorban44

I am using Next-Auth to authenticate users with WordPress on the backend, so when successfully logged in, need to set WordPress cookies as well.

[dipak-webo]

Hi Guys,

The package nookies allowed to set the custom cookies. Thanks.

import { setCookie } from 'nookies';

 async authorize(credentials){
  //...
  setCookie({ res }, 'name', 'value',{
     maxAge: 2 * 24 * 60 * 60,
     path: '/',
     httpOnly: true
  })
}

[rnnyrk]

Where do you get res from? Besides credentials the authorize function seems only to return req ?

[tiriana]

I think you need to export a function returning NextAuth, not NextAuth itself.

Take a look at this: https://stackoverflow.com/questions/67594977/how-to-send-httponly-cookies-client-side-when-using-next-auth-credentials-provid/69418553#69418553

[gride29]

That works, if you are having problems with TypeScript types, simply change [...nextauth].ts file to [...nextauth].js.

Example working code that saves cookies:

import axios from "axios";
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
import { setCookie } from "nookies";

const nextAuthOptions = (req, res) => {
	return {
		providers: [
			GithubProvider({
				clientId: process.env.GITHUB_ID,
				clientSecret: process.env.GITHUB_SECRET,
			}),
			GoogleProvider({
				clientId: process.env.GOOGLE_CLIENT_ID,
				clientSecret: process.env.GOOGLE_CLIENT_SECRET,
			}),
			CredentialsProvider({
				name: "credentials",
				credentials: {
					username: { label: "username", type: "text" },
					password: { label: "password", type: "password" },
				},
				async authorize(credentials) {
					if (!credentials?.username || !credentials?.password) {
						throw new Error("Invalid credentials");
					}

					return axios
						.post("http://localhost:8080/api/auth/signin", {
							username: credentials.username,
							password: credentials.password,
						})
						.then((response) => {
							const user = response.data;
							setCookie({ res }, "user", JSON.stringify(user), {
								maxAge: 2 * 24 * 60 * 60,
								path: "/",
								httpOnly: true,
							});
							return user;
						})
						.catch((error) => {
							console.log(error);
						});
				},
			}),
		],
		pages: {
			signIn: "/",
		},
		debug: process.env.NODE_ENV === "development",
		session: {
			strategy: "jwt",
		},
		secret: process.env.NEXTAUTH_SECRET,
	};
};

export default (req, res) => {
	return NextAuth(req, res, nextAuthOptions(req, res));
};

[DoronTorangy]

Is there is a similar solution for next 13 with app directory for Route handlers?

currently I'm defining next auth like so:

// app/api/auth/[...nextauth]/route.ts

export const authOptions: AuthOptions = {
    ...
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

I do have access to the request object, but not the response object, since its not passed (need to be manually constructed with NextResponse.json(...)

[gride29]

@DoronTorangy I believe that you need to extract the response object in some way to be able to set cookies. That was the case at least in my project and I am also using Next 13.

[DoronTorangy]

How did you do that? Because your solution uses the pages API

[gride29]

Yes indeed it uses pages API. I've created [...nextauth].js file in /pages/api/auth and the content of the file is basically the code I've posted above.

Below is the code that calls next-auth signIn function.

const onSubmit: SubmitHandler<FieldValues> = (data) => {
    setIsLoading(true);
    
    signIn("credentials", {
	    ...data,
	    redirect: false,
    }).then((callback) => {
	    setIsLoading(false);
    
	    if (callback?.ok) {
		    toast.success("Logged in");
		    router.refresh();
		    loginModal.onClose();
	    }
    
	    if (callback?.error) {
		    toast.error(callback.error);
	    }
    });
};

This is how I get the currently logged user:

import { cookies } from "next/headers";
import axios from "axios";
import { signOut } from "next-auth/react";
import Router from "next/navigation";

const parseJwt = (token: string) => {
	try {
		return JSON.parse(atob(token.split(".")[1]));
	} catch (e) {
		return null;
	}
};

export default async function getCurrentUser() {
	// Retrieve user from cookies
	const cookieStore = cookies();
	let user = JSON.parse(cookieStore.get("user")?.value || "null");

	if (user) {
		const decodedJwt = parseJwt(user.accessToken);

		// If the token is expired, we sign out the user
		if (decodedJwt.exp * 1000 < Date.now()) {
			return undefined;
		}
	}

	if (user == null) {
		// If user is null, we check if the user is logged in with OAuth
		const cookieName = "JSESSIONID";
		const cookieValue = cookies().get(cookieName)?.value || null;

		if (cookieValue == null) {
			return undefined;
		}

		return axios
			.get("http://localhost:8080/api/auth/oauthUser", {
				headers: {
					Cookie: `${cookieName}=${cookieValue}`,
				},
			})
			.then((response) => {
				user = response.data;
				user.JSESSIONID = cookieValue;
				return user;
			})
			.catch((error) => {
				console.log(error);
			});
	}

	return user;
}

And then I just pass the user object to any component I want:

export default async function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	const user = await getCurrentUser();

	return (
		<html lang="en">
			<body className={font.className}>
				<ClientOnly>
					<ToasterProvider />
					<RentModal currentUser={user} />
					<LoginModal />
					<RegisterModal />
					<Navbar currentUser={user} />
				</ClientOnly>
				<div className="pb-20 pt-28">{children}</div>
			</body>
		</html>
	);
}

One thing to keep in mind, I am not using only Next-Auth as my auth service. Next-Auth in my project acts as some kind of middleware that calls Spring Boot backend, which handles login logic and returns JWT token if credentials are correct, which then I store in the cookie. Hope this helps!

[ezechuka]

@DoronTorangy were you or anyone else able to find a solution for nextjs 13?

[gregoire-jianda]

This works for me with AppRouter :

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import { authOptions } from "@/lib/authOptions";
import { NextRequest } from "next/server";

interface RouteHandlerContext {
    params: { nextauth: string[] };
}

const handler = async (req: NextRequest, context: RouteHandlerContext) => {
    return NextAuth(req, context, authOptions);
};

export { handler as GET, handler as POST };

// @/lib/authOptions.ts
import { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";
import { cookies } from "next/headers";
import { parse } from "cookie";

export const authOptions: NextAuthOptions = {
    // Secret for Next-auth, without this JWT encryption/decryption won't work
    secret: process.env.NEXTAUTH_SECRET,

    // Configure one or more authentication providers
    providers: [
        CredentialsProvider({
            name: "Credentials",
            credentials: {
                email: { label: "Email", type: "text" },
                password: { label: "Password", type: "password" },
            },
            async authorize(credentials, req) {
                try {
                    const response = await axios.post(
                        YOUR_AUTH_ENDPOINT,
                        {
                            email: credentials?.email,
                            password: credentials?.password,
                        },
                    );

                    const apiCookies = response.headers["set-cookie"];
                    if (apiCookies && apiCookies.length > 0) {
                        apiCookies.forEach((cookie) => {
                            const parsedCookie = parse(cookie);
                            const [cookieName, cookieValue] =
                                Object.entries(parsedCookie)[0];
                            const httpOnly = cookie.includes("httponly;");

                            cookies().set({
                                name: cookieName,
                                value: cookieValue,
                                httpOnly: httpOnly,
                                maxAge: parseInt(parsedCookie["Max-Age"]),
                                path: parsedCookie.path,
                                sameSite: parsedCookie.samesite,
                                expires: new Date(parsedCookie.expires),
                                secure: true,
                            });
                        });
                    }

                    return response.data;
                } catch (error) {
                    console.log(error);
                    // @ts-expect-error
                    throw Error(error.response);
                }
            },
        }),
    ],
};

Note that the parse method of the cookie module (https://www.npmjs.com/package/cookie) didn't seem to pick up the httpOnly option, so I checked it separately.

[ezechuka]

@gbelorgey, I just tried it now and it worked. Thanks!
May I ask what's the purpose of RouteHandlerContext? Also can I access the cookie in the api folder

[gregoire-jianda]

@ezechuka Regarding RouteHandlerContext, it's the second argument passed to a dynamic route handler in Next.js : https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments.

You can call your API from the server side without even using cookies().set, the cookie trick only helps if you want to call it from the client side.

[microooji]

@gbelorgey Thank you for code! When I use the cookies().set function as in your example, a session is not created and I do not receive a token. I end up passing the session to layout.ts to <AuthProvider> (const session = await getServerSession(authOptions);) but its null. Have you encountered this?

[microooji]

SOLVED:

I upgraded node v18.12 to node v18.18 and am using these package versions:

{ "next": "13.5.3", "next-auth": "^4.23.2" }

[jismonthomas]

Is there is a similar solution for next 13 with app directory for Route handlers?

currently I'm defining next auth like so:

// app/api/auth/[...nextauth]/route.ts

export const authOptions: AuthOptions = {
    ...
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

I do have access to the request object, but not the response object, since its not passed (need to be manually constructed with NextResponse.json(...)

If anyone using route handler you can set cookies using 'coookies' from next/headers as below:

import { cookies } from 'next/headers';

//use the following wherever you wanna set youw own cookies

cookies().set({
      name: 'nameOfCookie',
      value: 'valueOfCookie,
      httpOnly: true, //optional
      maxAge: timeOut, //optional
  });

you can read more about it here: app router cookies

[trangchongcheng]

app/api/auth/[...nextauth]/route.ts

import { cookies } from 'next/headers';

cookies().set({
name: 'auth',
value: 'valueOfCookie',
httpOnly: true,
})
I working to me, perfect....
i using nextjs 13.5

[AndonMitev]

guys have you manage to create interceptor and set this cookie for header, like i have some progress but then problem comes that some requests are client other are server and cnat use cookies :@

[parthtiwar-i]

I think it worked with credentialProvider but how can we set cookie with an oauth like google
So what I want is i ll use the google signup login of next-auth and after google signin ill send the provider, providerId and profile to my BE where ill store data and create a cookie and set the cookie to header and sent response.
so that MY BE cookie should be set at the header.
How can i do this anyone ?