fix: fix pwa public environment variables

vincentchalamon · vincentchalamon · commit 079953b8f314 · 2024-05-17T17:54:40.000+02:00
diff --git a/compose.yaml b/compose.yaml
@@ -36,12 +36,12 @@ services:
     image: ${IMAGES_PREFIX:-}app-pwa
     environment:
       NEXT_PUBLIC_ENTRYPOINT: http://php
+      NEXT_PUBLIC_OIDC_CLIENT_ID: ${OIDC_CLIENT_ID:-api-platform-pwa}
+      NEXT_PUBLIC_OIDC_SERVER_URL: ${OIDC_SERVER_URL:-https://localhost/oidc/realms/demo}
+      NEXT_PUBLIC_OIDC_SERVER_URL_INTERNAL: ${OIDC_SERVER_URL_INTERNAL:-http://keycloak:8080/oidc/realms/demo}
+      NEXT_PUBLIC_OIDC_AUTHORIZATION_CLIENT_ID: ${OIDC_AUTHORIZATION_CLIENT_ID:-api-platform-api}
       AUTH_SECRET: ${AUTH_SECRET:-!ChangeThisNextAuthSecret!}
       AUTH_URL: ${AUTH_URL:-https://localhost/api/auth}
-      OIDC_CLIENT_ID: ${OIDC_CLIENT_ID:-api-platform-pwa}
-      OIDC_SERVER_URL: ${OIDC_SERVER_URL:-https://localhost/oidc/realms/demo}
-      OIDC_SERVER_URL_INTERNAL: ${OIDC_SERVER_URL_INTERNAL:-http://keycloak:8080/oidc/realms/demo}
-      OIDC_AUTHORIZATION_CLIENT_ID: ${OIDC_AUTHORIZATION_CLIENT_ID:-api-platform-api}
       NEXT_SHARP_PATH: /srv/app/node_modules/sharp
 
 ###> doctrine/doctrine-bundle ###
diff --git a/helm/api-platform/templates/pwa-deployment.yaml b/helm/api-platform/templates/pwa-deployment.yaml
@@ -46,22 +46,22 @@ spec:
                 secretKeyRef:
                   name: {{ include "api-platform.fullname" . }}
                   key: next-auth-secret
-            - name: OIDC_SERVER_URL
+            - name: NEXT_PUBLIC_OIDC_SERVER_URL
               valueFrom:
                 configMapKeyRef:
                   name: {{ include "api-platform.fullname" . }}
                   key: oidc-server-url
-            - name: OIDC_SERVER_URL_INTERNAL
+            - name: NEXT_PUBLIC_OIDC_SERVER_URL_INTERNAL
               valueFrom:
                 configMapKeyRef:
                   name: {{ include "api-platform.fullname" . }}
                   key: oidc-server-url-internal
-            - name: OIDC_CLIENT_ID
+            - name: NEXT_PUBLIC_OIDC_CLIENT_ID
               valueFrom:
                 configMapKeyRef:
                   name: {{ include "api-platform.fullname" . }}
                   key: pwa-client-id
-            - name: OIDC_AUTHORIZATION_CLIENT_ID
+            - name: NEXT_PUBLIC_OIDC_AUTHORIZATION_CLIENT_ID
               valueFrom:
                 configMapKeyRef:
                   name: {{ include "api-platform.fullname" . }}
diff --git a/pwa/app/auth.tsx b/pwa/app/auth.tsx
@@ -2,7 +2,7 @@ import { type TokenSet } from "@auth/core/types";
 import NextAuth, { type Session as DefaultSession, type User } from "next-auth";
 import KeycloakProvider from "next-auth/providers/keycloak";
 
-import { OIDC_CLIENT_ID, OIDC_SERVER_URL, OIDC_SERVER_URL_INTERNAL } from "../config/keycloak";
+import { NEXT_PUBLIC_OIDC_CLIENT_ID, NEXT_PUBLIC_OIDC_SERVER_URL, NEXT_PUBLIC_OIDC_SERVER_URL_INTERNAL } from "../config/keycloak";
 
 export interface Session extends DefaultSession {
   error?: "RefreshAccessTokenError"
@@ -45,10 +45,10 @@ export const { handlers: { GET, POST }, auth } = NextAuth({
       } else {
         // If the access token has expired, try to refresh it
         try {
-          const response = await fetch(`${OIDC_SERVER_URL_INTERNAL}/protocol/openid-connect/token`, {
+          const response = await fetch(`${NEXT_PUBLIC_OIDC_SERVER_URL_INTERNAL}/protocol/openid-connect/token`, {
             headers: { "Content-Type": "application/x-www-form-urlencoded" },
             body: new URLSearchParams({
-              client_id: OIDC_CLIENT_ID,
+              client_id: NEXT_PUBLIC_OIDC_CLIENT_ID,
               grant_type: "refresh_token",
               refresh_token: token.refreshToken,
             }),
@@ -96,8 +96,8 @@ export const { handlers: { GET, POST }, auth } = NextAuth({
   providers: [
     KeycloakProvider({
       id: 'keycloak',
-      clientId: OIDC_CLIENT_ID,
-      issuer: OIDC_SERVER_URL,
+      clientId: NEXT_PUBLIC_OIDC_CLIENT_ID,
+      issuer: NEXT_PUBLIC_OIDC_SERVER_URL,
 
       // user information will be extracted from the `id_token` claims, instead of making a request to the `userinfo` endpoint
       // https://next-auth.js.org/configuration/providers/oauth
@@ -113,10 +113,10 @@ export const { handlers: { GET, POST }, auth } = NextAuth({
       // would love to use discovery, but can't because since next-auth:v5 token endpoint is called internally
       // also, discovery doesn't seem to work properly: https://github.com/nextauthjs/next-auth/pull/9718
       // wellKnown: `${OIDC_SERVER_URL}/.well-known/openid-configuration`,
-      token: `${OIDC_SERVER_URL_INTERNAL}/protocol/openid-connect/token`,
-      userinfo: `${OIDC_SERVER_URL}/protocol/openid-connect/token`,
+      token: `${NEXT_PUBLIC_OIDC_SERVER_URL_INTERNAL}/protocol/openid-connect/token`,
+      userinfo: `${NEXT_PUBLIC_OIDC_SERVER_URL}/protocol/openid-connect/token`,
       authorization: {
-        url: `${OIDC_SERVER_URL}/protocol/openid-connect/auth`,
+        url: `${NEXT_PUBLIC_OIDC_SERVER_URL}/protocol/openid-connect/auth`,
         // https://authjs.dev/guides/basics/refresh-token-rotation#jwt-strategy
         params: {
           access_type: "offline",
diff --git a/pwa/components/admin/AppBar.tsx b/pwa/components/admin/AppBar.tsx
@@ -10,7 +10,7 @@ import DocContext from "../../components/admin/DocContext";
 import HydraLogo from "../../components/admin/HydraLogo";
 import OpenApiLogo from "../../components/admin/OpenApiLogo";
 import Logo from "../../components/admin/Logo";
-import {OIDC_SERVER_URL} from "../../config/keycloak";
+import {NEXT_PUBLIC_OIDC_SERVER_URL} from "../../config/keycloak";
 
 const DocTypeMenuButton = () => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -75,7 +75,7 @@ const Logout = forwardRef((props, ref: ForwardedRef<any>) => {
 
   const handleClick = () => signOut({
     // @ts-ignore
-    callbackUrl: `${OIDC_SERVER_URL}/protocol/openid-connect/logout?id_token_hint=${session.idToken}&post_logout_redirect_uri=${window.location.origin}`,
+    callbackUrl: `${NEXT_PUBLIC_OIDC_SERVER_URL}/protocol/openid-connect/logout?id_token_hint=${session.idToken}&post_logout_redirect_uri=${window.location.origin}`,
   });
 
   return (
diff --git a/pwa/components/admin/authProvider.tsx b/pwa/components/admin/authProvider.tsx
@@ -1,7 +1,7 @@
 import { AuthProvider } from "react-admin";
 import { signIn, signOut, useSession } from "next-auth/react";
 
-import { OIDC_SERVER_URL } from "../../config/keycloak";
+import { NEXT_PUBLIC_OIDC_SERVER_URL } from "../../config/keycloak";
 
 const authProvider: AuthProvider = {
   // Nothing to do here, this function will never be called
@@ -15,7 +15,7 @@ const authProvider: AuthProvider = {
 
     await signOut({
       // @ts-ignore
-      callbackUrl: `${OIDC_SERVER_URL}/protocol/openid-connect/logout?id_token_hint=${session.idToken}&post_logout_redirect_uri=${window.location.origin}`,
+      callbackUrl: `${NEXT_PUBLIC_OIDC_SERVER_URL}/protocol/openid-connect/logout?id_token_hint=${session.idToken}&post_logout_redirect_uri=${window.location.origin}`,
     });
   },
   checkError: async (error) => {
diff --git a/pwa/components/common/Header.tsx b/pwa/components/common/Header.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 
-import { OIDC_SERVER_URL } from "../../config/keycloak";
+import { NEXT_PUBLIC_OIDC_SERVER_URL } from "../../config/keycloak";
 
 export const Header = () => {
   const pathname = usePathname();
@@ -33,7 +33,7 @@ export const Header = () => {
               e.preventDefault();
               signOut({
                 // @ts-ignore
-                callbackUrl: `${OIDC_SERVER_URL}/protocol/openid-connect/logout?id_token_hint=${session.idToken}&post_logout_redirect_uri=${window.location.origin}/books`,
+                callbackUrl: `${NEXT_PUBLIC_OIDC_SERVER_URL}/protocol/openid-connect/logout?id_token_hint=${session.idToken}&post_logout_redirect_uri=${window.location.origin}/books`,
               });
             }}>
               Sign out
diff --git a/pwa/components/review/Item.tsx b/pwa/components/review/Item.tsx
@@ -57,7 +57,7 @@ export const Item: FunctionComponent<Props> = ({ review, onDelete, onEdit }) =>
       )}
       <div key={data["@id"]} className="mb-5 flex" data-testid="review">
         <div className="font-semibold text-gray-600 text-xl w-[50px] h-[50px] px-3 py-1 mr-3 rounded-full bg-gray-200 flex items-center justify-center">
-          {data["user"]["name"].substring(0, 1)}
+          {data.user?.name?.substring(0, 1) ?? "John Doe"}
         </div>
         <div className="w-full">
           {edit && (
@@ -74,7 +74,7 @@ export const Item: FunctionComponent<Props> = ({ review, onDelete, onEdit }) =>
           ) || (
             <>
               <p>
-                <span className="text-lg font-semibold">{data["user"]["name"]}</span>
+                <span className="text-lg font-semibold">{data.user?.name ?? "John Doe"}</span>
                 <span className="text-xs text-gray-400 ml-3">
                   <span className="mr-2">・</span>
                   {new Date(data["publishedAt"]).toLocaleDateString()}
diff --git a/pwa/config/keycloak.ts b/pwa/config/keycloak.ts
@@ -1,4 +1,4 @@
-export const OIDC_CLIENT_ID: string = process.env.OIDC_CLIENT_ID || 'api-platform-pwa';
-export const OIDC_SERVER_URL: string = process.env.OIDC_SERVER_URL || 'https://localhost/oidc/realms/demo';
-export const OIDC_SERVER_URL_INTERNAL: string = process.env.OIDC_SERVER_URL_INTERNAL || 'http://keycloak:8080/oidc/realms/demo';
-export const OIDC_AUTHORIZATION_CLIENT_ID: string = process.env.OIDC_AUTHORIZATION_CLIENT_ID || 'api-platform-api';
+export const NEXT_PUBLIC_OIDC_CLIENT_ID: string = process.env.NEXT_PUBLIC_OIDC_CLIENT_ID || 'api-platform-pwa';
+export const NEXT_PUBLIC_OIDC_SERVER_URL: string = process.env.NEXT_PUBLIC_OIDC_SERVER_URL || 'https://localhost/oidc/realms/demo';
+export const NEXT_PUBLIC_OIDC_SERVER_URL_INTERNAL: string = process.env.NEXT_PUBLIC_OIDC_SERVER_URL_INTERNAL || 'http://keycloak:8080/oidc/realms/demo';
+export const NEXT_PUBLIC_OIDC_AUTHORIZATION_CLIENT_ID: string = process.env.NEXT_PUBLIC_OIDC_AUTHORIZATION_CLIENT_ID || 'api-platform-api';
diff --git a/pwa/utils/review.ts b/pwa/utils/review.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 import { type Session } from "../app/auth";
 import { type Review } from "../types/Review";
-import { OIDC_AUTHORIZATION_CLIENT_ID, OIDC_SERVER_URL } from "../config/keycloak";
+import { NEXT_PUBLIC_OIDC_AUTHORIZATION_CLIENT_ID, NEXT_PUBLIC_OIDC_SERVER_URL } from "../config/keycloak";
 
 interface Permission {
   result: boolean;
@@ -18,14 +18,14 @@ export const usePermission = (review: Review, session: Session|null): boolean =>
 
     (async () => {
       try {
-        const response = await fetch(`${OIDC_SERVER_URL}/protocol/openid-connect/token`, {
+        const response = await fetch(`${NEXT_PUBLIC_OIDC_SERVER_URL}/protocol/openid-connect/token`, {
           headers: {
             "Content-Type": "application/x-www-form-urlencoded",
             Authorization: `Bearer ${session?.accessToken}`,
           },
           body: new URLSearchParams({
             grant_type: "urn:ietf:params:oauth:grant-type:uma-ticket",
-            audience: OIDC_AUTHORIZATION_CLIENT_ID,
+            audience: NEXT_PUBLIC_OIDC_AUTHORIZATION_CLIENT_ID,
             response_mode: "decision",
             permission_resource_format: "uri",
             permission_resource_matching_uri: "true",
