Outline
In the last video, we got our Profile route up and running, but it requires us to navigate to the URL directly. We can fix this by adding links to the NavBar component that only display when the user is logged in.
Update NavBar.js with the following:
// src/components/NavBar.js
import React from 'react';
import { Link } from 'react-router-dom';
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>}
{isAuthenticated && (
<span>
<Link to="/">Home</Link>
<Link to="/profile">Profile</Link>
</span>
)}
</div>
);
};
export default NavBar;
Run npm start, head to localhost:3000, and log in. You should see links for Home and Profile.
We just have one problem: we can still see the profile page even if we're logged in by navigating to it directly in the browser URL bar. Let's fix this in the next video.