Remember me functionality and session expiration

[sourabhchotiads]

Question 💬

Hello,

i am implementing credential provider in my project as login functionality with next auth. i did not faced any issues in implementing this, how ever i need to implement the remember me functionality in this as well and so far i am not able to find a solution for this/

any one can help of tell me if i am missing any thing here?

also i would like to know how to destroy a session on browser close

Thanks

How to reproduce ☕️

My [...nextauth].js file is

import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "credentials",
      authorize: async credentials => {
        try {
          const params = {
            username: credentials.username,
            password: credentials.password
          };

          const url = "login-url";

          const { data } = await axios.post(url, params);

          if (data.status) return data.data;
          else throw new Error(data.message);
        } catch (e) {
          throw new Error(e.message);
        }
      }
    })
  ],
  callbacks: {
    jwt: async ({ token, user }) => {
      if (user) {
        token.authToken = user.authToken;
        token.user = user;
      }
      return token;
    },
    session: async ({ session, token }) => {
      session.user = token.user;
      return session;
    }
  },
  secret: process.env.JWT_SECRET,
  jwt: {
    secret: process.env.JWT_SECRET,
    maxAge: 2 * 60 * 60
  }
});

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

There is no easy way to destroy a session on browser close, as browsers like Chrome use cookie restoration, and even a Session cookie will be persisted when closing the window. As for "remember me", I don't have a good answer from the top of my head. What do you mean exactly?

NextAuth.js sessions are rotating, meaning if the user is interacting with the site, the session won't expire.

[MichaelWheldon]

For those coming to this, setCookie and parseCookie look to be coming from a package called nookies.

Solution works btw! Would be great if this could be built into NextAuth because although it’s a legible solution, it’s a bit yuck looking.

[sansalgo]

Additionally, please ensure that you remove the remember-me cookie when a user logs out.

[ptr-h]

What does the client side call sign in look like for this solution?

[weidezhang]

i wonder how getserversession work since the authoptions object is dynamically changing. will that change impact the behavior of getserversession call ?

[Benjythebee]

2024 - I can't get this solution above to work, because req.body is either null or a ReadableStream;
Doing await req.json() doesn't help either as it then cause NextAuth(req, ...) throws the error body is unusable

Next 14.1.4
Next-Auth 4.24.5

[araysargsyan]

Guys, I want to present a solution with a dynamic maxAge value for the next-auth session from an external backend API. It works for me as I expected. Please try and leave a comment if you still have an issue.

FILE: lib/authOptions.ts

import CredentialsProvider from 'next-auth/providers/credentials';
import { jwtDecode } from 'jwt-decode';
import { decode, encode } from 'next-auth/jwt';
import { type AuthOptions } from 'next-auth';

import {
    EAuthCookie, type IJwtPayload, type IUserSession
} from '@/types/common';


const authOptions: AuthOptions = {
    providers: [
        CredentialsProvider({
            name: 'Credentials',
            credentials: {
                username: { name: 'Username', type: 'text' },
                password: { name: 'Password', type: 'password' },
                remember: { name: 'Remember', type: 'checkbox' },
            },
            async authorize(credentials, req) {
                const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
                const rememberMe = credentials?.remember === 'true';

                try {
                    const res = await fetch(`${BASE_URL}/auth/admin/login`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', },
                        body: JSON.stringify({
                            username: credentials?.username,
                            password: credentials?.password,
                            rememberMe
                        }),
                    });

                    if (res.status !== 200) {
                        throw res;
                    }

                    const user: IUserSession = await res.json();
                    const payload = rememberMe
                        ? jwtDecode<IJwtPayload>(user[EAuthCookie.REFRESH])
                        : jwtDecode<IJwtPayload>(user[EAuthCookie.ACCESS]);

                    if (user) {
                        return {
                            ...user,
                            ...payload,
                            cookie: await encode({
                                maxAge: (payload.exp - Math.floor(Date.now() / 1000)),
                                secret: process.env.NEXTAUTH_SECRET as string,
                                token: { ...user, ...payload }
                            })
                        };
                    } else {
                        return null;
                    }

                } catch (e) {
                    console.log('authorize: ERROR', e);

                    return null;
                }
            },
        }),
    ],
    jwt: {
        async decode(params) {
            try {
                const token = await decode(params);
                return {
                    ...token,
                    cookie: params.token
                };
            } catch (e) {
                console.log('decode', { params });
                return null;
            }
        },
        async encode(params) {
            return params.token?.cookie as string;
        }
    },
    pages: {
        signIn: '/login',
        verifyRequest: '/login'
    },
    session: { maxAge: 10 },
    callbacks: {
        async jwt(params) {
            if (params.trigger === 'update') {
                console.log('jwt: UPDATE', params.session);
                params.token = {
                    ...params.token,
                    ...params.session
                };
            }

            return { ...params.token, ...params.user, };
        },
        async session(params) {
            params.session.user = params.token;
            return params.session;
        },
    },
};

export default authOptions;

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

import NextAuth from 'next-auth';
import { NextRequest, NextResponse } from 'next/server';
import { NextApiRequest, NextApiResponse } from 'next';
import { getToken, JWT } from 'next-auth/jwt';

import authOptions from '@/lib/authOptions';


const handler = async (req: NextRequest, res: NextResponse) => {
    let maxAge = authOptions.session!.maxAge!;
    const token = await getToken({
        req,
        secret: process.env.NEXTAUTH_SECRET as string,
    }) as unknown as JWT;

    if (token) {
        maxAge = token.exp - Math.floor(Date.now() / 1000);
    }

    console.log('[...nextauth]', { maxAge });
    return NextAuth(req as unknown as NextApiRequest, res as unknown as NextApiResponse, {
        ...authOptions,
        session: { maxAge }
    });
};

export { handler as GET, handler as POST };

[udohjeremiah]

Assuming this is being used in a javascript file, where does these come from:

import {
    EAuthCookie, type IJwtPayload, type IUserSession
} from '@/types/common';

const payload = rememberMe
                        ? jwtDecode<IJwtPayload>(user[EAuthCookie.REFRESH])
                        : jwtDecode<IJwtPayload>(user[EAuthCookie.ACCESS]);

Especially the user[EAuthCookie.REFRESH] and user[EAuthCookie.ACCESS]

[sarowarhosen03]

Assuming this is being used in a javascript file, where does these come from:

import {
    EAuthCookie, type IJwtPayload, type IUserSession
} from '@/types/common';

const payload = rememberMe
                        ? jwtDecode<IJwtPayload>(user[EAuthCookie.REFRESH])
                        : jwtDecode<IJwtPayload>(user[EAuthCookie.ACCESS]);

Especially the user[EAuthCookie.REFRESH] and user[EAuthCookie.ACCESS]

Same question

[emiedonmokumo]

your code still solves problem of 2024, thank you very much

[codebyBowen]

For anyone use the app router, here is the solution:
In your [...nextauth].ts/route.ts

import NextAuth, { AuthOptions, NextAuthConfig } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { NextApiHandler } from "next";
import { cookies } from 'next/headers'
import CredentialsProvider from "next-auth/providers/credentials";
import { authConfig } from "@/app/config/auth.config";

import { NextResponse, NextRequest } from 'next/server'


export const authOptions: AuthOptions = {
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth({ ...authConfig, ...authOptions });

export async function GET(req: NextRequest) {
  const cookieStore = cookies();

  let maxAge = 15 * 60;

  const sevenDays =  7 * 24 * 60 * 60;
  const oneDay =  24 * 60 * 60

  if (cookieStore.get("stay-token")) {
    maxAge = cookieStore.get("stay-token")?.value == "1" ? sevenDays :oneDay;
  }

  const handler = NextAuth({ ...authConfig, ...authOptions, ...{
    session: {
      strategy: "jwt",
      maxAge
    },
  }});
  const { GET } = handler.handlers
  // @ts-ignore
  return await GET(req)
}

export async function POST(req: NextRequest) {
  const cookieStore = cookies();

  let maxAge = 15 * 60;

  const sevenDays =  7 * 24 * 60 * 60;
  const oneDay =  24 * 60 * 60

  if (cookieStore.get("stay-token")) {
    maxAge = cookieStore.get("stay-token")?.value == "1" ? sevenDays :oneDay;
  }

  const handler = NextAuth({ ...authConfig, ...authOptions, ...{
    session: {
      strategy: "jwt",
      maxAge
    },
  }});
  const { POST } = handler.handlers
  // @ts-ignore Ignore due to error from tsc, but the type should be correct
  return await POST(req)
}

[SpasiboKojima]

Solution by @araysargsyan is the better one since it doesn't have this crutch of dealing with extra cookie. Works in app router as well for sure.