How do I implement authentication in a React app using Auth0?

How do I implement authentication in a React app using Auth0?

To implement authentication in a React app using Auth0, you need to follow these steps: 1. Create an Auth0 account. 2. Set up a new application in the Auth0 dashboard. 3. Install the Auth0 React SDK using npm. 4. Configure the Auth0 provider in your app. 5. Use the useAuth0 hook to manage authentication.

Can you show me a code example for setting up the Auth0 provider?

Sure! Here's a basic example:

import React from 'react';
import { Auth0Provider } from '@auth0/auth0-react';

const App = () => {
  return (
    <Auth0Provider
      domain='YOUR_DOMAIN'
      clientId='YOUR_CLIENT_ID'
      redirectUri={window.location.origin}
    >
      <YourComponent />
    </Auth0Provider>
  );
};

What about handling user login and logout?

You can use the useAuth0 hook to handle login and logout. Here's an example:

import { useAuth0 } from '@auth0/auth0-react';

const YourComponent = () => {
  const { loginWithRedirect, logout, user, isAuthenticated } = useAuth0();

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <p>Welcome, {user.name}</p>
          <button onClick={() => logout({ returnTo: window.location.origin })}>Logout</button>
        </div>
      ) : (
        <button onClick={loginWithRedirect}>Login</button>
      )}
    </div>
  );
};