Integrating Auth0 with React

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. In this guide, we'll walk through how to integrate Auth0 with a React application.

The challenge you will work through has very detailed instructions, but here is quick summary of the steps you'll be taking.

Setting Up Auth0

Follow the instructions in the challenge to correctly set-up your AuthO account.

Configuring an Auth0Provider

In your React application, you need to wrap your root component with Auth0Provider to provide the Auth0 context to your app. Replace YOUR_DOMAIN and YOUR_CLIENT_ID with the values from your Auth0 application settings.

The below is a simplified example. The exercise you will complete also contains a QueryClientProvider and a RouterProvider.

// client.index.tsx
import { createRoot } from 'react-dom/client'
import { Auth0Provider } from '@auth0/auth0-react'
import App from './App'

const root = createRoot(document.getElementById('app') as HTMLElement)
root.render(  
  <Auth0Provider
    domain="YOUR_DOMAIN"
    clientId="YOUR_CLIENT_ID"
    redirectUri={window.location.origin}
    audience=""
  >
    <App />
  </Auth0Provider>
)

Creating Authentication Buttons

Create components for login and logout by using the useAuth0 hook provided by the Auth0 React SDK. In this example, we're creating a new component called LoginButton that uses the useAuth0 hook to access the loginWithRedirect function provided by the Auth0Provider. When the user clicks the button, it will trigger the function and redirect the user to the Auth0 login page where they can choose from creating a unique password with Auth0 or using Google for authentication. Once the user has authenticated themselves, they will be returned to our application.

// src/components/LoginButton.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button onClick={() => loginWithRedirect()}>Log In</button>;
}

export default LoginButton;

And here's a component that will render a logout button using the Auth0 logout function.

// src/components/LogoutButton.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const LogoutButton = () => {
  const { logout } = useAuth0();

  return (
    <button onClick={() => logout({ returnTo: window.location.origin })}>
      Log Out
    </button>
  );
};

export default LogoutButton;

Display User Information

You can display user information by using the useAuth0 hook. In this case, we call useAuth0 and we can destructure the returned object to get the user, isAuthenticated, and isLoading values. user is also an object, containing information we can display in out application. isAuthenticated and isLoading return booleans anc can be used to determine which UI to render.

// src/components/Profile.js
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react'

const Profile = () => {
  const { user, isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return <div>Loading...</div>
  }

  return isAuthenticated && (
    <div>
      <img src={user.picture} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  )
}

export default Profile

Conclusion

That's it! You've now integrated Auth0 authentication into your React application. Users can log in and log out, and you can access user information using Auth0's React SDK.

Remember to check the official Auth0 documentation for more advanced features and other integrations.