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@test.com',
      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?

[FloriLAN]

If you create two new field in the token you can build a workaround for this.
In the front end I have my remember me button, which then sends a login request like this:

await signIn('credentials', {
  username: username,
  password: password,
  rememberme: rememberme,
  redirect: false, // Prevent Next.js from throwing Redirect error.
});

Then in the backend (auth.ts), I am handling it like this:

export const { auth, handlers, signIn, signOut } = NextAuth({
  providers: [
    Credentials({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' },
        rememberme: { label: "Remember Me", type: "boolean" }
      },
      authorize: async (credentials) => {
        const { username, password, rememberme } = credentials as CredentialsType;

        try {
          const user = await prisma.user.findUnique({
            where: { username: username },
          });

          if (!user) {
            throw new Error('Invalid credentials');
          }

          // Get the stored salt from the user (assuming you stored it in your database)
          const salt = user.salt;

          // Verify password by comparing the hashes
          const isPasswordValid = await verifyPassword(user.hashedPassword, password, salt);

          if (!isPasswordValid) {
            throw new Error('Invalid credentials');
          }

          const { hashedPassword, salt: _, ...userWithoutPassword } = user;
          const maxAge = rememberme === true ? 30 * 24 * 60 * 60 : 30 * 60;
          return { ...userWithoutPassword, maxAge };
        } catch (e) {
          throw new Error(e instanceof Error ? e.message : String(e));
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.sub = user.id;
        token.username = user.username;
        token.id = user.id!;
        token.accountStatus = user.accountStatus;
        token.profilePicture = user.profilePicture || null;
        token.email = user.email || null;
        token.subscriptionStatus = user.subscriptionPlan;
        token.maxAge = user.maxAge;
      }
      return token;
    },
    async session({ session, token }) {
      if (token) {
        session.user.id = token.id as string;
        session.user.username = token.username as string;
        session.user.accountStatus = token.accountStatus as string;
        session.user.profilePicture = token.profilePicture as string;
        session.user.email = token.email as string;
        session.user.subscriptionPlan = token.subscriptionPlan as string;
        session.maxAge = token.maxAge;
        if (!token.originalExpires) {
          token.originalExpires = Date.now() + (token.maxAge*1000);
        }
        session.originalExpires = token.originalExpires;

        if (
          new Date(session.originalExpires).getTime() - Date.now() >= 0
        ) {
          session.originalExpires = Date.now() + (token.maxAge*1000);
        }
      }
      return session;
    },
    authorized: async ({ auth, request: { nextUrl } }) => {
      const authPaths = ['/auth/login', '/auth/register', '/auth/reset-password'];
      if (auth?.originalExpires ? new Date(auth.originalExpires) - Date.now() <= 0 : false) {
        return NextResponse.redirect(new URL('/auth/logout', nextUrl));
      }

      if (authPaths.some(path => nextUrl.pathname.includes(path)) && !!auth) {
        return NextResponse.redirect(new URL('/dashboard', nextUrl));
      }
      return !!auth;
    },
  },
  pages: {
    signIn: '/auth/login',
  },
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60,
  },
  secret: process.env.AUTH_SECRET,
  debug: process.env.NODE_ENV !== 'production',
});

Basically I added two fields to the token (maxAge and originalExpires). You just set the "maxAge" parameter of NextAuth to the maximum time a session can be valid and then check if your own session expiry date (originalExpires) is valid on every request. If it's not valid anymore, I redirect them to "/auth/logout" which then makes use of the "signOut" function to nullify the current session. If you just delete the cookie, someone technically could just copy the session, change the originalExpires date and reuse it. This way the session gets completely nullified and useless.

To make sure that nobody can use the session with an expired originaleExpires field, you have to authenticate every request in your middleware.ts.
For a better user experience I also added a automatic logout thingy to my layout:

export default function ClientLayout({ children }: { children: ReactNode }) {
  const session = useSession();

  return (
    <div>
      <AutoLogout session={session} />
      {children}
    </div>
  );
}

const AutoLogout = ({ session }: { session: any }) => {
  const router = useRouter();

  useEffect(() => {
    // Check session expiration every 5 seconds
    const interval = setInterval(() => {
      if (session?.originalExpires) {
        const expirationTime = new Date(session.originalExpires).getTime();
        const currentTime = Date.now();
        const newTimeLeft = expirationTime - currentTime;

        if (newTimeLeft <= 0) {
          router.push("/auth/logout");
        }
      }
    }, 5000); // Check every 5000ms (5 seconds)

    // Cleanup the interval when the component unmounts
    return () => clearInterval(interval);
  }, [session, router]);

  return null;
};

[FloriLAN]

Hope I can help some people with this.

[jcyuan]

so the main thing of your way is the authorized callback. it should work but not really elegant and added extra checks for every requests on backend, btw backend signOut just deletes front cookie, nothing else....
i just don't understand why they don't provide an official solution, ain't it just a dynamic session { maxAge: dynamicValue } option??? gosh, i just wanna say dirty words.....