Skip to content

Commit 94f9710

Browse files
author
Dan
committed
Update README.md
1 parent 719020e commit 94f9710

File tree

1 file changed

+151
-0
lines changed

1 file changed

+151
-0
lines changed

README.md

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,66 @@ Install the client project dependencies:
1010
npm install
1111
```
1212

13+
## Set Up Authentication with Auth0
14+
15+
If you haven't already, <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">**sign up for a free Auth0 account**</a>.
16+
17+
Once you sign in, Auth0 takes you to the [Dashboard](https://manage.auth0.com/). In the left sidebar menu, click on ["Applications"](https://manage.auth0.com/#/applications).
18+
19+
Then, click the "Create Application" button. A modal opens up with a form to provide a name for the application and choose its type.
20+
21+
- **Name:** Auth0 React Sample
22+
23+
- **Application Type:** Single Page Web Applications
24+
25+
Click the "Create" button to complete the process. Your Auth0 application page loads up.
26+
27+
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 your **Auth0 Application Settings** the URLs to which Auth0 can redirect users once it authenticates them.
28+
29+
As such, click on the "Settings" tab of your Auth0 Application page and fill in the following values:
30+
31+
32+
**Allowed Callback URLs**
33+
34+
```bash
35+
http://localhost:4040
36+
```
37+
38+
**Allowed Logout URLs**
39+
40+
```bash
41+
http://localhost:4040
42+
```
43+
44+
**Allowed Web Origins**
45+
46+
```bash
47+
http://localhost:4040
48+
```
49+
50+
**Scroll down and click the "Save Changes" button.**
51+
52+
Open the React starter project, `auth0-react-sample`, and create a `.env` file under the project directory:
53+
54+
```bash
55+
touch .env
56+
```
57+
58+
Populate `.env` as follows:
59+
60+
```bash
61+
REACT_APP_AUTH0_DOMAIN=
62+
REACT_APP_AUTH0_CLIENT_ID=
63+
REACT_APP_AUTH0_AUDIENCE=https://express.sample
64+
REACT_APP_SERVER_URL=http://localhost:6060
65+
```
66+
67+
The value of `REACT_APP_AUTH0_DOMAIN` is the "Domain" value from the "Settings".
68+
69+
The value of `REACT_APP_AUTH0_CLIENT_ID` is the "Client ID" value from the "Settings".
70+
71+
## Run the Project
72+
1373
Run the client project:
1474

1575
```bash
@@ -19,3 +79,94 @@ npm start
1979
The application runs by on port `4040` to mitigate conflicting with other client applications you may be running.
2080

2181
Visit [`http://localhost:4040/`](http://localhost:4040/) to access the starter application.
82+
83+
## Set up the Demo API
84+
85+
### Get the Express API demo
86+
87+
Clone the `auth0-express-js-sample` repo:
88+
89+
```bash
90+
git clone [email protected]:auth0-blog/auth0-express-js-sample.git
91+
```
92+
93+
Make the `auth0-express-js-sample` directory your current directory:
94+
95+
```bash
96+
cd auth0-express-js-sample
97+
```
98+
99+
Install the Node.js project dependencies:
100+
101+
```bash
102+
npm install
103+
```
104+
105+
### Connect the Express API with Auth0
106+
107+
Head to the [APIs section in the Auth0 Dashboard](https://manage.auth0.com/#/apis), and click the "Create API" button.
108+
109+
Then, in the form that Auth0 shows:
110+
111+
- Add a **Name** to your API:
112+
113+
```bash
114+
Auth0 Express Sample
115+
```
116+
117+
- Set its **Identifier** value:
118+
119+
```bash
120+
https://express.sample
121+
```
122+
123+
- Leave the signing algorithm as `RS256` as it's the best option from a security standpoint.
124+
125+
With these values in place, hit the "Create" button.
126+
127+
Now, click on the "Quick Start" tab of your Auth0 API page. This page presents instructions on how to set up different APIs. From the code box, choose "Node.js". Keep this page open as you'll be using the values next.
128+
129+
Create a `.env` file for the API Server under the `auth0-express-sample` directory:
130+
131+
```bash
132+
touch .env
133+
```
134+
135+
Populate this `auth0-express-sample/.env` file as follows:
136+
137+
```bash
138+
SERVER_PORT=6060
139+
CLIENT_ORIGIN_URL=http://localhost:4040
140+
AUTH0_AUDIENCE=
141+
AUTH0_ISSUER_URL=
142+
```
143+
144+
Head back to the "Node.js" code snippet from the Auth0 API "Quick Start" page. Locate the definition of `jwtCheck`:
145+
146+
```javascript
147+
var jwtCheck = jwt({
148+
secret: jwks.expressJwtSecret({
149+
cache: true,
150+
rateLimit: true,
151+
jwksRequestsPerMinute: 5,
152+
jwksUri: "https://<TENANT-NAME>.auth0.com/.well-known/jwks.json",
153+
}),
154+
audience: "https://express.sample", // 👈 AUTH0_AUDIENCE value
155+
issuer: "https://<TENANT-NAME>.auth0.com/", // 👈 AUTH0_ISSUER_URL value
156+
algorithms: ["RS256"],
157+
});
158+
```
159+
160+
Look at the object that the `jwt` function takes as an argument and use the following properties to complete the values of your `.env` file:
161+
162+
The `audience` property is the value of `AUTH0_AUDIENCE`.
163+
164+
The `issuer` property is the value of `AUTH0_ISSUER_URL`.
165+
166+
> Do not include the quotes, only the string value.
167+
168+
With the `.env` configuration values set, run the API server by issuing the following command:
169+
170+
```bash
171+
npm start
172+
```

0 commit comments

Comments
 (0)