fix(frontend): refreshToken before graphql request (#192)

* fix(frontend): update rereshToken

* wup

* clear token

* fix: auth

* fix

* remove logs

* remove logs

targets/frontend/package.json

@@ -19,6 +19,7 @@
     "@socialgouv/cdtn-sources": "^4.35.0",
     "@socialgouv/matomo-next": "^1.1.2",
     "@socialgouv/react-ui": "^4.17.0",
+    "@urql/exchange-auth": "^0.1.2",
     "@zeit/next-source-maps": "0.0.4-canary.1",
     "ace-builds": "^1.4.12",
     "argon2": "^0.27.0",

targets/frontend/src/hoc/CustomUrqlClient.js

@@ -1,5 +1,8 @@
 import { withUrqlClient } from "next-urql";
-import { authExchange } from "src/lib/auth/authTokenExchange";
+import {
+  customAuthExchange,
+  customErrorExchange,
+} from "src/lib/auth/exchanges";
 import { cacheExchange, dedupExchange, fetchExchange } from "urql";
 
 export const withCustomUrqlClient = (Component) =>
@@ -21,7 +24,8 @@ export const withCustomUrqlClient = (Component) =>
         dedupExchange,
         cacheExchange,
         ssrExchange,
-        authExchange(ctx),
+        customErrorExchange(),
+        customAuthExchange(ctx),
         fetchExchange,
       ].filter(Boolean),
       requestPolicy: "cache-first",

targets/frontend/src/hoc/UserProvider.js

@@ -65,7 +65,7 @@ export const ProvideUser = ({ children, tokenData }) => {
   }
   const isAuth = Boolean(user);
   const isAdmin = user?.roles.includes("admin");
-  console.log({ provideUser: user });
+
   return (
     <UserContext.Provider value={{ isAdmin, isAuth, logout, user }}>
       {children}

targets/frontend/src/lib/auth/exchanges.js

@@ -0,0 +1,94 @@
+import { errorExchange, makeOperation } from "@urql/core";
+import { authExchange } from "@urql/exchange-auth";
+import { auth, getToken, isTokenExpired, setToken } from "src/lib/auth/token";
+
+import { request } from "../request";
+
+export function customAuthExchange(ctx) {
+  return authExchange({
+    addAuthToOperation: function addAuthToOperation({ authState, operation }) {
+      if (!authState?.token) {
+        return operation;
+      }
+      const fetchOptions =
+        typeof operation.context.fetchOptions === "function"
+          ? operation.context.fetchOptions()
+          : operation.context.fetchOptions || {};
+
+      return makeOperation(operation.kind, operation, {
+        ...operation.context,
+        fetchOptions: {
+          ...fetchOptions,
+          headers: {
+            ...fetchOptions.headers,
+            Authorization: `Bearer ${authState.token}`,
+          },
+        },
+      });
+    },
+
+    didAuthError: ({ error }) => {
+      // check if the error was an auth error (this can be implemented in various ways, e.g. 401 or a special error code)
+      return error.graphQLErrors.some(
+        (e) => e.extensions?.code === "invalid-jwt"
+      );
+    },
+
+    getAuth: async ({ authState }) => {
+      // for initial launch, fetch the auth state from storage (local storage, async storage etc)
+      console.log("getAuth", { authState });
+      if (!authState) {
+        const token = getToken() || (await auth(ctx));
+        if (token) {
+          return { token: token.jwt_token };
+        }
+        return null;
+      }
+
+      /**
+       * the following code gets executed when an auth error has occurred
+       * we should refresh the token if possible and return a new auth state
+       * If refresh fails, we should log out
+       **/
+
+      // if your refresh logic is in graphQL, you must use this mutate function to call it
+      // if your refresh logic is a separate RESTful endpoint, use fetch or similar
+      setToken(null);
+      const result = await auth(ctx);
+      console.log({ result });
+      if (result?.jwt_token) {
+        // return the new tokens
+        return { token: result.jwt_token };
+      }
+
+      return null;
+    },
+
+    willAuthError: ({ authState }) => {
+      // e.g. check for expiration, existence of auth etc
+      if (!authState || isTokenExpired()) return true;
+      return false;
+    },
+  });
+}
+
+export function customErrorExchange() {
+  return errorExchange({
+    onError: (error) => {
+      const { graphQLErrors } = error;
+      // we only get an auth error here when the auth exchange had attempted to refresh auth and getting an auth error again for the second time
+      const isAuthError = graphQLErrors.some(
+        (e) => e.extensions?.code === "invalid-jwt"
+      );
+      if (isAuthError) {
+        // clear storage, log the user out etc
+        // your app logout logic should trigger here
+        console.log("errorExchange", "logout");
+        request("/api/logout", {
+          credentials: "include",
+          mode: "same-origin",
+        });
+      }
+    },
+  });
+}

targets/frontend/src/lib/auth/jwt.js

@@ -1,6 +1,6 @@
 import jwt, { verify } from "jsonwebtoken";
 
-const { HASURA_GRAPHQL_JWT_SECRET, JWT_TOKEN_EXPIRES = 15 } = process.env;
+const { HASURA_GRAPHQL_JWT_SECRET, JWT_TOKEN_EXPIRES } = process.env;
 const jwtSecret = JSON.parse(HASURA_GRAPHQL_JWT_SECRET);
 
 export function generateJwtToken(user) {

targets/frontend/src/lib/auth/token.js

@@ -6,7 +6,11 @@ import { setRefreshTokenCookie } from "./setRefreshTokenCookie";
 let inMemoryToken;
 
 export function getToken() {
-  return inMemoryToken ? inMemoryToken.jwt_token : null;
+  return inMemoryToken || null;
+}
+
+export function setToken(token) {
+  inMemoryToken = token;
 }
 
 export function isTokenExpired() {
@@ -16,7 +20,7 @@ export function isTokenExpired() {
 }
 
 export async function auth(ctx) {
-  console.log("[ auth ] ");
+  console.log("[ auth ] ", { ctxToken: ctx?.token }, inMemoryToken);
   if (ctx?.token) {
     return ctx.token;
   }
@@ -71,7 +75,3 @@ export async function auth(ctx) {
     }
   }
 }
-
-export function setToken(token) {
-  inMemoryToken = token;
-}

targets/frontend/src/pages/api/refresh_token.js

@@ -10,7 +10,7 @@ import { v4 as uuidv4 } from "uuid";
 import {
   deletePreviousRefreshTokenMutation,
   getRefreshTokenQuery,
-} from "./refreshToken.gql";
+} from "./refresh_token.gql";
 
 export default async function refreshToken(req, res) {
   const apiError = createErrorFor(res);

yarn.lock

@@ -3447,7 +3447,7 @@
     "@typescript-eslint/types" "4.4.0"
     eslint-visitor-keys "^2.0.0"
 
-"@urql/core@^1.15.1":
+"@urql/core@>=1.14.0", "@urql/core@^1.15.1":
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-1.15.1.tgz#fa49909f2841d092796dd540cef6e9df89222560"
   integrity sha512-a05ablx/aKNCUc9dEbx0GvE28UC0sJ1FmfsSfmJNqecYlYeb4XvSQW4FLVy0e/MjQeB9op/weiVIEw+za2ssGw==
@@ -3462,6 +3462,14 @@
   dependencies:
     wonka ">= 4.0.9"
 
+"@urql/exchange-auth@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@urql/exchange-auth/-/exchange-auth-0.1.2.tgz#67a76ef78ab4ea9dc51c050d1b79362e9abbffc6"
+  integrity sha512-SIrcnbom+nro0pALmqQmcMxUcy8qZUoykoPs5LezYVPmvZXx4ErXwly58g0XoU4eX10U2gakjCFPTyleF8Nt6Q==
+  dependencies:
+    "@urql/core" ">=1.14.0"
+    wonka "^4.0.14"
+
 "@vercel/ncc@0.24.1", "@vercel/ncc@^0.24.1":
   version "0.24.1"
   resolved "https://registry.yarnpkg.com/@vercel/ncc/-/ncc-0.24.1.tgz#3ea2932c85ba87f4de6fe550d60e1bf5c005985e"