Implement Log out Functionality and Only Allow Logged in Users to See Posts
Currently the only way to know if you are logged in is if you check the cookie that is set in the browser. This isn’t super user friendly. You want to add a visual cue as well as a log out button to the nav. To accomplish this, you can check if a user exists with the isAuthenticated function that was created in the auth service. If there is a user you will display their email, loaded up from the isAuthenticated check, as well as a log out button.
The log out button will post to a resource route. This route will log out the user and redirect them to the log in page.
Finally, you will lock up the index page so only logged in users can see and add posts.
Instructor: [0:00] The only indication that a user is logged in, is that there is a cookie here in the application panel of the DevTools. The user has no indication that they are logged in. When the user is logged in, they should see their email and a logout button in the nav.
[0:17] Head on over to the app layout component. Here, you can add a LoaderFunction with a call to authenticator.isAuthenticated. This function will return a user, if it's available. You can pass that user back as JSON.
[0:34] Up above the loader, you can add a loader data type with a key of user and a value of session user. Remember that session user has all the fields of a user since the hashed password.
[0:48] Like usual, you can get the user data with the useLoader data hook, and pass the user into the nav component.
[1:02] Inside of the nav, if the user is not present, you can show the Login and Create Account buttons. Now, when you check the app, because there is a user session, you can see the buttons for Login and Create Account have disappeared.
[1:30] If a user is present, you want to display their email. There, now the user will know that they are logged in. Let's split the view, so you can see the UI changes as you make them.
[1:48] Right now, when the user is signed in, they have no way of logging out. Add a logout button to the nav. You will have to add items centered to the unordered list tag to make sure the items lineup.
[2:07] Add a little margin in between the Logout button and the email. Now, you have a logout button, but it doesn't do anything. How do you think you can add functionality to this button to log the user out?
[2:27] You can wrap it in a form. The form will take a post method in an action of log out. The action tells the form where to submit the post. You haven't created a logout route yet. You can add a logout file to your Routes folder.
[2:48] This route won't have any UI, because all it needs to do is sign the user out and redirect them to the login page. Here, you can call authenticator.logout passing a redirect path as an argument.
[3:06] In your browser, when you click Logout, you can see the user is logged out and redirected to the login page again. The user is still able to access the index page and view posts, but they should have to login to view any posts.
[3:24] Hop over to your index page. To protect this page from unauthenticated users, add a call to authenticator.isAuthenticated.
[3:37] You can pass in a failure redirect with the value of login. Now in the browser, you can't access the index page while you're logged out. To prove that logged in users can still access the index page, I'll log in with my account.
[4:02] Now, it's time to review what you've learned. You wanted to give the user a visual cue that they were logged in, so you added their email to the nav and a logout button.
[4:13] You wrapped the logout button with a form that posts to the logout action. The logout route is just an action that calls authenticator.logout, redirecting the user to the login page.