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.
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
auth0-react-scripts app demonstrates login, session handling, and user profiles.
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.
About the Sample Applications
The code snippets within this quickstart guide are based on 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.
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 install auth0-lock
Note: The samples utilize the auth0-lock package from npm rather than referencing the CDN link.