redirect to login for 401 responses

apps/frackend/docker-compose.yaml

@@ -8,6 +8,7 @@ services:
       - "8080:8080"
     command: >
       --auto-login=true
+      --auto-login-ignore-paths=/frackend/*
       --openid.provider=azure
       --ingress=http://localhost:8080
       --bind-address=0.0.0.0:8080

apps/frackend/nais/frackend-dev.yaml

@@ -19,6 +19,8 @@ spec:
     sidecar:
       enabled: true
       autoLogin: true
+      autoLoginIgnorePaths:
+        - "/frackend/*"
   accessPolicy:
     outbound:
       rules:

apps/frackend/nais/frackend-prod.yaml

@@ -19,6 +19,8 @@ spec:
     sidecar:
       enabled: true
       autoLogin: true
+      autoLoginIgnorePaths:
+        - "/frackend/*"
   accessPolicy:
     outbound:
       rules:

apps/frackend/src/apiProxy.ts

@@ -5,15 +5,15 @@ import config from "./config.js";
 
 export const setupNomApiProxy = (app: Express) =>
   addProxyHandler(app, {
-    ingoingUrl: "/nom-api",
+    ingoingUrl: "/frackend/nom-api",
     outgoingUrl: config.proxy.nomApiUrl,
     scope: config.proxy.nomApiScope,
     flow: "ON_BEHALF_OF",
   });
 
 export const setupTeamcatApiProxy = (app: Express) =>
   addProxyHandler(app, {
-    ingoingUrl: "/team-catalog",
+    ingoingUrl: "/frackend/team-catalog",
     outgoingUrl: config.proxy.teamcatApiUrl,
     scope: config.proxy.teamcatApiScope,
     flow: "ON_BEHALF_OF",

apps/frontend/.env

@@ -1,3 +1,3 @@
-VITE_TEAMCATALOG_ENDPOINT=/team-catalog
-VITE_NOM_API_URL=/nom-api
+VITE_TEAMCATALOG_ENDPOINT=/frackend/team-catalog
+VITE_NOM_API_URL=/frackend/nom-api
 VITE_PROCESS_CAT_BASE_URL=https://behandlingskatalog.intern.nav.no

apps/frontend/package.json

@@ -5,7 +5,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --mode prod",
     "preview": "vite preview",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx .",

apps/frontend/src/main.tsx

@@ -4,6 +4,7 @@ import "./appStyles.css";
 
 import { getWebInstrumentations, initializeFaro } from "@grafana/faro-web-sdk";
 import { TracingInstrumentation } from "@grafana/faro-web-tracing";
+import axios from "axios";
 import dayjs from "dayjs";
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -13,8 +14,27 @@ import { env } from "./util/env";
 
 dayjs.locale("nb");
 
-// Don't initialize faro when running the dev-server
+/**
+ * Intercept errors that are 401.
+ * This assumes that Wonderwall is the service giving 401 errors when there is no active session.
+ * Requests are in those cases short-circuited by Wonderwall. https://docs.nais.io/security/auth/wonderwall/?h=wonderwa#11-redirect-after-login
+ * When Wonderwall respons with 401 it also supplies a location header that will take the user to login page and be redirected to where they were: /oauth2/login?redirect=${currentPath}
+ *
+ * To make this work there are a few caveats:
+ * 1. autologin must be enabled
+ * 2. All requests to Frackend must be ignored by autologin
+ * 3. Except the route that serves the SPA. In our case this is the fallback "*" route.
+ *
+ * See this thread for additional context: https://nav-it.slack.com/archives/C5KUST8N6/p1694767530593689
+ */
+axios.interceptors.response.use(undefined, (error) => {
+  if (error.response.status === 401) {
+    window.location.assign(error.response.headers.location);
+  }
+  return Promise.reject(error);
+});
 
+// Don't initialize faro when running the dev-server
 if (!env.isLocal) {
   const url = env.isDev ? "https://telemetry.ekstern.dev.nav.no/collect" : "https://telemetry.nav.no/collect";