To help our users navigate the app we want it to have a navigation bar that's visible on all pages. We will use the useAuth() hook for information about the current user.

With this piece of information we will show a login button when no user is logged in and a logout button when one is. We will also put the user's email address next to the logout button.

Create a new file src/components/Navbar.tsx and add the code below.

Now we need to add the navigation bar to our app layout. Update src/app/layout.tsx to include the navbar.

Have a look in the browser at both the main page and the login page to test the new functionality.