Read values from .env file for the sample app

samples/apps/oauth/README.md

@@ -38,16 +38,34 @@ Generate a self-signed SSL certificate by running the following command:
 openssl req -nodes -new -x509 -keyout server.key -out server.cert
 ```
 
-**Configure environment variables:**
+**Configure the application:**
 
-Add the following environment variables to your web server configuration or `.env` file. Replace `<your-app-id>` with your actual application ID.
+There are two ways to configure the application depending on your use case:
+
+**For Development (using `npm run dev`):**
+
+Create or update the `.env` file in the root directory with your configuration. Replace `<your-app-id>` with your actual application ID:
 
 ```env
 VITE_REACT_APPLICATIONS_ENDPOINT=https://localhost:8090/applications
 VITE_REACT_APP_SERVER_FLOW_ENDPOINT=https://localhost:8090/flow
 VITE_REACT_APP_AUTH_APP_ID=<your-app-id>
 ```
 
+**For Production (using built app with `npm start` or custom web server):**
+
+Update the `public/runtime.json` file with your configuration:
+
+```json
+{
+    "applicationID": "<your-app-id>",
+    "flowEndpoint": "https://localhost:8090/flow",
+    "applicationsEndpoint": "https://localhost:8090/applications"
+}
+```
+
+**Note:** In development mode, `.env` values take precedence. In production mode, `runtime.json` values take precedence. Placeholder values (e.g., `{your-application-id}`) in `runtime.json` are automatically ignored.
+
 ## License
 
 Licenses this source under the Apache License, Version 2.0 LICENSE, You may not use this file except in compliance with the License.

samples/apps/oauth/src/config.tsx

@@ -16,19 +16,50 @@
  * under the License.
  */
 
-const response = await fetch('/runtime.json');
-const runtimeConfig = await response.json();
+interface RuntimeConfig {
+    applicationID?: string;
+    applicationsEndpoint?: string;
+    flowEndpoint?: string;
+    authorizationEndpoint?: string;
+    tokenEndpoint?: string;
+    redirectUri?: string;
+}
+
+let runtimeConfig: RuntimeConfig = {};
+if (!import.meta.env.DEV) {
+    const response = await fetch('/runtime.json');
+    runtimeConfig = await response.json();
+}
+
+// Helper function to get config value, preferring env vars in development mode
+// and filtering out placeholder values from both runtime and env sources
+const getConfigValue = (runtimeValue: string | undefined, envValue: string | undefined): string | undefined => {
+    const isPlaceholder = (value: string | undefined): boolean => {
+        return !value || (value.startsWith('{') && value.endsWith('}'));
+    };
+
+    // In development mode, prefer env variables, filtering out placeholders from both
+    const filteredEnvValue = isPlaceholder(envValue) ? undefined : envValue;
+    const filteredRuntimeValue = isPlaceholder(runtimeValue) ? undefined : runtimeValue;
+
+    if (import.meta.env.DEV) {
+        return filteredEnvValue || filteredRuntimeValue;
+    }
+
+    // In production mode, prefer runtime config but filter out placeholders from both
+    return filteredRuntimeValue || filteredEnvValue;
+};
 
 const config = {
-    applicationID: runtimeConfig.applicationID || import.meta.env.VITE_REACT_APP_AUTH_APP_ID,
-    applicationsEndpoint: runtimeConfig.applicationsEndpoint || import.meta.env.VITE_REACT_APPLICATIONS_ENDPOINT,
-    flowEndpoint: runtimeConfig.flowEndpoint || import.meta.env.VITE_REACT_APP_SERVER_FLOW_ENDPOINT,
-    authorizationEndpoint: runtimeConfig.authorizationEndpoint || import.meta.env.VITE_REACT_APP_SERVER_AUTHORIZATION_ENDPOINT,
-    tokenEndpoint: runtimeConfig.tokenEndpoint || import.meta.env.VITE_REACT_APP_SERVER_TOKEN_ENDPOINT,
-    clientId: import.meta.env.VITE_REACT_APP_CLIENT_ID,
-    clientSecret: import.meta.env.VITE_REACT_APP_CLIENT_SECRET,
-    redirectUri: runtimeConfig.redirectUri || import.meta.env.VITE_REACT_APP_REDIRECT_URI,
-    scope: import.meta.env.VITE_REACT_APP_SCOPE
+    applicationID: getConfigValue(runtimeConfig.applicationID, import.meta.env.VITE_REACT_APP_AUTH_APP_ID) || '',
+    applicationsEndpoint: getConfigValue(runtimeConfig.applicationsEndpoint, import.meta.env.VITE_REACT_APPLICATIONS_ENDPOINT) || '',
+    flowEndpoint: getConfigValue(runtimeConfig.flowEndpoint, import.meta.env.VITE_REACT_APP_SERVER_FLOW_ENDPOINT) || '',
+    authorizationEndpoint: getConfigValue(runtimeConfig.authorizationEndpoint, import.meta.env.VITE_REACT_APP_SERVER_AUTHORIZATION_ENDPOINT) || '',
+    tokenEndpoint: getConfigValue(runtimeConfig.tokenEndpoint, import.meta.env.VITE_REACT_APP_SERVER_TOKEN_ENDPOINT) || '',
+    clientId: import.meta.env.VITE_REACT_APP_CLIENT_ID || '',
+    clientSecret: import.meta.env.VITE_REACT_APP_CLIENT_SECRET || '',
+    redirectUri: getConfigValue(runtimeConfig.redirectUri, import.meta.env.VITE_REACT_APP_REDIRECT_URI) || '',
+    scope: import.meta.env.VITE_REACT_APP_SCOPE || ''
 };
 
 export default config;