Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
;
};
export const sections = [{
id: "configure-auth0",
title: "Configure Auth0"
}, {
id: "install-the-auth0-react-sdk",
title: "Install the Auth0 React SDK"
}, {
id: "add-login-to-your-application",
title: "Add login to your application"
}, {
id: "add-logout-to-your-application",
title: "Add logout to your application"
}, {
id: "show-user-profile-information",
title: "Show User Profile Information"
}];
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to
integrate Auth0, add authentication, and display user profile information in any React application using the Auth0
React SDK. Test
To use this quickstart, you’ll need to:
* Sign up for a free Auth0 account or log in to Auth0.
* Have a working React project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
Visit the [React Authentication By Example](https://developer.auth0.com/resources/guides/spa/react/basic-authentication) guide for a deep dive into
implementing user authentication in React. This guide provides additional details on how to create a
sign-up button, add route guards using React Router, and call a protected API from React.
To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is
where you will configure how you want authentication to work for the project you are developing.
### Configure an application
Use the interactive selector to create a new Auth0 application or select an existing application that represents
the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID
that your application code will use to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart will automatically update for your Application in the [Dashboard](https://manage.auth0.com/#/), which is where you
can manage your Applications in the future.
If you would rather explore a complete configuration, you can view a sample application instead.
### Configure Callback URLs
A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have
authenticated. If not set, users will not be returned to your application after they log in.
If you are following along with our sample project, set this to `http://localhost:3000`.
### Configure Logout URLs
A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged
out. If not set, users will not be able to log out from your application and will receive an error.
If you are following along with our sample project, set this to `http://localhost:3000`.
### Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must
contain the URL of your project. If not properly set, your project will be unable to silently refresh
authentication tokens, so your users will be logged out the next time they visit your application or refresh a
page.
If you are following along with our sample project, set this to `http://localhost:3000`.
Auth0 provides a [React
SDK](https://github.com/auth0/auth0-react) (auth0-react.js) to simplify the process of implementing Auth0 authentication and authorization in React
apps.
Install the Auth0 React SDK by running the following commands in your terminal:
```bash theme={null}
cd
npm install @auth0/auth0-react
```
### Configure the Auth0Provider component
For the SDK to function properly, you must set the following properties in the Auth0Provider component:
* `domain`: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard
under your Application's Settings in the Domain field. If you are using a [custom domain](/docs/custom-domains), you should set this to the
value of your custom domain instead.
* `clientId`: The ID of the Auth0 Application you set up earlier in this quickstart. You can find
this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
* `authorizationParams.redirect_uri`: The URL in your application that you would like Auth0 to
redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in
this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the
Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will
see an error.
##### Checkpoint
Your Auth0Provider component should now be properly configured. Run your application to verify that:
* The SDK is initializing correctly.
* Your application is not throwing any errors related to Auth0.
Now that you have configured your Auth0 Application and the Auth0 React SDK, you need to set up login for your
project. To do this, you will use the SDK’s loginWithRedirect() method to create a login button that redirects
users to the Auth0 Universal Login page. After a user successfully authenticates, they will be redirected to the
callback URL you set up earlier in this quickstart.
This guide focuses on using the `useAuth0()` custom React Hook. If you are using class
components, check out [these samples using thewithAuth0()higher-order component](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#use-with-a-class-component).
Create a new file in your application called `login.js` for the login button component, and copy in
the code from the interactive panel to the right, which contains the logic needed for login. Then, update your
`index.js` file to include the new login button.
##### Checkpoint
You should now be able to log in or sign up using a username and password.
Click the login button and verify that:
* Your React Application redirects you to the Auth0 Universal Login page.
* You can log in or sign up.
* Auth0 redirects you to your application using the value of the
`authorizationParams.redirect_uri`you used to configure the `Auth0Provider.`
Users who log in to your project will also need a way to log out. Create a logout button using the SDK’s logout()
method. When users log out, they will be redirected to your [Auth0 logout](/docs/api/authentication?javascript#logout) endpoint,
which will then immediately redirect them to the logout URL you set up earlier in this quickstart.
Create a new file in your application called `logout.js` for the logout button component, and copy in
the code from the interactive panel, which contains the logic needed for logout. Then, update your
`index.js` file to include the logout button.
##### Checkpoint
Run your application and click the logout button, verify that:
* Your React application redirects you to the address you specified as one of the Allowed Logout URLs
in your Application Settings.
* You are no longer logged in to your application.
Now that your users can log in and log out, you will likely want to be able to retrieve the [profile information](/docs/users/concepts/overview-user-profile)
associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or
profile picture in your project.
The Auth0 React SDK provides user information through the `user` property. Review the
`profile.js` code in the interactive panel to see an example of how to use it.
Because the `user` property contains sensitive information related to the user's identity, its
availability depends on the user's authentication status. To prevent render errors, you should always:
* Use the `isAuthenticated`property to determine whether Auth0 has authenticated the user before
React renders any component that consumes the `user`property.
* Ensure that the SDK has finished loading by checking that `isLoading`is false before accessing
the `isAuthenticated`property.
##### Checkpoint
Verify that:
* You can display the `user.name`or any other user property within a component correctly
after you have logged in.
## Next Steps
Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.
This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:
* [Auth0 Dashboard](https://manage.auth0.com/dashboard/us/dev-s3674bdouue0bd73) - Learn how to configure and manage your Auth0 tenant and applications
* [auth0-flutter SDK](https://www.github.com/auth0/auth0-flutter/) - Explore the SDK used in this tutorial more fully
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Discover integrations you can enable to extend Auth0’s functionality
```js index.js lines theme={null}
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
,
);
```
```js login.js lines theme={null}
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return ;
};
export default LoginButton;
```
```js logout.js lines theme={null}
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
const LogoutButton = () => {
const { logout } = useAuth0();
return (
);
};
export default LogoutButton;
```
```js profile.js lines theme={null}
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
const Profile = () => {
const { user, isAuthenticated, isLoading } = useAuth0();
if (isLoading) {
return
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
