Adding a log out button

Now that you can log in, you want to provide an intuitive way to log out. Deleting a cookie manually isn’t a convenient way of signing out, so we want the possibility of logging out through our UI. That’s why we will now build a log out button as part of our Nav.js navigation component.

Logging out can be either done on the frontend or the backend. They don’t replace each other but complement one another: if the frontend JavaScript fails to load, the backend solution kicks in.

Let’s start with the frontend version and complement the backend variant afterward.

Logging out using the frontend

We will start by adding the logout functionality to our existing Log out button.

Open the app/tickets/Nav.js component file. As we will need Supabase, you must make sure to import getSupabaseBrowserClient() and assign it to a variable as follows: const supabase = getSupabaseBrowserClient();.

In our existing code, we already added...