[SDK-1192] Remove proxy, separate app and api servers (#186)

* Remove proxy, separate app and api servers

* expose api port for windows

* Make app and api base uris configurable

* yarn upgrade

* Update 02-Calling-an-API/README.md

Co-Authored-By: Steve Hobbs <[email protected]>

* Whitespace change to trigger rebuild

Co-authored-by: Steve Hobbs <[email protected]>

Author: adamjmcgrath

01-Login/server.js

@@ -9,8 +9,4 @@ const port = process.env.SERVER_PORT || 3000;
 app.use(morgan("dev"));
 app.use(express.static(join(__dirname, "build")));
 
-app.use((_, res) => {
-  res.sendFile(join(__dirname, "build", "index.html"));
-});
-
 app.listen(port, () => console.log(`Listening on port ${port}`));

01-Login/yarn.lock

@@ -32,9 +32,13 @@ RUN yarn install --production
 COPY --from=build /app/build ./build
 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 .
 
 EXPOSE 3000
+EXPOSE 3001
+
 ENV SERVER_PORT=3000
+ENV API_PORT=3001
 ENV NODE_ENV production
 
-CMD ["node", "server.js"]
+CMD ["yarn", "prod"]

02-Calling-an-API/Dockerfile

@@ -18,19 +18,21 @@ yarn install
 
 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:
+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:
 
 ```json
 {
   "domain": "{YOUR AUTH0 DOMAIN}",
   "clientId": "{YOUR AUTH0 CLIENT ID}",
-  "audience": "{YOUR AUTH0 API_IDENTIFIER}"
+  "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)}"
 }
 ```
 
 ### Compiles and hot-reloads for development
 
-This compiles and serves the React app, and starts the backend API server on port 3001. Calls to `http://localhost:3000/api/*` routes will be proxied through to the backend:
+This compiles and serves the React app and starts the backend API server on port 3001. 
 
 ```bash
 npm run dev

02-Calling-an-API/README.md

@@ -0,0 +1,44 @@
+const express = require("express");
+const cors = require("cors");
+const morgan = require("morgan");
+const helmet = require("helmet");
+const jwt = require("express-jwt");
+const jwksRsa = require("jwks-rsa");
+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}`;
+
+if (!authConfig.domain || !authConfig.audience) {
+  throw new Error(
+    "Please make sure that auth_config.json is in place and populated"
+  );
+}
+
+app.use(morgan("dev"));
+app.use(helmet());
+app.use(cors({ origin: appOrigin }));
+
+const checkJwt = jwt({
+  secret: jwksRsa.expressJwtSecret({
+    cache: true,
+    rateLimit: true,
+    jwksRequestsPerMinute: 5,
+    jwksUri: `https://${authConfig.domain}/.well-known/jwks.json`
+  }),
+
+  audience: authConfig.audience,
+  issuer: `https://${authConfig.domain}/`,
+  algorithm: ["RS256"]
+});
+
+app.get("/api/external", checkJwt, (req, res) => {
+  res.send({
+    msg: "Your access token was successfully validated!"
+  });
+});
+
+app.listen(port, () => console.log(`API Server listening on port ${port}`));

02-Calling-an-API/api-server.js

@@ -1,2 +1,2 @@
 docker build --rm -t auth0-react-02-calling-an-api .
-docker run --init -p 3000:3000 -it auth0-react-02-calling-an-api
+docker run --init -p 3000:3000 -p 3001:3001 -it auth0-react-02-calling-an-api

02-Calling-an-API/exec.ps1

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 docker build -t auth0-react-02-calling-an-api .
-docker run --init -p 3000:3000 -it auth0-react-02-calling-an-api
+docker run --init -p 3000:3000 -p 3001:3001 -it auth0-react-02-calling-an-api

02-Calling-an-API/exec.sh

@@ -3,20 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "npm-run-all --parallel spa server",
+    "start": "npm-run-all --parallel spa api-server",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "spa": "react-scripts start",
     "server": "node server.js",
     "server:dev": "nodemon server.js",
-    "dev": "npm-run-all --parallel spa server:dev"
+    "api-server": "node api-server.js",
+    "api-server:dev": "nodemon api-server.js",
+    "dev": "npm-run-all --parallel spa api-server:dev",
+    "prod": "npm-run-all --parallel server api-server"
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "^1.0.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "cors": "^2.8.5",
     "express": "^4.16.4",
     "express-jwt": "^5.3.1",
     "helmet": "^3.18.0",
@@ -47,6 +51,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "proxy": "http://localhost:3001"
+  }
 }

02-Calling-an-API/package.json

@@ -1,46 +1,14 @@
 const express = require("express");
 const morgan = require("morgan");
 const helmet = require("helmet");
-const jwt = require("express-jwt");
-const jwksRsa = require("jwks-rsa");
 const { join } = require("path");
-const authConfig = require("./src/auth_config.json");
 
 const app = express();
 
-const port = process.env.SERVER_PORT || 3001;
-
-if (!authConfig.domain || !authConfig.audience) {
-  throw new Error(
-    "Please make sure that auth_config.json is in place and populated"
-  );
-}
+const port = process.env.SERVER_PORT || 3000;
 
 app.use(morgan("dev"));
 app.use(helmet());
 app.use(express.static(join(__dirname, "build")));
 
-const checkJwt = jwt({
-  secret: jwksRsa.expressJwtSecret({
-    cache: true,
-    rateLimit: true,
-    jwksRequestsPerMinute: 5,
-    jwksUri: `https://${authConfig.domain}/.well-known/jwks.json`
-  }),
-
-  audience: authConfig.audience,
-  issuer: `https://${authConfig.domain}/`,
-  algorithm: ["RS256"]
-});
-
-app.get("/api/external", checkJwt, (req, res) => {
-  res.send({
-    msg: "Your access token was successfully validated!"
-  });
-});
-
-app.use((_, res) => {
-  res.sendFile(join(__dirname, "build", "index.html"));
-});
-
 app.listen(port, () => console.log(`Server listening on port ${port}`));

02-Calling-an-API/server.js

@@ -2,6 +2,9 @@ import React, { useState } from "react";
 import { Button } from "reactstrap";
 import Highlight from "../components/Highlight";
 import { useAuth0 } from "../react-auth0-spa";
+import config from "../auth_config.json";
+
+const { apiOrigin = "http://localhost:3001" } = config;
 
 const ExternalApi = () => {
   const [showResult, setShowResult] = useState(false);
@@ -12,7 +15,7 @@ const ExternalApi = () => {
     try {
       const token = await getTokenSilently();
 
-      const response = await fetch("/api/external", {
+      const response = await fetch(`${apiOrigin}/api/external`, {
         headers: {
           Authorization: `Bearer ${token}`
         }