VeronicaPopa / auth0-react-ul-spa-example

Sample app for using a SPA in Auth0's Universal Login

Auth0 Universal Login SPA Example

Overview

This is a simple example of using a SPA as a custom Login page in Auth0's Universal Login for sign in and sign up. This isn't an example of best practices.

The React app uses Auth0.js and is straitforward in it's use. The key parts, taken from the Custom Login Form template are:

• index.html sets the window.config object the app uses
• App.js sets up the params, based on window.config, which is passed into the auth0.WebAuth constructor

Build and Deploy

Since Universal Login will only be hosting the HTML, we need to host the static assets on a CDN, tell the build process to use the CDN's URL for these, deploy the static assets to the CDN, and finally deploy the HTML to Auth0.

Build

To have Create React App use CDN paths for assets set the PUBLIC_URL environment variable to your CDN directory where you intend to deploy the files before building. e.g.

PUBLIC_URL=https://cdn.example.com/login npm run build

The build directory will now contain the built app.

Deploy

First, you'll deploy the static assets in the build directory to your CDN using your normal build process. This example uses a GitHub Actions workflow to deploy them to S3.

Next, you'll deploy the HTML to Auth0 using the Auth0 Deploy CLI. This example uses a GitHub Actions workflow which runs the deploy-cli with a YAML config that only deploys the build/index.html page.