App Dir: Refresh Token Strategy

[Rykuno]

What is the correct way in Next 13 to handle token rotations? There is absolutely nothing about utilizing external API's for auth which seems like a relatively popular thing to do.

Token refreshing should be easy. I want to simply automatically rotate a short lived access-token via burning a refresh-token. I've done this in many web frameworks including Next 12 but I've never had this large of an issue on such a rudimentary issue.

99% of our mutations and queries are done server side.

We have the following code to
1) Make a request
2) Add auth header if access token exists
3) Check for a 401 and refresh tokens if needed
4) Remake request(not present in this snippit)

Problem being the /api/refresh route is not setting the cookie I presume because it is made server side instead of client. But since the request is run server side; we're a bit confused on the best practice to enforce token rotations in NextJS 13.

  const { GET } = createClient<paths>({
    baseUrl: "http://localhost:5000",
    async fetch(input, init) {
      // fetch http cookie
      let accessToken = cookies().get("access-token")?.value;

      // if token exists, add to header
      if (init && accessToken) {
        init.headers = {
          "content-type": "application/json",
          authorization: `Bearer ${accessToken}`,
          ...init.headers
        };
      }

      const response = await fetch(input, init);

      // Update Refresh and Access Token
      // and remake previous request
      if (response.status === 401) {
        await fetch("http://localhost:3000/api/refresh");
        // remake and return request here        
      }

      return response;
    }
  });

[kunalvirk]

This needs serious attention.

In my case, I am developing my storefront using Next.js app router and using Wordpress/Woocommerce via GraphQL in the backend.

For authentication, the WPGraphQL follows the short-lived token strategy and refreshes them using refresh-tokens and also maintains session using a different token (responsible for synchronizing cart with server-client).

Really didn't think that this will be a challenge as other frameworks manage token rotation seamlessly.

Here is how I have implemented it obviously not-so-good solution:

Used Apollo client: Requires two instances i.e. one for client and other one for server:

src\lib\apollo.client.ts:

"use client";

const WOO_SESSION_HEADER = "woocommerce-session";

const URI = "https://mygraphqlserver.com/graphql";

const asyncAuthLink = setContext(async () => {
  let validToken;
  let wooToken;
  const accessToken = getCookie("X-JWT-Auth");
  const refreshToken = getCookie("X-JWT-Refresh");
  wooToken = getCookie(WOO_SESSION_HEADER);

  if (accessToken && accessToken !== "undefined") {
    if (refreshToken) {
      validToken = accessToken;

      try {
        const decoded = jwtDecode(accessToken);
        // Check for expiration
        if (decoded.exp! < DateTime.now().toUnixInteger()) {
            // Refresh token
          deleteCookie("X-JWT-Auth");
          const makeRequest = await fetch(
            "http://localhost:3000/api/refreshToken",
            {
              method: "POST",
              body: JSON.stringify({
                refreshToken: refreshToken,
              }),
            }
          );
          const dataJson = await makeRequest.json();
          validToken = dataJson.newToken;
          setCookie("X-JWT-Auth", validToken);
        }
      } catch (error) {
        console.error("Error refreshing token:", error);
      }
    }
  }


  const buildHeaders: any = {};

  if (wooToken && !validToken) {
    buildHeaders[WOO_SESSION_HEADER] = `Session ${wooToken}`;
  }

  if (validToken && validToken !== "undefined") {
    buildHeaders["Authorization"] = `Bearer ${validToken}`;
  }

  return {
    headers: removeEmptyKeys(buildHeaders),
  };
});

export const afterware = new ApolloLink((operation, forward) => {
  console.log("update session cookie if it is not the same as sent in the earlier request");
  const checkCookies = getCookies();
  return forward(operation).map((response) => {
    const context = operation.getContext();
    const {
      response: { headers },
    } = context;
    const session = headers.get(WOO_SESSION_HEADER);
    if (session) {
      // Remove session data if session destroyed.
      if ("false" === session) {
        deleteCookie(WOO_SESSION_HEADER);
      } else if (checkCookies[WOO_SESSION_HEADER] !== session) {
        setCookie(WOO_SESSION_HEADER, headers.get(WOO_SESSION_HEADER));
      }
    }

    return response;
  });
});

const errorLink = onError(
  ({ graphQLErrors, networkError, operation, forward }) => {
    console.log("[errorLink] :: graphQLErrors", graphQLErrors);
    return forward(operation);
  }
);

// Build the link object
const link = asyncAuthLink.concat(
  afterware.concat(
    errorLink.concat(
      createHttpLink({
        uri: URI,
      })
    )
  )
);

// have a function to create a client for you
export function makeClient() {
  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            link,
          ])
        : link,
  });
}

// you need to create a component to wrap your app in
export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

src\lib\apollo.server.ts:

const WOO_SESSION_HEADER = "woocommerce-session";

const asyncAuthLink = setContext(async (operation, context) => {
  let validToken;
  let wooToken;

  const checkCookies = getCookies({
    cookies: cookies,
  });
  const accessToken = checkCookies["X-JWT-Auth"];
  const refreshToken = checkCookies["X-JWT-Refresh"];
  wooToken = checkCookies[WOO_SESSION_HEADER];

  if (!process.browser) {
    if (wooToken) {
      return {
        headers: {
          "woocommerce-session": `Session ${wooToken}`,
        },
      };
    } else {
      return {
        headers: {},
      };
    }
  }

  if (accessToken && accessToken !== "undefined") {
    if (refreshToken) {
      validToken = accessToken;

      try {
        const decoded = jwtDecode(accessToken);
        // Check for expiration
        if (decoded.exp! < DateTime.now().toUnixInteger()) {
          // refresh token here
          deleteCookie("X-JWT-Auth");
          const makeRequest = await fetch(
            "http://localhost:3000/api/refreshToken",
            {
              method: "POST",
              body: JSON.stringify({
                refreshToken: refreshToken,
              }),
            }
          );
          const dataJson = await makeRequest.json();
          validToken = dataJson.newToken;
        }
      } catch (error) {
        console.error("Error refreshing token:", error);
      }
    }
  }

  const buildHeaders: any = {};

  if (wooToken && !validToken) {
    buildHeaders[WOO_SESSION_HEADER] = `Session ${wooToken}`;
  }

  if (validToken && validToken !== "undefined") {
    buildHeaders["Authorization"] = `Bearer ${validToken}`;
    setCookie("X-JWT-Auth", validToken);
  }

  return {
    headers: removeEmptyKeys(buildHeaders),
  };
});

const errorLink = onError(
  ({ graphQLErrors, networkError, operation, forward }) => {
    if (graphQLErrors) {
      const messages = graphQLErrors.map(({ message }) => message);
      console.error("GraphQL errors:", messages);

      if (
        messages.includes("iss do not match") ||
        messages.includes("Error decoding signature")
      ) {
        // handle issuer error
      } else {
        const checkCookies = getCookies({
          cookies: cookies,
        });
        const refreshToken = checkCookies["X-JWT-Refresh"];
        try {
          // Check for expiration
          if (refreshToken) {
            deleteCookie("X-JWT-Auth");
            fetch("http://localhost:3000/api/refreshToken", {
              method: "POST",
              body: JSON.stringify({
                refreshToken: refreshToken,
              }),
            })
              .then((response) => response.json())
              .then((dataJson) => {
                setCookie("X-JWT-Auth", dataJson.newToken);
              });
          }
        } catch (error) {
          console.error("Error refreshing token:", error);
        }
      }
    }

    return forward(operation);
  }
);

export const { getClient } = registerApolloClient(() => {
  console.log("[client]", process.env.GRAPHQL_ENDPOINT);

  const httpLink = createHttpLink({
    uri: process.env.GRAPHQL_ENDPOINT,
    fetchOptions: {
      credentials: "include",
    },
  });

  const link = ApolloLink.from([asyncAuthLink, errorLink, httpLink]);

  return new ApolloClient({
    cache: new InMemoryCache({
      resultCaching: false,
      possibleTypes: {
        Product: ["SimpleProduct", "VariableProduct"],
      },
    }),
    link: link,
  });
});

export const client = new ApolloClient({
  uri: process.env.GRAPHQL_ENDPOINT,
  cache: new InMemoryCache(),
  credentials: "include",
});

And here is the route handler for actually refreshing the token with the help of an external redis service:

export async function POST(request: NextRequest) {
  try {
    const getBody = await request.json();
    const refreshToken = getBody.refreshToken;
    const decodeRefreshToken = jwtDecode<
      JwtPayload & { data: { user: { id: any } } }
    >(refreshToken);
    const userId = decodeRefreshToken.data!.user?.id;

    if (!refreshToken) {
      return new Response("No refresh token", {
        status: 403,
      });
    }

    // Check if there's any token for the user
    const checkExistingToken = await redis.get(userId);

    if (checkExistingToken?.length) {
      return NextResponse.json({
        message: "token fetched!",
        newToken: checkExistingToken,
      });
    }

    const makeRequest = await fetch(
      process.env.GRAPHQL_ENDPOINT as RequestInfo,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query: `
          mutation {
          refreshJwtAuthToken(
            input: {
              clientMutationId: "${uuidV4()}",
              jwtRefreshToken: "${refreshToken}" }
          ) {
            authToken
          }
        }
      `,
        }),
      }
    );

    const dataJson = await makeRequest.json();

    const newToken = dataJson?.data?.refreshJwtAuthToken.authToken;

    // Set the token in redis store
    redis.set(decodeRefreshToken.data!.user?.id, newToken, "EX", 3500);

    return NextResponse.json({
      message: "token refreshed!",
      newToken: newToken,
    });
  } catch (e) {
    console.log("[RouteHandler] :: Error");
    console.log("[KV]", e);
  }
}

This works but with lot of random issues.

PS: It does require a refactor

[sundargautam18]

Here is the better and simple solution to implement this : https://medium.com/@sundargautam2022/implementing-refresh-token-with-nextjs-15-using-app-router-with-cross-api-different-api-5682f83f9802