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.