Cannot decode the token from NextJS SPA in my NeStJS backend

[chtpl]

Frontend authentication works successfully already

Frontend code

export const authOptions : NextAuthConfig = {
  secret: process.env.AUTH_SECRET,
  providers: [
    MicrosoftEntraID({
      clientId: process.env.AZURE_ENTRA_CLIENT_ID,
      clientSecret: process.env.AZURE_ENTRA_CLIENT_SECRET,
      tenantId: process.env.AZURE_ENTRA_TENANT_ID,
    }),
  ],
};

Now I want to use the token we get from Microsoft Entra in the backend
So I take the token from the cookie (__Secure-authjs.pkce.code_verifier=ey...<Token with 5 parts>

and put it in the Authorization: Bearer ey...<Token with 5 parts> header

The I use this code in my NestJS auth guard to decrypt the token:

import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
import { ConfigService } from '../config';

const dynamicImport = async (packageName: string) =>
  // eslint-disable-next-line @typescript-eslint/no-implied-eval
  new Function(`return import('${packageName}')`)();

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private readonly configService: ConfigService) {}

  async canActivate(context: ExecutionContext): Promise<boolean> {
    const request = context.switchToHttp().getRequest();

    const [type, token] = (request.headers.authorization?.split(' ') ??
      []) as string[];

    // token now is the token without "Bearer "
    // attempt nextauth decode

    const secret = this.configService.get('AUTH_SECRET');
    console.log(secret);

    const authCoreJWTDecode = await dynamicImport('@auth/core/jwt').then(
      (thePackage) => thePackage.decode
    );

    const res = await authCoreJWTDecode({
      token: token,
      secret: secret,
      salt: 'authjs.session-token'
    });

    console.log('nextauth decode result');
    console.log(res);
    
    // TODO implement verification of token
    
    return false;
  }
}

I double checked the AUTH_TOKEN config var is exactly what is configured in the frontend App Service on Azure

I am not 100% sure whether authjs.session-token is the valid salt. A colleague told be I should set it like that
Also have seen a lot of examples out there using an empty string as salt. Tried that - same result. Key is not valid

This is the error I get

{
  "timestamp": "1726064440017",
  "context": "Error: no matching decryption secret\n    at jwtDecrypt.clockTolerance (file:///workspaces/myproject-2/node_modules/@auth/core/jwt.js:76:15)\n    at flattenedDecrypt (file:///workspaces/myproject-2/node_modules/jose/dist/node/esm/jwe/flattened/decrypt.js:92:15)\n    at compactDecrypt (file:///workspaces/myproject-2/node_modules/jose/dist/node/esm/jwe/compact/decrypt.js:15:23)\n    at jwtDecrypt (file:///workspaces/myproject-2/node_modules/jose/dist/node/esm/jwt/decrypt.js:5:23)\n    at decode (file:///workspaces/myproject-2/node_modules/@auth/core/jwt.js:67:25)\n    at AuthGuard.canActivate (/workspaces/myproject-2/dist/apps/api/main.js:1366:21)\n    at GuardsConsumer.tryActivate (/workspaces/myproject-2/node_modules/@nestjs/core/guards/guards-consumer.js:16:17)\n    at canActivateFn (/workspaces/myproject-2/node_modules/@nestjs/core/router/router-execution-context.js:135:33)\n    at /workspaces/myproject-2/node_modules/@nestjs/core/router/router-execution-context.js:42:31\n    at /workspaces/myproject-2/node_modules/@nestjs/core/router/router-proxy.js:9:17",
  "message": "no matching decryption secret",
  "level": "error"
}

Update: I also tried with the salt __Secure-authjs.session-token but I still get the same error

[Kuzmich100kM]

You can get authjs.session-token from the cookies on the Next.js (server action), decode and pass it to the backend in the headers. There you check it with guards for validity.
Below is a piece of code for decoding and sending the accessToken

 //       Next.js
 //      /src/actions/sessionAPI.tsx

import {decode} from '@auth/core/jwt'
import {cookies} from 'next/headers' 
 
const BASE = process.env.API_BASE
const isProduction = process.env.NODE_ENV === 'production';
const COOKIES_NAME = isProduction ? '__Secure-next-auth.session-token' : 'authjs.session-token'

interface SessionParams {
  type?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
  url: string
  init?: RequestInit
}
 
 async function decodeCookies() {
  try {
    const cookieToken = cookies()?.get(COOKIES_NAME)?.value
    if (!cookieToken) return null

    return await decode({
      secret: process.env.AUTH_SECRET as string,
      salt: COOKIES_NAME,
      token: cookieToken,
    })
  } catch (err) {
    console.log(' === sessionAPI | decodeCookies:>> ', err)
    return null
  }
}

export default async function sessionAPI(params: SessionParams) {
  try {
    const { type = 'GET', url, init } = params

    const tokens = await decodeCookies()

    if (!tokens?.accessToken || Date.now() > tokens?.accessTokenExp * 1000) {
      console.log(' === sessionAPI | status === 401 (Unautorized)')
      return null
    }

    const headers = {
      Authorization: `Bearer ${tokens?.accessToken}`,
      ...init?.headers,
    }

    const res = await fetch(BASE + url, { method: type, ...init, headers })
    return await res.json()
  } catch (err) {
    console.log(' === sessionAPI:>> ', err)
    return null
  }
}

[chtpl]

Thank you :)

That seems to make a lot more sense than what I was trying.
I have no experience in frontend development besides some basic React knowledge) so there is one question left:

Will next.js in the above code still use Http-Only cookies? Because if I remember correctly - HttpOnly cookies cannot be accessed by JavaScript Code (is that correct?) and should be preferred to avoid cookie stealing through XSS in case one of the used libraries contains an exploitable XSS vulnerability.

[Kuzmich100kM]

This is a server action, labeled 'use server'. It can safely read cookies on the server side, decode them and use it to send requests to the backend via headers. You just have to make sure that the interaction with the backend and between the client and the server takes place over HTTPS to protect the token from interception.

[chtpl]

Awesome, thank you :)