You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 01-Login/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ This sample demonstrates how to add authentication to a React application with A
4
4
5
5
## Getting Started
6
6
7
-
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. The default URL is `http://localhost:3000/callback`.
7
+
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. The default URL is `http://localhost:3000/callback`. Also configure **Allowed Web Origins** to the default application URL `http://localhost:3000`.
8
8
9
9
Clone the repo or download it from the React quickstart page in Auth0's documentation.
Copy file name to clipboardExpand all lines: 02-User-Profile/README.md
+12-8Lines changed: 12 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,28 +1,32 @@
1
1
# Auth0 React User Profile
2
2
3
-
This sample demonstrates how to get a user's profile using Auth0 in a React application. The sample uses create-react-app.
3
+
This sample demonstrates how to get a user's profile using Auth0 in a React application.
4
4
5
5
## Getting Started
6
6
7
-
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. If you are using the server provided by the create-react-app, that URL is `http://localhost:3000/callback`.
7
+
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. The default URL is `http://localhost:3000/callback`. Also configure **Allowed Web Origins** to the default application URL `http://localhost:3000`.
8
8
9
-
Clone the repo or download it from the React quickstart page in Auth0's documentation. Install create-react-app globally and the dependencies for the app.
9
+
Clone the repo or download it from the React quickstart page in Auth0's documentation.
10
+
11
+
Open the first demo.
10
12
11
13
```bash
12
-
npm install -g create-react-app
13
-
cd 02-User-Profile
14
-
npm install
14
+
cd 01-Login
15
15
```
16
16
17
-
> **Note:** If you are not using create-react-app but are using Babel, you need to add the `stage-0` preset.
17
+
Install the dependencies for the app.
18
+
19
+
```
20
+
npm install
21
+
```
18
22
19
23
## Set the Client ID and Domain
20
24
21
25
If you download the sample from the quickstart page, it will come pre-populated with the **client ID** and **domain** for your application. If you clone the repo directly from Github, rename the `auth0-variables.js.example` file to `auth0-variables.js` and provide the **client ID** and **domain** there. This file is located in `src/Auth/`.
22
26
23
27
## Run the Application
24
28
25
-
The development server that comes with create-react-app can be used to serve the application.
29
+
The demo comes ready to serve locally using react-scripts.
Copy file name to clipboardExpand all lines: 03-Calling-an-API/README.md
+13-9Lines changed: 13 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,26 @@
1
1
# Auth0 React Calling an API
2
2
3
-
This sample demonstrates how to make secure calls to an API after authenticating a user with Auth0. The calls to the API are made with the user's `access_token`. The sample makes use of Auth0's hosted login page which provides centralized authentication. The sample uses create-react-app.
3
+
This sample demonstrates how to make secure calls to an API after authenticating a user with Auth0. The calls to the API are made with the user's `access_token`. The sample makes use of Auth0's hosted login page which provides centralized authentication.
4
4
5
5
There is a [short screencast](https://www.youtube.com/watch?v=ti2zMJm34Cw) available.
6
6
7
7
## Getting Started
8
8
9
-
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. If you are using the server provided by the create-react-app, that URL is `http://localhost:3000/callback`.
9
+
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. The default URL is `http://localhost:3000/callback`. Also configure **Allowed Web Origins** to the default application URL `http://localhost:3000`.
10
10
11
-
Clone the repo or download it from the React quickstart page in Auth0's documentation. Install create-react-app globally and the dependencies for the app.
11
+
Clone the repo or download it from the React quickstart page in Auth0's documentation.
12
+
13
+
Open the first demo.
12
14
13
15
```bash
14
-
npm install -g create-react-app
15
-
cd 03-Calling-an-API
16
-
npm install
16
+
cd 01-Login
17
17
```
18
18
19
-
> **Note:** If you are not using create-react-app but are using Babel, you need to add the `stage-0` preset.
19
+
Install the dependencies for the app.
20
+
21
+
```
22
+
npm install
23
+
```
20
24
21
25
## Set up a new API
22
26
@@ -35,7 +39,7 @@ You will also need to add in a new scope. `Scopes allow you to define the data t
35
39
* In the name textbox, enter in `read:messages`.
36
40
* Add a description for this scope ex: `permission to read messages` and click the 'add' button.
37
41
38
-
## Set the Client IDand Domain
42
+
## Set the Client ID, Domain, and API identifier
39
43
40
44
If you download the sample from the quickstart page, it will come pre-populated with the **client ID** and **domain** for your application. If you clone the repo directly from Github, rename the `auth0-variables.js.example` file to `auth0-variables.js` and provide the **client ID** and **domain** there. This file is located in `src/Auth/`.
41
45
@@ -49,7 +53,7 @@ This file has two values, `AUTH0_AUDIENCE` and `AUTH0_DOMAIN`. If you download t
49
53
50
54
## Run the Application
51
55
52
-
The development server that comes with create-react-app can be used to serve the application.
56
+
The demo comes ready to serve locally using react-scripts.
Copy file name to clipboardExpand all lines: 04-Authorization/README.md
+29-8Lines changed: 29 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,43 @@
1
1
# Auth0 React Authorization
2
2
3
-
This sample demonstrates how to include user authorization in a React application with Auth0. The sample uses create-react-app.
3
+
This sample demonstrates how to include user authorization in a React application with Auth0.
4
4
5
5
## Getting Started
6
6
7
-
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. If you are using the server provided by the create-react-app, that URL is `http://localhost:3000/callback`.
7
+
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. The default URL is `http://localhost:3000/callback`. Also configure **Allowed Web Origins** to the default application URL `http://localhost:3000`.
8
8
9
-
Clone the repo or download it from the React quickstart page in Auth0's documentation. Install create-react-app globally and the dependencies for the app.
9
+
Clone the repo or download it from the React quickstart page in Auth0's documentation.
10
+
11
+
Open the first demo.
10
12
11
13
```bash
12
-
npm install -g create-react-app
13
-
cd 04-Authorization
14
+
cd 01-Login
15
+
```
16
+
17
+
Install the dependencies for the app.
18
+
19
+
```
14
20
npm install
15
21
```
16
22
17
-
> **Note:** If you are not using create-react-app but are using Babel, you need to add the `stage-0` preset.
23
+
## Set up a new API
24
+
25
+
More complete documentation is available at [React Calling an API](https://auth0.com/docs/quickstart/spa/react/03-calling-an-api).
26
+
27
+
From the Auth0 dashboard, select the APIs section and select "Create API":
28
+
29
+
* Add a name for the API. `A friendly name for the API.`
30
+
* Select an identifier for the endpoint. `A logical identifier for this API. We recommend using a URL but note that this doesn’t have to be a publicly available URL, Auth0 will not call your API at all. Important! This field cannot be modified.`
31
+
32
+
For purposes of this demo, you may want to consider using http://localhost:3001 as your identifier.
33
+
34
+
You will also need to add in a new scope. `Scopes allow you to define the data that will be accessed through the applications to your API. Set a name for them and its description for better understanding.`
35
+
36
+
* Select the Scopes tab from the API section.
37
+
* In the name textbox, enter in `read:messages`.
38
+
* Add a description for this scope ex: `permission to read messages` and click the 'add' button.
18
39
19
-
## Set the Client IDand Domain
40
+
## Set the Client ID, Domain, and API identifier
20
41
21
42
If you download the sample from the quickstart page, it will come pre-populated with the **client ID** and **domain** for your application. If you clone the repo directly from Github, rename the `auth0-variables.js.example` file to `auth0-variables.js` and provide the **client ID** and **domain** there. This file is located in `src/Auth/`.
22
43
@@ -30,7 +51,7 @@ This file has two values, `AUTH0_AUDIENCE` and `AUTH0_DOMAIN`. If you download t
30
51
31
52
## Run the Application
32
53
33
-
The development server that comes with create-react-app can be used to serve the application.
54
+
The demo comes ready to serve locally using react-scripts.
Copy file name to clipboardExpand all lines: 05-Token-Renewal/README.md
+13-15Lines changed: 13 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,41 +1,39 @@
1
1
# Auth0 React Token Renewal
2
2
3
-
This sample demonstrates how to renew `access_token`s in a React application with Auth0 using `checkSession`. For more information, read [our reference documentation](https://auth0.com/docs/libraries/auth0js#using-checksession-to-acquire-new-tokens). The sample uses the create-react-app.
3
+
This sample demonstrates how to renew `access_token`s in a React application with Auth0 using `checkSession`. For more information, read [our reference documentation](https://auth0.com/docs/libraries/auth0js#using-checksession-to-acquire-new-tokens).
4
4
5
5
## Getting Started
6
6
7
-
Create a new API in the [APIs section](https://manage.auth0.com/#/apis)and provide an identifier for it.
7
+
If you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain**and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. The default URL is `http://localhost:3000/callback`. Also configure **Allowed Web Origins** to the default application URL `http://localhost:3000`.
8
8
9
-
Clone the repo or download it from the React quickstart page in Auth0's documentation. Install create-react-app and the dependencies for the app.
9
+
Clone the repo or download it from the React quickstart page in Auth0's documentation.
10
+
11
+
Open the first demo.
10
12
11
13
```bash
12
-
npm install -g create-react-app
13
-
cd 05-Token-Renewal
14
-
npm install
14
+
cd 01-Login
15
15
```
16
16
17
-
## Set the Client ID, Domain, and API URL
17
+
Install the dependencies for the app.
18
18
19
-
If you download the sample from the quickstart page, it will come pre-populated with the **client ID** and **domain** for your application. If you clone the repo directly from Github, rename the `auth0-variables.js.example` file to `auth0-variables.js` and provide the **client ID** and **domain** there. This file is located in `src/Auth/`.
19
+
```
20
+
npm install
21
+
```
20
22
21
-
## Set Up `Allowed Web Origins` in the dashboard
23
+
## Set the Client ID and Domain
22
24
23
-
In order to make `checkSession` work, you need to add the URL where the authorization request originates from, to the Allowed Web Origins list of your Auth0 client in the Dashboard under your client's Settings.
25
+
If you download the sample from the quickstart page, it will come pre-populated with the **client ID** and **domain** for your application. If you clone the repo directly from Github, rename the `auth0-variables.js.example` file to `auth0-variables.js` and provide the **client ID** and **domain** there. This file is located in `src/Auth/`.
24
26
25
27
## Run the Application
26
28
27
-
The development server that comes with create-react-app can be used to serve the application.
29
+
The demo comes ready to serve locally using react-scripts.
28
30
29
31
```bash
30
32
npm start
31
33
```
32
34
33
35
The application will be served at `http://localhost:3000`.
34
36
35
-
## Troubleshooting
36
-
37
-
If you see an error on renewal saying `login_required`, that means you may be using the Auth0 dev keys for whichever social login you're testing. You'll need to add your own keys for this to work.
38
-
39
37
## Run the Application With Docker
40
38
41
39
In order to run the example with docker you need to have `docker` installed.
0 commit comments