React Getting Started

This quickstart guide contains individual steps which demonstrate how to use various Auth0 features in your React applications. Each step has a dedicated sample project which can be downloaded directly from the doc or forked on Github. If you are logged in to your Auth0 account, the samples will have your Auth0 credentials pre-populated for you.

Using create-react-app?

Auth0 has its own fork of react-scripts which means you can install an Auth0-powered React app with a single command:

create-react-app my-app --scripts-version auth0-react-scripts

The auth0-react-scripts app demonstrates login, session handling, and user profiles.

Application Keys

When you signed up for Auth0, you were invited to create a new client.

There are some details about this client that your application needs to know about to properly communicate with Auth0. These include your Client ID, Domain, and Client Secret. You can retrieve these values from the settings area for your client in the Auth0 dashboard.

Please note that if you download the samples available for this tutorial, these keys will be pre-populated for you. If you have created more than one client in your account, the sample will come with the values for your Default App.

App Dashboard

About the Sample Applications

The code snippets within this quickstart guide are based off of the downloadable samples. Within each of these samples, you will find a very simple React application which utilizes a few views and containers. The samples use react-router (with browserHistory) and react-bootstrap.

It should be noted that a simplistic React application is used in the samples and snippets intentionally. The focus of this quickstart guide is on how to use Auth0 in a React application in general rather than on how to approach various architectural scenarios. However, Auth0 works well in any React setup and can be integrated with Flux, Redux, and other flavors that you may be interested in.

Auth0 Dependencies

The only Auth0-related dependency that is required to get started is the Lock widget. The widget can be retrieved either from npm or from Auth0's CDN.

npm

npm install auth0-lock

CDN

<script src="https://cdn.auth0.com/js/lock/10.6/lock.min.js"></script>

Note: The samples utilize the auth0-lock package from npm rather than referencing the CDN link.

Next Tutorial
2. Login
Use Auth0 for FREECreate free Account