Outline

In this video, we'll use our new hooks wrapper and create a simple component under src/components called NavBar.js. Here's the finished code:

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

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

  return (
    <div>
      {!isAuthenticated && (
        <button onClick={() => loginWithRedirect({})}>Log in</button>
      )}

      {isAuthenticated && <button onClick={() => logout()}>Log out</button>}
    </div>
  );
};

export default NavBar;

Now, in order to use this navigation bar, we'll need to wrap our app in the Auth0Provider we wrote.

 

I finished! On to the next chapter