Merge pull request #14 from icefoganalytics/issue-10/fix-tsconfig-jso…

…n-error-around-express-unless

Fix tsconfig.json Error Around `express-unless`

api/package.json

@@ -33,7 +33,6 @@
     "@types/cls-hooked": "^4.3.8",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
-    "@types/express-jwt": "^6.0.4",
     "@types/lodash": "^4.14.202",
     "@typescript-eslint/eslint-plugin": "^6.18.0",
     "@typescript-eslint/parser": "^6.18.0",

api/src/middlewares/jwt-middleware.ts

@@ -0,0 +1,20 @@
+import { expressjwt as jwt } from "express-jwt"
+import jwksRsa, { type GetVerificationKey } from "jwks-rsa"
+
+import { AUTH0_DOMAIN, AUTH0_AUDIENCE } from "@/config"
+
+console.log("AUTH0_DOMAIN", `${AUTH0_DOMAIN}/.well-known/jwks.json`)
+
+export default jwt({
+  secret: jwksRsa.expressJwtSecret({
+    cache: true,
+    rateLimit: true,
+    jwksRequestsPerMinute: 5,
+    jwksUri: `${AUTH0_DOMAIN}/.well-known/jwks.json`,
+  }) as GetVerificationKey,
+
+  // Validate the audience and the issuer.
+  audience: AUTH0_AUDIENCE,
+  issuer: [`${AUTH0_DOMAIN}/`],
+  algorithms: ["RS256"],
+})

api/src/router.ts

@@ -6,6 +6,8 @@ import { template } from "lodash"
 
 import { APPLICATION_NAME, GIT_COMMIT_HASH, RELEASE_TAG } from "@/config"
 
+import jwtMiddleware from "@/middlewares/jwt-middleware"
+
 export const router = Router()
 
 // some routes
@@ -16,6 +18,8 @@ router.route("/_status").get((req: Request, res: Response) => {
   })
 })
 
+router.use("/api", jwtMiddleware)
+
 // if no other api routes match, send the 404 page
 router.use("/api", (req: Request, res: Response) => {
   const templatePath = path.resolve(__dirname, "web/404.html")

docker-compose.development.yml

@@ -11,9 +11,9 @@ x-default-environment: &default-environment
   FRONTEND_URL: "http://localhost:8080"
   VITE_APPLICATION_NAME: "Internal Data Portal"
   VITE_API_BASE_URL: "http://localhost:3000"
-  VITE_AUTH0_CLIENT_ID": "mS8zklFSgatWX3v1OCQgVpEq5MixCm4k"
-  VITE_AUTH0_AUDIENCE": "testing"
-  VITE_AUTH0_DOMAIN": "https://dev-0tc6bn14.eu.auth0.com"
+  VITE_AUTH0_CLIENT_ID: "mS8zklFSgatWX3v1OCQgVpEq5MixCm4k"
+  VITE_AUTH0_AUDIENCE: "testing"
+  VITE_AUTH0_DOMAIN: "https://dev-0tc6bn14.eu.auth0.com"
   RELEASE_TAG: "${RELEASE_TAG:-development}"
   GIT_COMMIT_HASH: "${GIT_COMMIT_HASH:-not-set}"
 

web/src/App.vue

@@ -5,25 +5,25 @@
 </template>
 
 <script lang="ts" setup>
-import { useAuth0 } from "@auth0/auth0-vue"
-import { watch } from "vue"
-import { useRouter } from "vue-router"
+// import { useAuth0 } from "@auth0/auth0-vue"
+// import { watch } from "vue"
+// import { useRouter } from "vue-router"
 
-const router = useRouter()
-const { isLoading, isAuthenticated } = useAuth0()
+// const router = useRouter()
+// const { isLoading, isAuthenticated } = useAuth0()
 
 // TODO: this is hacked-together, it should reworked before final usage
-watch(
-  () => [isLoading.value, isAuthenticated.value],
-  ([newIsLoading, newIsAuthenticated], _) => {
-    if (newIsLoading === false && newIsAuthenticated === true) {
-      router.push("/dashboard")
-    } else if (!newIsLoading && !isAuthenticated.value) {
-      router.push("/sign-in")
-    }
-  },
-  {
-    immediate: true,
-  }
-)
+// watch(
+//   () => [isLoading.value, isAuthenticated.value],
+//   ([newIsLoading, newIsAuthenticated], _) => {
+//     if (newIsLoading === false && newIsAuthenticated === true) {
+//       router.push("/dashboard")
+//     } else if (!newIsLoading && !isAuthenticated.value) {
+//       router.push("/sign-in")
+//     }
+//   },
+//   {
+//     immediate: true,
+//   }
+// )
 </script>

web/src/api/http-client.ts

@@ -2,9 +2,7 @@ import qs from "qs"
 import axios from "axios"
 
 import { API_BASE_URL } from "@/config"
-import { useAuth0 } from "@auth0/auth0-vue"
-
-const { getAccessTokenSilently, loginWithRedirect } = useAuth0()
+import auth0 from "@/plugins/auth0-plugin"
 
 export const httpClient = axios.create({
   baseURL: API_BASE_URL,
@@ -19,8 +17,12 @@ export const httpClient = axios.create({
 })
 
 httpClient.interceptors.request.use(async (config) => {
-  const accessToken = await getAccessTokenSilently()
-  config.headers["Authorization"] = `Bearer ${accessToken}`
+  // Only add the Authorization header to requests that start with "/api"
+  if (config.url?.startsWith("/api")) {
+    const accessToken = await auth0.getAccessTokenSilently()
+    config.headers["Authorization"] = `Bearer ${accessToken}`
+  }
+
   return config
 })
 
@@ -30,7 +32,7 @@ httpClient.interceptors.response.use(null, async (error) => {
   // Bounce the user if they hit a login required error when trying to access a protected route
   // It would probably be better to move this code to a route guard or something?
   if (error?.error === "login_required") {
-    await loginWithRedirect({
+    await auth0.loginWithRedirect({
       appState: { targetUrl: window.location.pathname },
     })
   } else if (error?.response?.data?.message) {