use environment variables instead of local config file

Author: jimmyyan9

.gitignore

@@ -1,7 +1,10 @@
 .DS_Store
 node_modules
 .env
+.env.local
 **/auth0-variables.js
+**/build
+**/dist
 npm-debug.log
 yarn-error.log
 .editorconfig

Sample-01/.env.example

@@ -0,0 +1,6 @@
+AUTH0_DOMAIN={yourDomain}
+AUTH0_CLIENT_ID={yourClientId}
+# AUTH0_AUDIENCE={yourApiIdentifier}
+
+# APP_BASE_URL=https://your-app.com
+# API_BASE_URL=https://your-api-server.com

Sample-01/Dockerfile

@@ -16,7 +16,16 @@ RUN npm install
 
 COPY . .
 
-RUN npm run build
+ARG AUTH0_DOMAIN
+ARG AUTH0_CLIENT_ID
+ARG AUTH0_AUDIENCE
+ARG API_BASE_URL
+
+RUN AUTH0_DOMAIN=${AUTH0_DOMAIN} \
+  AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID} \
+  AUTH0_AUDIENCE=${AUTH0_AUDIENCE} \
+  API_BASE_URL=${API_BASE_URL} \
+  npm run build
 
 # ---------------
 
@@ -35,7 +44,6 @@ COPY --from=build /app/package.json .
 RUN npm install --omit=dev
 
 COPY --from=build /app/dist ./dist
-COPY --from=build /app/src/auth_config.json ./src/auth_config.json
 COPY --from=build /app/server.js .
 COPY --from=build /app/api-server.js .
 

Sample-01/README.md

@@ -1,6 +1,6 @@
 # Auth0 React SDK Sample Application
 
-This sample demonstrates the integration of [Auth0 React SDK](https://github.com/auth0/auth0-react) into a React application created using [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html). The sample is a companion to the [Auth0 React SDK Quickstart](https://auth0.com/docs/quickstart/spa/react).
+This sample demonstrates the integration of [Auth0 React SDK](https://github.com/auth0/auth0-react) into a React application created using [Vite](https://reactjs.org/docs/create-a-new-react-app.html). The sample is a companion to the [Auth0 React SDK Quickstart](https://auth0.com/docs/quickstart/spa/react).
 
 This sample demonstrates the following use cases:
 
@@ -22,27 +22,26 @@ npm install
 
 ### Create an API
 
-For the ["call an API"](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api) page to work, you will need to [create an API](https://auth0.com/docs/apis) using the [management dashboard](https://manage.auth0.com/#/apis). This will give you an API identifier that you can use in the `audience` configuration field below.
+For the ["call an API"](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api) page to work, you will need to [create an API](https://auth0.com/docs/apis) using the [management dashboard](https://manage.auth0.com/#/apis). This will give you an API identifier that you can use as the `AUTH0_AUDIENCE` environment variable below.
 
-If you do not wish to use an API or observe the API call working, you should not specify the `audience` value in the next step. Otherwise, you will receive a "Service not found" error when trying to authenticate.
+If you do not wish to use an API or observe the API call working, you should not specify the `AUTH0_AUDIENCE` environment variable in the next step. Otherwise, you will receive a "Service not found" error when trying to authenticate.
 
 ### Configure credentials
 
 The project needs to be configured with your Auth0 domain and client ID in order for the authentication flow to work.
 
-To do this, first copy `src/auth_config.json.example` into a new file in the same folder called `src/auth_config.json`, and replace the values with your own Auth0 application credentials, and optionally the base URLs of your application and API:
+To do this, first copy `.env.example` into a new file in the same folder called `.env.local`, and replace the values with your own Auth0 application credentials, and optionally the base URLs of your application and API:
 
-```json
-{
-  "domain": "{YOUR AUTH0 DOMAIN}",
-  "clientId": "{YOUR AUTH0 CLIENT ID}",
-  "audience": "{YOUR AUTH0 API_IDENTIFIER}",
-  "appOrigin": "{OPTIONAL: THE BASE URL OF YOUR APPLICATION (default: http://localhost:3000)}",
-  "apiOrigin": "{OPTIONAL: THE BASE URL OF YOUR API (default: http://localhost:3001)}"
-}
+```bash
+AUTH0_DOMAIN=your-tenant.us.auth0.com
+AUTH0_CLIENT_ID=your-client-id
+# AUTH0_AUDIENCE=your-api-identifier # optional, only needed for the External API feature
+
+# APP_BASE_URL=https://your-app.com # optional, defaults work fine for local development
+# API_BASE_URL=https://your-api-server.com # optional, defaults work fine for local development
 ```
 
-**Note**: Do not specify a value for `audience` here if you do not wish to use the API part of the sample.
+**Note**: Do not specify a value for `AUTH0_AUDIENCE` here if you do not wish to use the API part of the sample.
 
 ## Run the sample
 

Sample-01/api-server.js

@@ -1,23 +1,26 @@
+require('dotenv').config({ path: '.env.local' })
+
 const express = require("express");
 const cors = require("cors");
 const morgan = require("morgan");
 const helmet = require("helmet");
 const { auth } = require("express-oauth2-jwt-bearer");
-const authConfig = require("./src/auth_config.json");
 
 const app = express();
 
 const port = process.env.API_PORT || 3001;
 const appPort = process.env.SERVER_PORT || 3000;
-const appOrigin = authConfig.appOrigin || `http://localhost:${appPort}`;
+const appOrigin = process.env.APP_BASE_URL || `http://localhost:${appPort}`;
+const domain = process.env.AUTH0_DOMAIN;
+const audience = process.env.AUTH0_AUDIENCE;
 
 if (
-  !authConfig.domain ||
-  !authConfig.audience ||
-  authConfig.audience === "{API_IDENTIFIER}"
+  !domain ||
+  !audience ||
+  audience === "{yourApiIdentifier}"
 ) {
   console.log(
-    "Exiting: Please make sure that auth_config.json is in place and populated with valid domain and audience values"
+    "Exiting API Server: Please make sure AUTH0_DOMAIN and AUTH0_AUDIENCE environment variables are set"
   );
 
   process.exit();
@@ -28,8 +31,8 @@ app.use(helmet());
 app.use(cors({ origin: appOrigin }));
 
 const checkJwt = auth({
-  audience: authConfig.audience,
-  issuerBaseURL: `https://${authConfig.domain}/`,
+  audience,
+  issuerBaseURL: `https://${domain}/`,
   algorithms: ["RS256"],
 });
 

Sample-01/exec.ps1

@@ -1,2 +1,19 @@
-docker build --rm -t auth0-react-01-login .
-docker run --init -p 3000:3000 -p 3001:3001 -it auth0-react-01-login
+if (-not (Test-Path .env.local)) {
+    Write-Error "Error: .env.local not found. Copy .env.example to .env.local and fill in your credentials."
+    exit 1
+}
+
+$envVars = @{}
+Get-Content .env.local | Where-Object { $_ -notmatch '^#' -and $_ -notmatch '^\s*$' } | ForEach-Object {
+    $parts = $_ -split '=', 2
+    $envVars[$parts[0].Trim()] = $parts[1].Trim()
+}
+
+docker build `
+    --build-arg "AUTH0_DOMAIN=$($envVars['AUTH0_DOMAIN'])" `
+    --build-arg "AUTH0_CLIENT_ID=$($envVars['AUTH0_CLIENT_ID'])" `
+    --build-arg "AUTH0_AUDIENCE=$($envVars['AUTH0_AUDIENCE'])" `
+    --build-arg "API_BASE_URL=$($envVars['API_BASE_URL'])" `
+    -t auth0-react-01-login .
+
+docker run --init -p 3000:3000 -p 3001:3001 --env-file .env.local -it auth0-react-01-login

Sample-01/exec.sh

@@ -1,3 +1,16 @@
 #!/usr/bin/env bash
-docker build -t auth0-react-02-calling-an-api .
-docker run --init -p 3000:3000 -p 3001:3001 -it auth0-react-02-calling-an-api
+if [ ! -f .env.local ]; then
+  echo "Error: .env.local not found. Copy .env.example to .env.local and fill in your credentials."
+  exit 1
+fi
+
+export $(grep -v '^#' .env.local | grep -v '^$' | xargs)
+
+docker build \
+  --build-arg AUTH0_DOMAIN="$AUTH0_DOMAIN" \
+  --build-arg AUTH0_CLIENT_ID="$AUTH0_CLIENT_ID" \
+  --build-arg AUTH0_AUDIENCE="$AUTH0_AUDIENCE" \
+  --build-arg API_BASE_URL="$API_BASE_URL" \
+  -t auth0-react-02-calling-an-api .
+
+docker run --init -p 3000:3000 -p 3001:3001 --env-file .env.local -it auth0-react-02-calling-an-api