To implement user authentication with Auth0 in your React app, you first need to add the Auth0Provider to your project. The Auth0Provider is a context provider that supplies authentication state and methods to your React component tree. Begin by importing the provider from the Auth0 React SDK. Next, wrap your app's root component with the Auth0Provider, supplying it with your Auth0 domain, client ID, and the redirect URI where Auth0 should send users after authentication.

Here is a step-by-step guide:

1. Import the Auth0Provider from the Auth0 React SDK;
2. Obtain your Auth0 domain and client ID from the Auth0 dashboard;
3. Wrap your main app component (often App) with the Auth0Provider in your entry file (such as index.js or main.jsx);
4. Set the domain, clientId, and redirectUri props on the Auth0Provider. The redirectUri is usually set to window.location.origin to return users to the root of your app after login.

For example, your index.js might look like this:

import React from "react";
import ReactDOM from "react-dom/client";
import { Auth0Provider } from "@auth0/auth0-react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Auth0Provider
      domain="YOUR_AUTH0_DOMAIN"
      clientId="YOUR_AUTH0_CLIENT_ID"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

Once you have wrapped your app with the Auth0Provider, all components within your React app will have access to authentication state and methods using the Auth0 React SDK hooks.

To handle user login and logout, you will use the useAuth0 hook provided by the Auth0 React SDK. This hook gives you access to authentication state and useful methods for managing authentication flows.

The useAuth0 hook returns several properties and functions, but the most relevant for login and logout are:

• loginWithRedirect: a function that initiates the login process by redirecting the user to the Auth0 Universal Login page;
• logout: a function that logs the user out of your application and, optionally, from Auth0 as well.

You can use these methods in your components to create login and logout buttons. For instance, to create a login button:

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

function LoginButton() {
  const { loginWithRedirect, isLoading } = useAuth0();

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

Similarly, for a logout button:

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

function LogoutButton() {
  const { logout, isLoading } = useAuth0();

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

By adding these buttons to your app, you allow users to authenticate with Auth0 and end their session when needed. The useAuth0 hook also provides other properties such as isAuthenticated, user, and isLoading, which you can use to manage the UI based on authentication state.