NextAuth with external API that provides access and refresh JWT HttpOnly cookies

[pixeliner]

Question 💬

I'm trying to figure out how the flow works when the API (written in NestJs) provides Authentication cookies.

Here are the authentication endpoints:

/signin sets the Access- (Max-Age: 240) and Refresh token cookie (Max-Age: 60000)
/refresh sets a new Access token Cookie
The UseGuards use the Passport 'jwt' and 'jwt-refresh-token' guards

@HttpCode(200)
@Post('/signin')
async signIn(
  @Body() authCredentialsDto: AuthCredentialsDto,
  @Req() request: IRequestWithUser,
): Promise<UserModel> {
  const response = await this.authService.signIn(authCredentialsDto);

  request.res.setHeader('Set-Cookie', [...response.cookies]);

  return response.user;
}

@UseGuards(RestJwtRefreshGuard)
@Get('refresh')
async refresh(@Req() req: IRequestWithUser): Promise<UserModel> {
  const accessTokenCookie = await this.authService.getCookieWithJwtAccessToken(
    req.user.id,
  );

  req.res.setHeader('Set-Cookie', accessTokenCookie);

  return req.user;
}

@UseGuards(RestJwtAuthGuard)
@Get()
authenticate(@RestCurrentUser() user: UserModel, @RestCsrfToken() csrfToken) {
  return {
    user,
    csrfToken,
  };
}

[...nextauth] file:

import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
import NextAuth, { NextAuthOptions } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { RestUserModel } from '../../../types/models';
import createAxiosRequest from '../../../utils/axios';
import logger from '../../../utils/logger';
import { getData, postData } from '../../../utils/request';

const request = createAxiosRequest();

type NextAuthOptionsCallback = (req: NextApiRequest, res: NextApiResponse) => NextAuthOptions

const nextAuthOptions: NextAuthOptionsCallback = (req: NextApiRequest, res: NextApiResponse): NextAuthOptions => {
  return {
    providers: [
      CredentialsProvider({
        name: "Credentials",
        credentials: {
          email: { label: "Email", type: "email", placeholder: "jhon@doe.com" },
          password: {  label: "Password", type: "password" }
        },
        async authorize(credentials) {
          try {
            const response = await postData<RestUserModel>('/auth/signin', {
              body: {
                email: credentials?.email,
                password: credentials?.password,
              },
            })

            logger.info("Authorization was successful!");

            const cookies = response.headers['set-cookie'] || [];
            res.setHeader('Set-Cookie', cookies)
            
            return response.data
          } catch (error: any) {
            logger.error(`NextAuth authorize error: ${error.message}`);
            throw error
          } 
        }
      })
    ],
    callbacks: {
      async signIn({ user }) {
        if (!(user.role === "admin" || user.role === "manager")) return false
        return true
      },
      async jwt({ token, user }) {
        if (user) {
          return { user };
        }

        // I suppose that if the cookie expires it's just a simple check of whether it still exists or not
        if (req.cookies['Authentication']) return token;

        try {
          // This gives a Set-Cookie with a new Access token
         const response = await getData<RestUserModel>('http://localhost:32000/api/auth/refresh')

          logger.debug('JWT Callback RETURN', token)
          
          return {
            ...token,
            user: response.data
          }
        } catch (error) {
          return {
            ...token,
            error: "RefreshAccessTokenError",
          }
        }
      },
    },
    session: {
      strategy: "jwt"
    },
    events: {
      async signOut() {
        res.setHeader("Set-Cookie", [
          "Authentication=deleted;Max-Age=0;path=/;",
          "Refresh=deleted;Max-Age=0;path=/;"
        ]);
      },
    }
  }
}

const Auth = (req: NextApiRequest, res: NextApiResponse) => {
  return NextAuth(req, res, nextAuthOptions(req, res))
}

export default Auth;

Data retrieval

Now most data is retrieved within the getServerSideProps and some of the search data is done on the frontend.
On the getServerSideProps I get it by using:

const res = await getData<Paginated<RestUserModel>>("/users", {cookies: req.headers.cookie});
return { props: { usersPaginated: res.data } }

The getData is an extension on:

const fetchData = async <T>(method: "GET" | "POST" | "PATCH" | "PUT" | "DELETE", endpoint: string, { locale = "en", data, cookies }: RequestDetails): Promise<AxiosResponse<T, any>> => {
  logger.info(`fetchData cookies: [${endpoint}] - ${cookies}`);
  logger.info(`fetchData body: [${endpoint}] - ${body}`);
  const res = await axios({
    withCredentials: true,
    url: `${process.env.NEXT_PUBLIC_EQUMEDIA_API}${endpoint}`,
    method,
    headers: {
      method,
      "accept-language": locale,
      "cookie": `frontend_cookie=app-ecosystem; ${cookies || ''}`,
    },
    data: body ? JSON.stringify(body) : null,
    ...(method === "GET" && { params: data }),
    ...(method === "POST" && { data })
  });

  return res;
};

So as you can see I pass through the cookies as default

Issue

Signing in seems to work great, navigating between pages also, until my token expires.
After some fiddling I seem to have 2 problems or maybe misunderstandings about the topic:

1. Even after token expiry it seems the cookie is still there, shouldn't the cookie be deleted when Max-Age is reached? I would think (as you can see in the code of the nextauth file) I could just check if it's defined.
2. Another problem is, I'm not using a sessions check on a page, just SSR. So it's not reaching the async jwt() callback. How should take this on?

How to reproduce ☕️

Refresh or navigate page after token expiry

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[alexandrsek]

Hi, were you able to solve this problem? I am working on a project with similar auth logic and I am stuck on how to correctly implement this...

[pixeliner]

Hey Alexandrsek, no unfortunately not. I gave up with NextAuth and created my own implementation. I created multiple support tickets and StackOverflow posts, but apparently no one seems to be able to help. If anyone is able to create this in NextAuth, I would still reimplemnt this.

[nrweb]

What does it matter if the cookie is still there or not?

Realistically you can just have a blacklist and/or whitelist on your backend to determine whether a cookie is still considered valid (in addition to verifying it), and on sign-out you should blacklist the token.

Your backend authentication should then also check whether the cookie is blacklisted, and if it is, return a 401. That way even if the cookie is still available in NextJs, it won’t be considered valid.

[kingroho]

I guess I'm out of luck too. I'm thinking of building the backend using Nest.js or Laravel but I could not wrap around my head on JWT. My API routes are protected using JWT. Which will be accessible on native mobile app too. I also have a login or registration page that gives JWT. And if I try to create my own adapter and just talk via rest, how can next.js routes talk to the protected routes of nest.js? I was thinking just save the token given by nestjs to session. But that will defeat the purpose of nest's refresh token.

Might as well, drop this package and implement my own. :(

[sankalpmukim]

Facing similar issue