Repository files navigation

This repository hosts a React project that defines a Single-Page Application (SPA). You'll secure access to some of its routes using Auth0 User Authentication.

Install the client project dependencies:

npm install

If you haven't already,sign up for a free Auth0 account.

Once you sign in, Auth0 takes you to theDashboard. In the left sidebar menu, click on"Applications".

Then, click the "Create Application" button. A modal opens up with a form to provide a name for the application and choose its type.

• Name: Auth0 React Sample

• Application Type: Single Page Web Applications

Click the "Create" button to complete the process. Your Auth0 application page loads up.

Your React application will redirect users to Auth0 whenever they trigger an authentication request. Auth0 will present them with a login page. Once they log in, Auth0 will redirect them back to your React application. For that redirecting to happen securely, you must specify in yourAuth0 Application Settings the URLs to which Auth0 can redirect users once it authenticates them.

As such, click on the "Settings" tab of your Auth0 Application page and fill in the following values:

Allowed Callback URLs

http://localhost:4040

Allowed Logout URLs

http://localhost:4040

Allowed Web Origins

http://localhost:4040

Scroll down and click the "Save Changes" button.

Open the React starter project,auth0-react-sample, and create a.env file under the project directory:

touch .env

Populate.env as follows:

REACT_APP_AUTH0_DOMAIN=REACT_APP_AUTH0_CLIENT_ID=REACT_APP_AUTH0_AUDIENCE=https://express.sampleREACT_APP_SERVER_URL=http://localhost:6060

The value ofREACT_APP_AUTH0_DOMAIN is the "Domain" value from the "Settings".

The value ofREACT_APP_AUTH0_CLIENT_ID is the "Client ID" value from the "Settings".

Run the client project:

npm start

The application runs by on port4040 to mitigate conflicting with other client applications you may be running.

Visithttp://localhost:4040/ to access the starter application.

You can set up this Express demo server to test making secure API calls from your React application.

Clone theauth0-express-js-sample repo:

git clone git@github.com:auth0-blog/auth0-express-js-sample.git

Make theauth0-express-js-sample directory your current directory:

cd auth0-express-js-sample

Install the Node.js project dependencies:

npm install

Head to theAPIs section in the Auth0 Dashboard, and click the "Create API" button.

Then, in the form that Auth0 shows:

• Add aName to your API:

Auth0 Express Sample

• Set itsIdentifier value:

https://express.sample

• Leave the signing algorithm asRS256 as it's the best option from a security standpoint.

With these values in place, hit the "Create" button.

Keep this page open as you'll be using the values next.

Create a.env file for the API Server under theauth0-express-js-sample directory:

touch .env

Populate thisauth0-express-js-sample/.env file as follows:

SERVER_PORT=6060CLIENT_ORIGIN_URL=http://localhost:4040AUTH0_AUDIENCE=AUTH0_DOMAIN=

Head back to your Auth0 API page, andfollow these steps to get the Auth0 Audience:

1. Click on the"Settings" tab.

2. Locate the"Identifier" field and copy its value.

3. Paste the "Identifier" value as the value ofAUTH0_AUDIENCE in.env.

Now,follow these steps to get the Auth0 Domain value:

1. Click on the"Test" tab.
2. Locate the section called"Asking Auth0 for tokens from my application".
3. Click on thecURL tab to show a mockPOST request.
4. Copy your Auth0 domain, which ispart of the--url parameter value:tenant-name.region.auth0.com.
5. Paste the Auth0 domain value as the value ofAUTH0_DOMAIN in.env.

Tips to get the Auth0 Domain

• The Auth0 Domain is the substring between the protocol,https:// and the path/oauth/token.
• The Auth0 Domain follows this pattern:tenant-name.region.auth0.com.
• Theregion subdomain (au,us, oreu) is optional. Some Auth0 Domains don't have it.

With the.env configuration values set, run the API server by issuing the following command:

npm start