Auth0 & Next-Auth Malformed JWT - node.js

Question

I am attempting to setup authentication in my NextJS project and I am using Next-Auth. I am currently trying to setup a simple GET /me route that would be hit through React Query using the access_token retrieved by a successful Auth0 session Login.
BUT: the access_token received form Next-Auth w/ Auth0 useSession() is malformed
EDIT: I think the issue is that next-auth / auth0 is storing the token as an encrypted JWE. I need to figure out how to decrypt this and pass it to my api
https://github.com/nextauthjs/next-auth/issues/243
https://github.com/nextauthjs/next-auth/pull/249
https://github.com/nextauthjs/next-auth/discussions/5214
FRONTEND
in my pages > api > auth > [...nextauth].js I have the following configuration
const authOptions = {
providers: [
Auth0Provider({
clientId: process.env.AUTH0_CLIENT_ID,
clientSecret: process.env.AUTH0_CLIENT_SECRET,
issuer: process.env.AUTH0_ISSUER,
idToken: true,
}),
],
// Configure callbacks 👉 https://next-auth.js.org/configuration/callbacks
callbacks: {
// The JWT callback is called any time a token is written to
jwt: ({ token, user, account, profile, isNewUser }) => {
if (account) {
token.access_token = account.access_token;
token.id_token = account.id_token;
token.auth0_id = token.sub;
token.type = account.token_type;
}
delete token.name;
delete token.picture;
delete token.sub;
return token;
},
// The session callback is called before a session object is returned to the client
session: ({ session, user, token }) => {
const newSession = {
user: {
auth0_id: token.auth0_id,
email: token.email,
},
token: {
access_token: token.access_token,
id_token: token.id_token,
token_type: token.type,
},
};
return newSession;
},
},
secret: process.env.NEXTAUTH_SECRET,
};
export default NextAuth(authOptions);
Auth0 Config
in Auth0 Dashboard: Auth0 > Applications > Applications > <PROJECT_NAME> > AdvancedSettings > OAuth the signature algorithm is RS256
Successful Login Landing Page
here I am using const { data: session, status } = useSession(); to extract the value of the current session (which matches the shape created in the session callback of pages > api > auth > [...nextauth].js -- and has the access_token)
_app.jsx component
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
return (
<SessionProvider session={session}>
<QueryClientProvider client={queryClient}>
<Component {...pageProps} />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</SessionProvider>
);
}
API Requests (from the frontend)
for each API request to the server I am setting the headers as such
if (token) headers["authorization"] = `Bearer ${token}`;
headers["Content-Type"] = "application/json";
Server Middleware
I created an auth middleware function that serves 2 purposes.
Validate the JWT passed to the route (🚨 THIS IS WHERE THINGS BREAK 🚨)
Attempt to find a user in my postgres DB with matching auth0_id (auth0|)
below is the auth middleware
// Auth0
import { isPublicRoute } from "../services/auth0/index.js";
import { expressjwt } from "express-jwt";
import jwks from "jwks-rsa";
// 👀 I have copied this directly from the Auth0 Dashboard: Applications > APIs > QuickStart
// 🚨 the express-jwt library is failing - error below
const validator = expressjwt({
secret: jwks.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: "https://dev-ikfyop4g.us.auth0.com/.well-known/jwks.json",
}),
audience: "thunderbolt",
issuer: "https://dev-ikfyop4g.us.auth0.com/",
algorithms: ["RS256"],
});
// NOTE: 👀 we are not actually getting to this function
// This function will retrieve the user and feed it into the request
// into a populated user model, if the id is not in the database it
// will create a new user and pull the base data from auth0
const userInjector = async (req, res, next) => {
if (isPublicRoute(req)) return next();
if (!req.auth0?.sub) throw badImplementation("JWT missing in userInjector");
req.user = await userFromReq(req);
console.log("THE USER INJECTOR RESULT :: req.user", req.user);
next();
};
const auth = () => {
return [validator, userInjector];
};
export default auth;
Inside my server I am importing this auth middleware function and using like this
server.use(auth());
THE express-jwt ERROR
UnauthorizedError: jwt malformed
at new UnauthorizedError (/Users/mrt/Documents/MrT/code/M/bolt/node_modules/express-jwt/dist/errors/UnauthorizedError.js:22:28)
at /Users/mrt/Documents/MrT/code/M/bolt/node_modules/express-jwt/dist/index.js:133:35
at step (/Users/mrt/Documents/MrT/code/M/bolt/node_modules/express-jwt/dist/index.js:33:23)
at Object.next (/Users/mrt/Documents/MrT/code/M/bolt/node_modules/express-jwt/dist/index.js:14:53)
at fulfilled (/Users/mrt/Documents/MrT/code/M/bolt/node_modules/express-jwt/dist/index.js:5:58)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
The access_token that I am receiving from Auth0 is malformed. Upon further investigation I would agree. The AccessToken I am receiving (as a JWT) has 5 parts (parts are strings separated by a period ..
Access Token From Auth0 Session
eyJhbGc<REMOVED_CHUNK>uYXV0aDAuY29tLyJ9.. // 2 period w/ nothing inbetween??
zOKQ2<REMOVED_CHUNK>rSm6.
9qbS5yndGKkrZ9Tc_dL8ZOuHtp_-e58uGqvGHgcpcFS8-s6SEHJYZ0_g7Ii7aYQe4AdbeK9ekW-704X_6C1r5JH3-9yBz<REMOVED_CHUNK>6Rn3Q8U0YC_x8Vp9pF_EA4GHjevXrh3HFBzCY4AEAx-Rmnzk4tZDgk3oU2rsY1NleMTwpIj0h29KIsukg113uMt5KCWKVnosSI-psaBu<REMOVED_CHUNK>lf0R_y5ClcXF6XY0ezIvuwoSQOmhulMlPsTxzBVGeoIhsooNntgAc4s.
ojmkoO_CO<REMOVED_CHUNK>URg
If everything is configured for RS256 why is Next-Auth w/ Auth0 sending me a malformed JWT.
EDIT: a 5 part JWT is a JSON Web Encryption (JWE) token...?