Part 125: Implementing a Secure Logout Functionality in Your Web App

[App] Authentication Overview

[App] Authentication Overview

In today's digital environment, providing users with a seamless way to log out of their accounts is a crucial aspect of web application security. While setting expiration times for authentication tokens and cookies is essential, users often need the ability to terminate their sessions immediately. This blog post will guide you through implementing a "Sign out" button in your app's navigation bar, allowing users to log out with just one click.

The Importance of a Logout Option

By default, session cookies and tokens may remain valid until their set expiration, which could be up to two weeks in some cases. However, users should have the option to log out immediately, especially on shared devices or in situations where security might be compromised.

Creating the Logout Functionality

Step 1: Deleting the Session Cookie

First, we'll add a new function to our authentication module that deletes the session cookie. This function will be responsible for ending the user's session.

// File path: lib/auth.js

export function deleteSessionCookie() {
  cookies().delete(JWT_COOKIE);
}

This simple function uses the cookies().delete() method to remove the session cookie, effectively logging the user out.

Step 2: Adding a Sign-Out Button to the NavBar

To make the logout functionality accessible, we'll add a "Sign out" button to the navigation bar. This button will trigger a server-side action to delete the session cookie.

Create the SignOutButton Component

We'll start by creating a new component called SignOutButton.

// File path: components/SignOutButton.jsx

import { deleteSessionCookie } from '@/lib/auth';

export default function SignOutButton() {
  async function action() {
    'use server';
    deleteSessionCookie();
  }

  return (
    <form action={action}>
      <button type="submit"
        className="text-orange-800 hover:underline">
        Sign out
      </button>
    </form>
  );
}

This component renders a form with a submit button labeled "Sign out". The form's action is a server-side function that deletes the session cookie. The use of 'use server' indicates that this function will execute server-side, ensuring the cookie is removed securely.

Update the NavBar Component

Next, we'll update the NavBar component to include the SignOutButton.

// File path: components/NavBar.jsx

import { getUserFromSession } from '@/lib/auth';
import NavLink from './NavLink';


export default async function NavBar() {
  const user = await getUserFromSession();

  return (
    <nav>
      <ul>
        <li>
          {user ? (
           <li>
            
           </li>
         ) : (

        </li>
      </ul>
    </nav>
  );
}

The NavBar now conditionally renders the SignOutButton if a user is logged in, providing a straightforward way to log out.

Step 3: Handling Session Token Verification

To prevent unnecessary warnings in server logs when a session is terminated, we need to handle the case where the token is empty.

// File path: lib/auth.js

export async function getUserFromSession() {
  const sessionToken = cookies().get(JWT_COOKIE)?.value;
  if (sessionToken) {
    try {
      const { payload } = await jwtVerify(sessionToken, JWT_SECRET);
      return payload;
    } catch (error) {
      console.warn('Invalid JWT', error);
    }
  }
}

This code checks if the session token is present before attempting verification, avoiding errors when the cookie is empty.

Conclusion

Implementing a "Sign out" button enhances user security by providing an immediate way to terminate sessions. This feature is crucial for maintaining control over account access and ensuring that users can log out quickly when needed.

Remember, while the code snippets provide a practical guide to implementing logout functionality, always adapt and test the code within your application context. For more detailed insights into cookies and security, consider exploring trusted documentation resources.