(Implemented)Token Refreshing

[Rykuno]

Just curious if there were any plans to implement an official JWT token refresh strategy.

I performed this right before we pushed an alpha but essentially I reduced token expiry from 4w to 1h, added the refresh token, and the logic in the Apollo client to refresh the token if a request was made w/ it expired & session is still valid. Summarizing and missing some steps here but you get the idea.

It seems this is about the only thing missing from taking this boilerplate from an MVP accelerator to an almost production ready masterpiece.

On a side note, migrating from lerna to Turborepo has been a lifesaver.

Nothing super important, just spurring discussion

[JClackett]

Would be super interested to see how you implemented the refresh token as it's something we've been looking into recently.

The most important aspect is that the refresh token needs to be stored in an httpOnly cookie so that it's not accessible via JS. The point of the refresh token (in our view) is so that if an attacker gets hold of the access token, it's only valid for a short period. We've seen a few scenarios where the refresh token is stored alongside the access token and this just makes no sense.

In the meantime, I've updated the boilerplate to store the current access token in an httpOnly cookie (protected against XSS) and we are using next's api routes to proxy the backend server. This allows us to set an httpOnly cookie on login/register and forward all Apollo requests through the next.js api route. In there we access the token and pass it in the headers to the backend server. This also allows the react native app to continue using regular jwt auth.

[Rykuno]

On vacation but I'll revisit once I'm back at my laptop. I'm still learning best methodology/practices but we switched to utilizing Passport since we wanted to take advantage of the multiple oAuth provider plugins.

Essentially implemented/copied this methodology of handling auth in the boilerplate w/ a 15min expiry and refresh token. I believe its httpOnly and encrypted but I'll double check when I'm home. https://github.com/vercel/next.js/tree/canary/examples/with-passport

[Rykuno]

Just wanted to update this. I swapped out Express for NestJS and Lerna for TurboRepo but I'll fork this the base repo this weekend and give a POC for refreshing.

[Rykuno]

Okay, I just realized I would need to learn a bit about react native to actually make a PR to implement this in the app package to mirror the web.

I skimmed the code in app and it does not look too bad to implement this but I'd need a few days or so to test and figure it out. You guys can either implement this if you want or I'll make a PR later and you can just review/merge or take the code and implement it yourself you like.

So I'll just post how I went about it here to start and get feedback.

Note: I skipped some error handling/best practices for brevity sake

Generate the Refresh/Access token on the API.

The commit currently in dev has the access token being generated; so I'll just note this since sending a refresh token with a longer expiry time is trivial from there. Just send the signed refresh token whenever the access token is sent.

Create /api/refreshToken

This route will be called via the client.ts whenever a token will need to be refreshed; more on this below.

refreshToken.ts

import { NextApiRequest, NextApiResponse } from "next";
import { initializeApollo } from "lib/apollo/client";
import {
  RefreshTokenDocument,
  RefreshTokenMutationVariables,
  RefreshTokenMutationResult
} from "lib/graphql";
import { setCookie } from "utils/cookies";

// TODO: Route validation w/ Yup & next-connect

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const client = initializeApollo(null, null);

  const { data } = (await client.mutate({
    mutation: RefreshTokenDocument,
    variables: {
      token: req.cookies[process.env.SESSION_REFRESH_TOKEN]
    } as RefreshTokenMutationVariables
  })) as RefreshTokenMutationResult;

  setCookie(res, [
    {
      name: process.env.SESSION_TOKEN,
      value: data.refreshToken.accessToken,
      options: {
        path: "/",
        sameSite: "lax",
        secure: process.env.IS_PRODUCTION,
        httpOnly: true
      }
    },
    {
      name: process.env.SESSION_REFRESH_TOKEN,
      value: data.refreshToken.refreshToken,
      options: {
        path: "/",
        sameSite: "lax",
        secure: process.env.IS_PRODUCTION,
        httpOnly: true
      }
    }
  ]);

  res.status(200).json({ success: true });
}

Modify /api/login and /api/logout to handle the refreshToken as well

Here is the gist I modified to set/unset cookies used below https://gist.github.com/Rykuno/8454639196916850cbc1b20326e4f78b

login.ts

import { NextApiRequest, NextApiResponse } from "next";
import { setCookie } from "utils/cookies";

// TODO: Route validation w/ Yup & next-connect

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const token = req.body.token;
  const refreshToken = req.body.refreshToken;

  setCookie(res, [
    {
      name: process.env.SESSION_TOKEN,
      value: token,
      options: {
        path: "/",
        sameSite: "lax",
        secure: process.env.IS_PRODUCTION,
        httpOnly: true
      }
    },
    {
      name: process.env.SESSION_REFRESH_TOKEN,
      value: refreshToken,
      options: {
        path: "/",
        sameSite: "lax",
        secure: process.env.IS_PRODUCTION,
        httpOnly: true
      }
    }
  ]);

  res.status(200).json({ success: true });
}

logout.ts

import { NextApiRequest, NextApiResponse } from "next";
import { unsetCookies } from "utils/cookies";

export default async function handler(_: NextApiRequest, res: NextApiResponse) {
  unsetCookies(res, [
    process.env.SESSION_TOKEN,
    process.env.SESSION_REFRESH_TOKEN
  ]);
  res.status(200).json({ success: true });
}

Modify Apollo Client to handle refreshing.

Upon the UNAUTHENTICATED error code will call the api/refetchToken to handle fetching and setting of the new access and refresh tokens; then retry the original request that failed due to the expired token.

client.ts

const getNewToken = async () => {
  return fetch("/api/refreshToken", {
    method: "post"
  });
};

const errorLink = onError(
  ({ graphQLErrors, networkError, operation, forward }) => {
    if (graphQLErrors) {
      for (let err of graphQLErrors) {
        switch (err.extensions.code) {
          case "UNAUTHENTICATED":
            return fromPromise(
              getNewToken().catch(error => {
                // Handle token refresh errors e.g clear stored tokens, redirect to login
                return;
              })
            )
              .filter(value => Boolean(value))
              .flatMap(() => {
                // retry the request, returning the new observable
                return forward(operation);
              });
        }
      }
    }
  }
);

Then of course add it to your createApolloClient function

import { from } from '@apollo/client

return new ApolloClient({
    link: from([errorLink, httpLink]),
    name: "web",
    ...

Bonus

Sometimes you'll want to make server side calls on behalf of the user, such as calling me before a page loads to redirect if not allowed or something, so I added an authLink in the client.ts to allow for that. Essentially you just pass the context of whichever request you're making to the initializeApollo function.

const getAuthLink = (ctx: GetServerSidePropsContext) => {
  return setContext((_, { headers }) => {
    return isBrowser()
      ? headers
      : {
          headers: {
            ...headers,
            authorization: `Bearer ${
              ctx?.req?.cookies[process.env.SESSION_TOKEN]
            }` // server-side auth token
          }
        };
  });
};

export function initializeApollo(
  initialState: null | Record<string, any>,
  ctx: null | GetServerSidePropsContext
): ApolloClient<NormalizedCacheObject> {
  const _apolloClient = apolloClient ?? createApolloClient(initialState, ctx);
  ...
}
  
  function createApolloClient(ctx: GetServerSidePropsContext) {
  return new ApolloClient({
    link: from([errorLink, getAuthLink(ctx), httpLink]),
    name: "web",
    ...
}

Then just call it server side,

export async function getServerSideProps(ctx) {
  const apolloClient = initializeApollo({}, ctx)

  await apolloClient.query({
    query: MeDocument,
  })

  return {
    props: {},
  }
}

[JClackett]

Nice!! I don't have any time this week to dig into this unfortunately but if you wana create a pull request into develop just for the web package that would be great. Don't worry about the react native app for now as I can get that working once I've checked out the web side. Refresh tokens have been something on our radar for a while, so would be really good to include this in the stack 🙌🏾

[JClackett]

@Rykuno I've pushed a commit to develop for refresh tokens, have a look and let me know what you think!

At the moment I've set the app token to expire in 1 minute and the refresh for 4 weeks.

However, something I realised when building it: the whole refresh token flow will only run when a mutation or a query throws an Unauthenticated error. So there's potentially a weird behaviour that occurs if a user logs in and then just sits on the homepage and refreshes the page, the app token would expire after 1 minute and the user will be logged out, because it never threw a Unauthenticated error, because they never hit "authenticated" queries/mutations.

This is obviously a bit of a weird edge case as you would usually have authenticated routes that would be hit by the user as they use the site, but it could happen.

I'm trying to think of some solutions at the moment, one being just to render a component at the root that sets an interval to refresh the token. This is currently commented out in the _app.tsx file if you wana have a play. The other one would be to return app & refresh tokens also from the Me query, but this doesn't account for all the other potentially unauthenticated queries/mutations.

What do you think?

[Rykuno]

Sorry I was half way done on this and it life hit this weekend 😞 . I actually have a solution for the token refresh issue.

Essentially there just needs to be a global middleware for the API to validate/check the expiry of the access token upon each request w/ the following logic.

• If authed, check the expiration/validity of the token. If expired/invalid throw Unauthed error, else call next()
• If not authed, do no checks and just call next()

If the token is expired, it throws the error for the client to refresh. That way user's will stay signed in even though they don't hit a protected route.

Just looking at the codebase, could it be just as simple as adding a .use express middleware to do these checks or maybe a global middleware like the ErrorInterceptor?

I have lots of work to catch up on tomorrow at my day job but I'll give it a shot right after.

[JClackett]

Yeah nice, I added a TokenValidator to the global middleware and it seems to work well. Just need to make sure it doesn't run the checks when hitting the refreshToken query. Going to merge this into main now and update all our other projects! Thanks for the help with all this!

[Rykuno]

awesome! Looks real nice. Learned a great amount studying this boilerplate to where I could create my own to bootstrap my projects so cheers!

[JClackett]

Good stuff! Can you mark this discussion as answered? Thanks :)

[Rykuno]

Good stuff! Can you mark this discussion as answered? Thanks :)

Yep. Moved it from an Idea to a question and answered. Great work on this.