isAuthenticated not updated after logout

[raalrwai]

Hello, I have a component in react that I conditionally render based off isAuthenticated. This works when the app firsts load, and changes correctly after logging in. However when I log out the application still renders the part of the component it is supposed tot only render when isAuthenticated is true. How to fix this? Should I be setting the isAuthenticated to false when I click the logout button? Please help. I read something about using state to handle but could you please explain or show sample code,
thank you in advance!

[stephanie.chamblee]

Hi @raalrwai,

Would you mind sharing some of your code where you are using isAuthenticated?

It might be helpful to take a look at the React Quickstart if you haven’t already: Auth0 React SDK Quickstarts: Login

The Quickstart sample app contains this example for using isAuthenticated:

// src/components/NavBar.js

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

const NavBar = () => {
  const {
    ...
    isAuthenticated,
    ...
  } = useAuth0();
  ...
  return (
 ...
              {isAuthenticated && (
                <NavItem>
                  <NavLink
                    tag={RouterNavLink}
                    to="/external-api"
                    exact
                    activeClassName="router-link-exact-active"
                  >
                    External API
                  </NavLink>
                </NavItem>
              )}

The “External API” nav link will not render unless the user is authenticated.