Auth0 React App with Token Renewal

React Application created by create-react-app (Typescript) which includes Auth0

This sample demonstrates how to renew access_tokens in a React application with Auth0 using checkSession. For more information, read reference documentation. The sample uses the create-react-app.

Getting Started

Create a new API in the APIs section and provide an identifier for it.

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.

npm install -g create-react-app
cd react-auth0-typescript
npm install

Set the Client ID, Domain, and API URL

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.tsx.example file to auth0-variables.tsx and provide the client ID and domain there. This file is located in src/Auth/.

Set Up `Allowed Web Origins` in the dashboard

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.

Run the Application

The development server that comes with create-react-app can be used to serve the application.

npm start

The application will be served at http://localhost:3000.

Troubleshooting

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.

Run the Application With Docker

In order to run the example with docker you need to have docker installed.

You also need to set the environment variables as explained previously.

Execute in command line sh exec.sh to run the Docker in Linux, or .\exec.ps1 to run the Docker in Windows.

What is Auth0?

Auth0 helps you to:

Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
Add authentication through more traditional username/password databases.
Add support for linking different user accounts with the same user.
Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
Analytics of how, when and where users are logging in.
Pull data from other sources and add it to the user profile, through JavaScript rules.