NextAuth Hasura Refresh token - jwt

Question

I am trying to set up NextAuth for Hasura authentication and authorization. Since Hasura needs custom jwt claims I can't use the default access token provided by an OAuth provider. So I am using encode block in [...nextauth].js to encode a custom jwt token and everything works fine. But I don't know how to implement a refresh token for my custom token. Below is my "pages/api/auth/[...nextauth].js"
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;
},
},
pages: {
// signIn: '/auth/signin', // Displays signin buttons
// signOut: '/auth/signout', // Displays form with sign out button
// error: '/auth/error', // Error code passed in query string as ?error=
// verifyRequest: '/auth/verify-request', // Used for check email page
// newUser: null // If set, new users will be directed here on first sign in
},
// Callbacks are asynchronous functions you can use to control what happens
// when an action is performed.
// https://next-auth.js.org/configuration/callbacks
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 are useful for logging
// https://next-auth.js.org/configuration/events
events: {},
// Enable debug messages in the console if you are having problems
debug: true,
});
Can somebody tell me how to handle refresh token with next-auth when using custom jwt tokens?

Answer 1

I'm currently using a method I found on a post here on the next-auth issues page.
Essentially, we're using a combination of the clientMaxAge option you can pass into the provider to refetch the session, which reruns the jwt callback. I'm not sure I'm using the keepAlive property correctly, but this seems to poll correctly at the moment, though you may need to experiment with this.
Inside your JWT callback, you can have your logic that will check your existing expiry time against another, and fetch a new token from your server to assign for the session.
//_app.tsx
const sessionOptions = {
clientMaxAge: 60 * 30, // Re-fetch session if cache is older than 30 minutes
keepAlive: 60 * 30, // Send keepAlive message every hour
};
<Provider options={sessionOptions} session={pageProps.session}>
..
</Provider>
// [...nextauth].ts
const callbacks: CallbacksOptions = {
async jwt(token: any, user: any) {
if (user) {
token.accessToken = user.token;
token.expires = Date.now() + user.config.USER_SESSION_LENGTH_IN_SECONDS * 1000;
}
// Don't access user as it's only available once, access token.accessToken instead
if (token?.accessToken) {
const tokenExpiry = token.expires;
const almostNow = Date.now() + 60 * 1000;
if (tokenExpiry !== undefined && tokenExpiry < almostNow) {
// Token almost expired, refresh
try {
const newToken = await api.renewToken(token.accessToken); // calling external endpoint to get a new token
// re-assign to the token obj that will be passed into the session callback
token.accessToken = newToken.token;
token.expires = Date.now() + user.config.USER_SESSION_LENGTH_IN_SECONDS * 1000;
} catch (error) {
console.error(error, 'Error refreshing access token');
}
}
}
return token;
},
async session(session: any, user: any) {
session.accessToken = user.accessToken;
session.expires = user.expires;
return session;
}
}