Use the Value of isAuthenticated to Render Components Conditionality

The isAuthenticated value represents the authentication state of your users it's tracked by the Auth0 React SDK. This value returns true when the user has been authenticated and false they're when not. Use isAuthenticated to render UI elements conditionally depending on the authentication state of your users.

import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
import { LoginButton } from "../../buttons/login-button";
import { LogoutButton } from "../../buttons/logout-button";
import { SignupButton } from "../../buttons/signup-button";

export const NavBarButtons = () => {
  const { isAuthenticated } = useAuth0();

  return (
    <div className="nav-bar__buttons">
      {!isAuthenticated && (
        <>
          <SignupButton />
          <LoginButton />
        </>
      )}
      {isAuthenticated && (
        <>
          <LogoutButton />
        </>
      )}
    </div>
  );
};

Authentication process doesn’t happen in your React application when using Auth0. Your React application will redirect your users to the Auth0 Universal Login page. Auth0 asks for credentials and redirects the user back to your application with the result of the authentication.