fix(webapp): Correctly check access token expiration on client side (#…

…375)

See #367

apps/webapp/sentry.client.config.ts

@@ -4,7 +4,11 @@ Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   release: process.env.NEXT_PUBLIC_RELEASE_NAME,
   // Replay may only be enabled for the client-side
-  integrations: [Sentry.replayIntegration()],
+  integrations: [
+    Sentry.extraErrorDataIntegration(),
+    Sentry.sessionTimingIntegration(),
+    Sentry.replayIntegration(),
+  ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
@@ -22,6 +26,5 @@ Sentry.init({
     /Du bist nicht angemeldet/,
     /Du musst angemeldet sein um das zu tun./,
     /Du hast nicht die Rechte dir diesen Beitrag anzusehen./,
-    /Request failed with status code 401/,
   ],
 });

apps/webapp/src/api/apollo/links/authLink.ts

@@ -3,7 +3,7 @@ import { Observable, ObservableSubscription } from '@apollo/client/utilities';
 import { JwtPayload, jwtDecode } from 'jwt-decode';
 import { isBrowser } from 'util/isBrowser';
 
-const REFRESH_TOKEN_BUFFER = 60 * 5; // 5 minutes
+const REFRESH_TOKEN_BUFFER = 5 * 60; // 5 minutes
 
 type AuthLinkParams = {
   initialToken?: string;
@@ -36,9 +36,11 @@ export const createAuthLink = ({
             const now = Date.now() / 1000;
             const expires = decoded.exp;
 
+            console.log('expires', expires, now);
+
             if (
               expires &&
-              expires < now - REFRESH_TOKEN_BUFFER &&
+              expires - REFRESH_TOKEN_BUFFER <= now &&
               sendRefreshTokenRequest
             ) {
               const newToken = await sendRefreshTokenRequest();

apps/webapp/src/api/auth.ts

@@ -1,27 +1,39 @@
+import * as Sentry from '@sentry/nextjs';
+import { trace } from '@opentelemetry/api';
 import axios from 'axios';
 import { createHeaders } from './apollo/customFetch';
 import { isBrowser } from 'util/isBrowser';
 import { appConfig } from 'config';
 
-export const sendRefreshRequest = async (
+export const sendRefreshRequest = (
   headers: Record<string, string | null> = {}
-): Promise<{ accessToken: string; refreshToken: string } | null> => {
-  try {
-    const { data } = await axios
-      .request<any>({
-        method: 'post',
-        baseURL: isBrowser() ? '/' : appConfig.get('API_URL'),
-        url: '/auth/token/refresh',
-        withCredentials: isBrowser(),
-        headers: createHeaders(headers),
-      })
-      .catch((e) => {
-        throw e;
-      });
-    return data;
-  } catch (e) {
-    // TODO: Sentry
-    console.error(e);
-    return null;
-  }
-};
+) =>
+  trace
+    .getTracer('lotta-web')
+    .startActiveSpan('sendRefreshRequest', async () => {
+      try {
+        Sentry.addBreadcrumb({
+          category: 'auth',
+          message: 'trying to refresh token.',
+          data: {
+            headers,
+            isBrowser: isBrowser(),
+          },
+        });
+        const { data } = await axios.request<{
+          accessToken: string;
+          refreshToken: string;
+        } | null>({
+          method: 'post',
+          baseURL: isBrowser() ? '/' : appConfig.get('API_URL'),
+          url: '/auth/token/refresh',
+          withCredentials: isBrowser(),
+          headers: createHeaders(headers),
+        });
+        return data;
+      } catch (e) {
+        Sentry.captureException(e);
+        console.error(e);
+        return null;
+      }
+    });

apps/webapp/src/util/auth/jwt.ts

@@ -54,7 +54,6 @@ export class JWT {
   }
 
   isValid(): boolean {
-    const now = new Date();
-    return now <= this.body.expires && now >= this.body.notBefore;
+    return new Date() >= this.body.notBefore;
   }
 }