Custom JWT Token and Refresh Token Implementation

[aridgupta]

I am trying to make Hasura work with next-auth. Since Hasura needs custom jwt claims, I am encoding my custom token in the encode block and sending the encoded token as a session property so that the client can access the token for making authenticated requests to the server. However, I don't know how to make refresh token work with custom access tokens? Any kind of help would really be great. Here is my [...nextauth].js file

import * as jwt from "jsonwebtoken";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorizationUrl:
        "https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code",
    }),
  ],
  secret: process.env.SECRET,

  session: {
    jwt: true,
  },

  jwt: {
    secret: process.env.SECRET,
    encode: async ({ secret, token, maxAge }) => {
      const jwtClaims = {
        sub: token.id,
        name: token.name,
        email: token.email,
        picture: token.picture,
        iat: Date.now() / 1000,
        exp: Math.floor(Date.now() / 1000) + 60,
        "https://hasura.io/jwt/claims": {
          "x-hasura-allowed-roles": ["user"],
          "x-hasura-default-role": "user",
          "x-hasura-role": "user",
          "x-hasura-user-id": token.id,
        },
      };
      const encodedToken = jwt.sign(jwtClaims, secret, { algorithm: "HS256" });
      return encodedToken;
    },
    decode: async ({ secret, token, maxAge }) => {
      const decodedToken = jwt.verify(token, secret, { algorithms: ["HS256"] });
      return decodedToken;
    },
  },

  callbacks: {
    // async signIn(user, account, profile) { return true },
    // async redirect(url, baseUrl) { return baseUrl },
    async session(session, token) {
      const encodedToken = jwt.sign(token, process.env.SECRET, {
        algorithm: "HS256",
      });
      session.token = encodedToken;
      session.id = token.id;
      return Promise.resolve(session);
    },
    async jwt(token, user, account, profile, isNewUser) {
      const isUserSignedIn = user ? true : false;
      // make a http call to our graphql api
      // store this in postgres

      if (isUserSignedIn) {
        token.id = profile.id.toString();
      }
      return Promise.resolve(token);
    },
  },

  events: {},

  // Enable debug messages in the console if you are having problems
  debug: true,
});

EDIT: Here is a link to my codesandbox

[0ubbe]

Hi @aridgupta,

Thanks for raising the question 💚 , we recommend you to follow the question template so it's easier for us maintainers when triaging the issues 🙏🏽

Could you try to reproduce your problem using our template in codesandbox? This would really help us to help you debug your issue 👍🏽

[aridgupta]

Should I provide my google client id and client secret in the codesandbox example? Won't that be a security issue?

Also, I didn't encounter any bug while using next-auth, I just wanted help with implementing refresh token when I have custom jwt token setup.

[balazsorban44]

If you share examples, NEVER provide any secrets, just leave it blank!

About token rotation, we currently don't have built-in solution, but here is a tutorial that should get you started:
https://next-auth.js.org/tutorials/refresh-token-rotation

[aridgupta]

I have read this article but this doesn't work with custom JWT tokens. This would help if I was using the access token and refresh token provided by an OAuth provider.

I had an idea that I would be making two tokens, one short lived and one long lived and send them as cookies. Then when a session is accessed and the session callback is called, I would jus verify whether the token is valid or not. If not valid, I would use the refresh token to verify the user and generate two new sets of tokens. But I don't know how to implement this. Also, I don't know how to set custom cookies with next-auth.

[mahieyin-rahmun]

I learnt the setting custom cookie part myself very recently, and it's surprisingly simple yet it never crossed my mind. All you need to do is pass the req and res parameters to a new function that returns the config object.

export default function (req: NextApiRequest, res: NextApiResponse) {
  return NextAuth(req, res, getNextAuthOptions(req, res));
}

import { serialize } from "cookie"; // yarn add cookie && yarn add -D @types/cookie

const getNextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
  const nextAuthOptions: NextAuthOptions = {
    // ... your configuration for NextAuth
    callbacks: {
      session: async function(session, userOrToken) {
        // set your custom cookie here
        const customCookie = serialize("abc", "123", {
            // your configuration for the cookie
        });
        
        res.setHeader("Set-Cookie", customCookie);
      }
    }
  }

  return nextAuthOptions;
}

In my short amount of testing, I was only able to get the cookie actually appear in the browser if I set it in the session callback, however, that was all I needed so I did not explore further. It should technically be possible to set the cookie in other callbacks as well, but don't quote me on that.