How does remember me works in Next Auth

[jpcchaves]

Hey everyone!

I'm in the process of developing a full-stack app using Next.js for the front-end and a Spring Boot-based external API. Good news – I've successfully integrated NextAuth for authentication with my external API.

Now, here's my query: Does NextAuth have any built-in features related to checkbox functionality? Specifically, I'm looking to implement a behavior where the session is persisted only if the user checks the "Remember Me" option.

I'm quite new to Next.js and still in the learning phase, so any guidance or insights, especially with regards to this checkbox feature, would be incredibly helpful. If you know of any relevant documentation, please point me in the right direction! Thanks a bunch!

Code:

How the login form is being submitted

const formik = useFormik({
    enableReinitialize: false,
    initialValues: {
      email: '[email protected]',
      password: 'test',
      remember: false,
    },
    onSubmit: async (values) => {
      signIn('credentials', values);
    },
  });

app/api/auth/[...nextauth]/page-options.tsx

import { routes } from '@/config/routes';
import { PagesOptions } from 'next-auth';

export const pagesOptions: Partial<PagesOptions> = {
  signIn: routes.signIn,
  error: routes.signIn,
};

app/api/auth/[...nextauth]/auth-options.tsx

export const authOptions: NextAuthOptions = {
  pages: {
    ...pagesOptions,
  },
  providers: [
    CredentialsProvider({
      type: 'credentials',
      id: 'credentials',
      name: 'credentials',
      credentials: {
        email: {
          label: 'email',
          type: 'text',
        },
        password: {
          label: 'password',
          type: 'password',
        },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials.password || !credentials) {
          return null;
        }

        const { email, password } = credentials;

        const res = await httpRequest<LoginRequestDTO, LoginResponseDTO>(
          HttpMethod.POST,
          `/${NEXT_PUBLIC_AUTH_API_V2}/${NEXT_PUBLIC_AUTH_LOGIN_ENDPOINT}`,
          { email, password }
        );

        if (!res) {
          return null;
        }

        setAuthToken(res.accessToken);

        return res as any;
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        return { ...token, ...user };
      }
      return token;
    },
    async session({ token, session }) {
      session.user = token.user;
      session.accessToken = token.accessToken;

      return session;
    },
    async redirect({ url, baseUrl }) {
      const parsedUrl = new URL(url, baseUrl);
      if (parsedUrl.searchParams.has('callbackUrl')) {
        return `${baseUrl}${parsedUrl.searchParams.get('callbackUrl')}`;
      }
      if (parsedUrl.origin === baseUrl) {
        return url;
      }
      return baseUrl;
    },
  },
};

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

import NextAuth from 'next-auth';
import { authOptions } from './auth-options';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

[lucas-barbosa]

@jpcchaves have you found any solution for implementing the 'remember-me' feature with next-auth?

[jpcchaves]

not actually, sorry :(. I made it work once with some workarounds, but it added a lot of unnecessary complexity to the code, so I decided to remove next auth and implement my own auth logic to fit my needs.

[jpcchaves]

that's one of the contents that helped me a lot. I hope it helps you
https://arunoda.me/blog/add-auth-support-to-a-next-js-app-with-a-custom-backend

[jpcchaves]

also, this video helped me a lot
https://youtu.be/khNwrFJ-Xqs?si=FkLitjEbz-Bl8CtY

[stabla]

I am curious if NextAuth will offer documentation on the Remember Me feature. This functionality is quite common in authentication systems. However, my understanding is that Credentials authentication is recommended to be avoided...

[Huzaifahimran]

I have forged a solution for this

authOptions.ts

import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import { getUserByEmail } from "../utils/tables/Auth_user";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env["GOOGLE_ID"] as string,
      clientSecret: process.env["GOOGLE_SECRET"] as string,
    }),
    CredentialsProvider({
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
        rememberMe: { label: "Remember Me", type: "boolean" }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error("Missing credentials");
        }

        const { email, password, rememberMe } = credentials;

        const user = await getUserByEmail(email);
        if (!user) {
          throw new Error("No user found with this email");
        }
        console.log("REMEMBER ME", rememberMe)

        if (user && (await bcrypt.compare(password, user["password"]))) {
          const maxAge = rememberMe==='true' ? 30 * 24 * 60 * 60 : 24 * 60 * 60;
          return { id: user["email"], email: user["email"], username: user["username"], maxAge };
        }
        else {
          throw new Error("Invalid credentials");
        }

      },
    }),
  ],
  session: {
    strategy: 'jwt',
  },
  callbacks: {
    async session({ session, token }) {
      if (token) {
        session.user.id = token.sub as string;
        session.user.username = token["username"] as string;
        session.maxAge = token["maxAge"] as number; // Use maxAge from token
        session.expires = new Date(Date.now() + session.maxAge * 1000).toISOString(); 
        return session;
      }
      return session;
    },
    async jwt({ token, user }) {
      if (user) {
        token.sub = user.id;
        token["username"] = user.username;
        token["maxAge"] = user.maxAge;
      }
      return token;
    },
  },
};

[Huzaifahimran]

session.expires = new Date(Date.now() + session.maxAge * 1000).toISOString();

I have also found that this line causes a bug when you signin through a provider like google as then session.maxAge wont exist. For that the new line is:
session.expires = session.maxAge ? new Date(Date.now() + session.maxAge * 1000).toISOString() : new Date(Date.now() + (30 * 24 * 60 * 60) * 1000).toISOString();

[jcyuan]

this solution actually does not work at all.
the session.expires is for 'display' purpose, it won't affect the cookie expiration time.

the only field will work, is this maxAge option here:

session: {
    strategy: 'jwt',
    maxAge: 60 * 60 * 1, // set as a small value, 1 hour for example
  },

it's a static option value, it will be set for the session cookie how long time to expire, it defaults to 30 days.
if you want to implement the remember me you have to modify this value, modify it as a small value by default, then dynamically modify it longer. but, unfortunately, till current version 4.24.10, there is no way to modify it... or maybe if i missed something.

all fields set for the session in the async session({ session, token }) { method, are just some 'readonly' fields that for client displaying only, they affect nothing, you can check your cookie expiration time in the Chorme inspector.

[jcyuan]

i believe in the current version the only way to go is changing the session expiration time at client side after signIn method with redirect: false option although this sounds awkward. ths same siutation to server side signOut method.... both lack in the current version (till 4.24.10)

[jcyuan]

another weakpoint is that there is no way to set a special value for maxAge to make the session exipiration time a Session type (invalidated when browser/page close)

[PhilippLeh]

Any solutions for that?