Epic Next JS 14 Tutorial Part 4: How To Handle Login And Authentication in Next.js

In this tutorial, we will continue working on our Next.js application by adding a Dashboard page that displays user information and provides a Logout button. We will also add some basic styling to make the dashboard more visually appealing. Let's get started! First, let's create a new folder called `dashboard` inside of our `app/pages` directory. Inside this new folder, create a file named `page.tsx`. This is where we will build out our Dashboard page. Next, open up the `auth-actions.ts` file and add the following code to the end of the file: ```typescript export async function logoutAction() { cookies().set("jwt", "", { ...config, maxAge: 0 }); redirect("/"); } ``` This new `logoutAction` function will be used to handle the user's logout action. It sets the JWT cookie value to an empty string and then redirects the user back to the home page. Now, let's update our `SigninForm.tsx` file by adding a new import statement at the top of the file: ```typescript import { useRouter } from "next/navigation"; // ... rest of the code remains unchanged ``` We will be using this new `useRouter` hook to handle our redirects after logging in or out. Next, update the `redirect("/dashboard")` line inside of both the `registerUserAction` and `loginUserAction` functions by replacing it with the following code: ```typescript const router = useRouter(); router.push("/dashboard"); ``` This change will now use the `useRouter` hook to handle our redirects instead of using the `redirect` function directly. Now, let's update our `DashboardRoute.tsx` file by adding some basic styling and updating the Logout button functionality: ```typescriptx import { LogoutButton } from "@/components/custom/LogoutButton"; export default function DashboardRoute() { const router = useRouter(); return ( <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900"> <h1>Dashboard</h1> <div className="space-y-4"> <div className="flex space-x-2"> <span className="font-bold text-lg">Username:</span> <span>{user?.username}</span> </div> <div className="flex space-x-2"> <span className="font-bold text-lg">Email:</span> <span>{user?.email}</span> </div> </div> <LogoutButton /> </div> ); } ``` In this updated code, we have added some basic styling to the Dashboard page and also included a new `useRouter` hook import statement at the top of the file. We are now using this new hook to handle our redirects after logging out. Finally, let's update our `LogoutButton.tsx` file by adding the following code inside of the button element: ```typescriptx <button type="submit" onClick={() => { cookies().set("jwt", "", { ...config, maxAge: 0 }); router.push("/"); }}> <LogOut className="w-6 h-6 hover:text-primary" /> </button> ``` This new code will now handle the user's logout action by setting the JWT cookie value to an empty string and then redirecting the user back to the home page. That's it! We have now successfully built out our Dashboard page with basic styling and added a Logout button that securely logs users out of their accounts. In this Next.js tutorial, we continued working on our application by adding a Dashboard page that displays user information and provides a Logout button. We also covered updating the Sign In and Sign Up pages to use the `useRouter` hook for handling redirects after logging in or out. Thank you for your time, and I hope you are enjoying these tutorials. If you have any questions, you can ask them in the comments or stop by Strapi's open office on Discord from 12:30 pm CST to 1:30 pm CST Monday through Friday. See you in the next post, where we will work on adding user authentication flows to our Next.js application using server actions and httpOnly cookies for secure login functionality.``` SUMMARY: