Part 123: Refactoring Authentication Code: Creating a Modular Approach

[App] Authentication Overview

[App] Authentication Overview

In web development, maintaining clean and manageable code is crucial, especially when dealing with sensitive operations like user authentication. Today, we'll discuss refactoring our existing codebase to enhance its modularity and maintainability by extracting common functionalities into a dedicated module. This approach streamlines our authentication logic and improves security by centralizing key management.

Why Refactor?

Refactoring is the process of restructuring existing code without changing its external behavior. By moving repeated code into a separate module, we achieve:

• Reusability: Centralizing common functionalities makes them reusable across different parts of the application.

• Maintainability: Changes need to be made in one place, reducing the risk of errors.

• Readability: Cleaner code is easier to read and understand.

Creating the auth Module

We'll start by creating a new module under the lib folder, named auth.js, where we will place all the common functions related to JSON Web Tokens (JWTs) and cookies.

Step 1: Extracting Common Functions

We'll move the getUserFromSession function from the NavBar component to our new auth.js module. This function decodes the JWT stored in cookies to retrieve user information.

// File path: lib/auth.js

import { SignJWT, jwtVerify } from 'jose';
import { cookies } from 'next/headers';

const JWT_COOKIE = 'sessionToken';
const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET);

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

Step 2: Refactoring Token Generation

Next, we'll extract the token generation logic from the signInAction function and create a setSessionCookie function in the auth module.

// File path: lib/auth.js

export async function setSessionCookie(user) {
  const sessionToken = await new SignJWT(user)
    .setProtectedHeader({ alg: 'HS256' })
    .sign(JWT_SECRET);
  cookies().set(JWT_COOKIE, sessionToken);
}

Step 3: Updating the Components

Now that the common logic is in auth.js, we can update our components and actions to use these functions.

NavBar Component

Replace the JWT logic in the NavBar with an import from the auth module.

// 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 className="flex gap-2">
        <li className="font-bold font-orbitron">
          <NavLink href="/">
            Indie Gamer
          </NavLink>
        </li>
        <li className="ml-auto">
          <NavLink href="/reviews">
            Reviews
          </NavLink>
        </li>
        <li>
          <NavLink href="/about" prefetch={false}>
            About
          </NavLink>
        </li>
        {user ? (
          <li>
            {user.email}
          </li>
        ) : (
        <li>
          <NavLink href="/sign-in">
            Sign in
          </NavLink>
        </li>
        )}
      </ul>
    </nav>
  );
}

Sign-In Action

Use the setSessionCookie function in the sign-in action.

// File path: app/sign-in/actions.js

'use server';

import { redirect } from 'next/navigation';
import { setSessionCookie } from '@/lib/auth';

export async function signInAction(formData) {
  console.log('[signInAction]', formData);
  const email = formData.get('email');
  const password = formData.get('password');
  const user = authenticate(email, password);
  if (!user) {
    return { isError: true, message: 'Invalid credentials' };
  }
  await setSessionCookie(user);
  redirect('/');
}

function authenticate(email, password) {
  if (email.endsWith('@example.com') && password === 'test') {
    return { email };
  }
}

Step 4: Configuring the JWT Secret in .env.local

1. Locate or Create the .env.local File

   First, navigate to your project's root directory. Check if a file named .env.local exists. This file is used to store environment-specific configurations that are not committed to version control, making it an ideal place for sensitive information like secret keys.

   If the file doesn't exist, create it:

   touch .env.local

2. Add the JWT Secret to .env.local

   Open the .env.local file in your preferred text editor and add the following line:

   JWT_SECRET="53d8e7d31f1352eb37948d327258d80a7fd7c686b846cad34b4d36b48662486a"

   This line sets the JWT_SECRET environment variable with a secure, randomly generated 64-character string. It's crucial to ensure that this secret is unique and not shared publicly, as it plays a critical role in the security of your application's JWTs.

3. Use the Environment Variable in Your Application

   In your JavaScript code, you can access this environment variable using process.env.JWT_SECRET. Ensure that your application reads this variable correctly:

   // File path: lib/auth.js
   
   const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET);

   This line ensures that the JWT_SECRET is encoded properly for use in your JWT operations.

Enhancing Security with Environment Variables

For better security, we moved the JWT secret key to environment variables. This allows us to have different keys for development and production environments, enhancing security by not hardcoding sensitive information.

To generate a secure key, use Node.js's crypto module:

node --print "require('crypto').randomBytes(32).toString('hex')"

This command generates a 64-character string suitable for use as a JWT secret.

Conclusion

Refactoring our authentication code into a separate module not only improves the code's organization and readability but also enhances security by centralizing key management. By employing environment variables for sensitive configurations, we further safeguard our application in various environments. This refactoring paves the way for more scalable and secure web applications.