Runtime env var support (#701)

* WIP

* WIP

* M

* Everything works

* Fix yarn.lock

* Fix package.json

* No need for react-inject-env anymore

* Fix some tests

* Fix

* NOT WIP

* Cleanup a bit

* Fix logger

* Revert

* Fix template test

* Node 20

* Fix eslintrc.json

* nvmrc

* Sanitize URL

* Fix tests

* Sanitize?

* Fix problems

* Clean yarn.lock

* Revert package.json

* Fedramp improvments

* Add DESCOPE to env filter

* Oopsy

* Allow branch name in image tag for fedramp

* Use Caddy

* Match to the old server

* Clean

* Debug

* Works dont touch

* Update Dockerfile

Co-authored-by: Omer Cohen <[email protected]>

* WIP

* Fix Caddyfile

* Cleaner and better

* Works as http docker

* Added documentation

* Cleanup

* Support legacy env var names

---------

Co-authored-by: tomski747 <[email protected]>
Co-authored-by: Eliya Sadan <[email protected]>
Co-authored-by: Omer Cohen <[email protected]>

Author: 3 people

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.git
+

.gitignore

@@ -31,3 +31,5 @@ yarn-error.log*
 .vercel
 .env
 .bom
+
+tmp*

.husky/pre-commit

@@ -1,2 +1,3 @@
 
+. "$(dirname "$0")/_/husky.sh"
 yarn run format-lint

Caddyfile

@@ -0,0 +1,57 @@
+{
+	debug
+	log {
+		format console
+		output stdout
+		level info
+	}
+}
+
+http://*:{$PORT:8080} {
+	log
+	encode gzip
+
+	handle /login* {
+		uri strip_prefix /login
+		root * {$WWW_ROOT:/www}
+		try_files {path} /index.html
+		file_server browse
+	}
+
+	vars {
+		REACT_APP_DESCOPE_BASE_URL '{$REACT_APP_DESCOPE_BASE_URL:https://api.descope.com}'
+		REACT_APP_CONTENT_BASE_URL '{$REACT_APP_CONTENT_BASE_URL:https://api.descope.com/pages}'
+		REACT_APP_USE_ORIGIN_BASE_URL '{$REACT_APP_USE_ORIGIN_BASE_URL:false}'
+		REACT_APP_FAVICON_URL_TEMPLATE '{$REACT_APP_FAVICON_URL_TEMPLATE:https://api.descope.com/pages/\{projectId}}/v2-beta/\{ssoAppId}/assets/favicon.ico'
+		REACT_APP_DEFAULT_FAVICON_URL '{$REACT_APP_DEFAULT_FAVICON_URL:https://imgs.descope.com/auth-hosting/favicon.svg}'
+		DESCOPE_PROJECT_ID '{$DESCOPE_PROJECT_ID}'
+		DESCOPE_FLOW_ID '{$DESCOPE_FLOW_ID}'
+		LOGGER '{$LOGGER:false}'
+	}
+
+	handle /login/env.js {
+		uri strip_prefix /login
+		templates
+		respond `
+window.env = {
+	REACT_APP_DESCOPE_BASE_URL: {{ placeholder "http.vars.REACT_APP_DESCOPE_BASE_URL" }},
+	REACT_APP_CONTENT_BASE_URL: {{ placeholder "http.vars.REACT_APP_CONTENT_BASE_URL" }},
+	REACT_APP_USE_ORIGIN_BASE_URL: {{ placeholder "http.vars.REACT_APP_USE_ORIGIN_BASE_URL" }},
+	REACT_APP_FAVICON_URL_TEMPLATE: {{ placeholder "http.vars.REACT_APP_FAVICON_URL_TEMPLATE" }},
+	REACT_APP_DEFAULT_FAVICON_URL: {{ placeholder "http.vars.REACT_APP_DEFAULT_FAVICON_URL" }},
+	DESCOPE_PROJECT_ID: {{ placeholder "http.vars.DESCOPE_PROJECT_ID" }},
+	DESCOPE_FLOW_ID: {{ placeholder "http.vars.DESCOPE_FLOW_ID" }},
+	LOGGER: {{ placeholder "http.vars.LOGGER" }}
+};`
+		}
+
+		# Optional: Redirect root to /login
+		handle {
+			redir / /login permanent
+		}
+	}
+
+	*:{$METRICS_PORT:2000} {
+		log
+		metrics {$METRICS_PATH:/metrics}
+	}

Dockerfile

@@ -1,5 +1,12 @@
 # syntax=docker/dockerfile:1@sha256:93bfd3b68c109427185cd78b4779fc82b484b0b7618e36d0f104d4d801e66d25
 ARG NODE_VERSION=18
+ARG HTML_DIR=/usr/share/nginx/html
+ARG REACT_APP_DESCOPE_BASE_URL="https://api.descope.com"
+ARG REACT_APP_CONTENT_BASE_URL="https://static.descope.com/pages"
+ARG REACT_APP_USE_ORIGIN_BASE_URL="false"
+ARG REACT_APP_FAVICON_URL="https://imgs.descope.com/auth-hosting/favicon.svg"
+ARG DESCOPE_PROJECT_ID=""
+ARG DESCOPE_FLOW_ID=""
 
 ARG BUILDPLATFORM
 FROM --platform=${BUILDPLATFORM} node:${NODE_VERSION}-alpine as builder
@@ -10,37 +17,24 @@ COPY ["package.json", "yarn.lock*", "./"]
 
 RUN yarn install --production=false
 COPY . .
-ARG REACT_APP_DESCOPE_BASE_URL=""
-ARG REACT_APP_CONTENT_BASE_URL=""
-ARG REACT_APP_USE_ORIGIN_BASE_URL="true"
+
 RUN yarn build
 
-FROM nginx:alpine@sha256:814a8e88df978ade80e584cc5b333144b9372a8e3c98872d07137dbf3b44d0e4
+FROM ghcr.io/descope/caddy:v0.0.4
 
-RUN apk add openssl && \
-    openssl req -x509 -nodes -days 365 -subj "/C=CA/ST=QC/O=Company, Inc./CN=mydomain.com" -addext "subjectAltName=DNS:mydomain.com" -newkey rsa:2048 -keyout /etc/ssl/private/nginx-selfsigned.key -out /etc/ssl/certs/nginx-selfsigned.crt;
+ENV PORT=8080
+ENV WWW_ROOT=/www
+ENV XDG_DATA_HOME=/tmp
+ENV XDG_CONFIG_HOME=/tmp
+ENV XDG_CACHE_HOME=/tmp
 
-RUN cat > /etc/nginx/conf.d/default.conf <<EOF
-server {
-    listen       80;
-    listen       443 ssl http2 default_server;
-    ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;
-    ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;
-    server_name  localhost;
+WORKDIR ${WWW_ROOT}
 
-		rewrite ^/login/(.*)$ /$1 last;
+COPY --from=builder --chown=1000:1000 /app/build ${WWW_ROOT}
+COPY --from=builder --chown=1000:1000 /app/package.json ${WWW_ROOT}
 
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html;
-        try_files \$uri \$uri/ /index.html;  # this ensures react routing works
-    }
-}
-EOF
+ADD --chown=nonroot:nonroot Caddyfile /etc/caddy/Caddyfile
 
-EXPOSE 80 443
-WORKDIR /usr/share/nginx/html
-RUN rm -rf ./*
-COPY --from=builder /app/build ./
+RUN caddy validate --config /etc/caddy/Caddyfile
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+CMD ["run", "--config", "/etc/caddy/Caddyfile"]

README.md

@@ -6,9 +6,9 @@ This is a React web application that runs Descope's login flows according to the
 
 ### Deployment
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdescope%2Fauth-hosting&env=DESCOPE_PROJECT_ID&demo-title=Descope%20Hosted%20Auth%20Page&demo-description=https%3A%2F%2Fgithub.com%2Fdescope%2Fauth-hosting%2F%23readme&demo-url=https%3A%2F%2Fauth.descope.io%2F)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdescope%2Fauth-hosting&env=DESCOPE_PROJECT_ID&demo-title=Descope%20Hosted%20Auth%20Page&demo-description=https%3A%2F%2Fgithub.com%2Fdescope%2Fauth-hosting%2F%23readme&demo-url=https%3A%2F%2Fapi.descope.com%2Flogin)
 
-By default, the app is deployed to the Descope hosting page in [https://auth.descope.io](https://auth.descope.io).  
+By default, the app is deployed to the Descope hosting page in [https://api.descope.com/login](https://api.descope.com/login).  
 The main purpose is to allow easy integration for descopers implementing authentication with Descope (such as OIDC [use case](#open-id-connect-oidc-use-cases-in-descope)).
 
 In case you want to have your own hosted page (customize styling, your own domain, etc.), you can use this repository as a template, do the relevant modification and host it (using Vercel, etc.)
@@ -65,3 +65,38 @@ These are the different query parameters you can use:
 In case you don't want to provide the project ID as part of the URL, you can specify it as an environment variable `DESCOPE_PROJECT_ID`.  
 You can use `.env` file for that.  
 From the project root directory run: `cp .env.example .env`, and set your Descope Project and flow IDs.
+
+**Using docker**
+
+In case you want to use the docker version these are the steps:
+
+1. Build (Official hosted docker image is comming soon)
+
+```(bash)
+# Optional build-args: (ex - using custom API host or pinning the project id)
+docker build
+	--build-arg REACT_APP_DESCOPE_BASE_URL="https://api.descope.com"
+	--build-arg REACT_APP_CONTENT_BASE_URL="https://static.descope.com/pages"
+	--build-arg REACT_APP_USE_ORIGIN_BASE_URL="false"
+	--build-arg REACT_APP_FAVICON_URL="https://imgs.descope.com/auth-hosting/favicon.svg"
+	--build-arg DESCOPE_PROJECT_ID=""
+	--build-arg DESCOPE_FLOW_ID=""
+	--tag my-registry.com/descope/auth-hosting
+	--push
+	.
+```
+
+2. Run
+
+```(bash)
+docker run -p 8080:8080 auth-hosting
+# (optional) the build-args are available also during run-time as env vars:
+docker run -p 8080:8080
+	-e REACT_APP_DESCOPE_BASE_URL="https://api.descope.com"
+	-e REACT_APP_CONTENT_BASE_URL="https://static.descope.com/pages"
+	-e REACT_APP_USE_ORIGIN_BASE_URL="false"
+	-e REACT_APP_FAVICON_URL="https://imgs.descope.com/auth-hosting/favicon.svg"
+	-e DESCOPE_PROJECT_ID=""
+	-e DESCOPE_FLOW_ID=""
+	my-registry.com/descope/auth-hosting
+```

api/favicon.js

@@ -6,24 +6,71 @@ const gitSha =
 	process.env.GITHUB_SHA ??
 	process.env.GIT_SHA;
 
-module.exports = function override(config, env) {
-	// New config, e.g. config.plugins.push...
-	delete config.module.rules[1].oneOf[3].include;
-
-	// Add a hook to write the version file after build
-	config.plugins.push({
-		apply: (compiler) => {
-			compiler.hooks.afterEmit.tap('CreateVersionFile', (compilation) => {
-				const versionPath = path.join(compiler.options.output.path, 'version');
-
-				try {
-					fs.writeFileSync(versionPath, gitSha);
-				} catch (error) {
-					console.error('Error writing version file:', error);
-				}
-			});
-		}
-	});
-
-	return config;
+module.exports = {
+	// The Webpack config to use when compiling your react app for development or production.
+	webpack: function (config, env) {
+		// New config, e.g. config.plugins.push...
+		delete config.module.rules[1].oneOf[3].include;
+
+		// Add a hook to write the version file after build
+		config.plugins.push({
+			apply: (compiler) => {
+				compiler.hooks.afterEmit.tap('CreateVersionFile', (compilation) => {
+					const versionPath = path.join(
+						compiler.options.output.path,
+						'version'
+					);
+
+					try {
+						fs.writeFileSync(versionPath, gitSha ?? env);
+					} catch (error) {
+						console.error('Error writing version file:', error);
+					}
+				});
+
+				compiler.hooks.afterEmit.tap('GenerateEnvJS', (compilation) => {
+					const envPath = path.join(compiler.options.output.path, 'env.js');
+
+					try {
+						// Filter out any keys that start with 'npm_'
+						const filteredEnv = Object.fromEntries(
+							Object.entries(process.env).filter(
+								([key]) =>
+									key.startsWith('REACT_APP') ||
+									key.startsWith('NEXT_PUBLIC') ||
+									key.startsWith('PUBLIC_URL')
+							)
+						);
+
+						fs.writeFileSync(
+							envPath,
+							`window.env = ${JSON.stringify(filteredEnv)}`
+						);
+					} catch (error) {
+						console.error('Error writing env file:', error);
+					}
+				});
+			}
+		});
+		return config;
+	},
+	devServer: function (configFunction) {
+		return function (proxy, allowedHost) {
+			const config = configFunction(proxy, allowedHost);
+
+			// Configure dev server to serve env.js
+			config.devMiddleware = {
+				writeToDisk: true
+			};
+
+			// Add static serving configuration
+			config.static = {
+				directory: path.join(__dirname, 'build'),
+				publicPath: process.env.PUBLIC_URL ?? '/login',
+				watch: true
+			};
+
+			return config;
+		};
+	}
 };

config-overrides.js

@@ -8,6 +8,7 @@
 		<link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
+		<script src="%PUBLIC_URL%/env.js"></script>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>