Part 119: Building a Simple Authentication Flow with Next.js

[App] Authentication Overview

[App] Authentication Overview

In today's post, we'll explore how to implement a basic authentication flow in a Next.js application. We've previously set up a SignInPage where users can input their email and password. Now, we'll extend this functionality to authenticate these credentials.

Setting Up the Authentication Logic

Step 1: Handling Form Submission

We have already set up a form on our SignInPage that allows users to submit their email and password. Currently, we log the form data to verify that we are receiving the input values correctly. Now, let's authenticate these credentials.

Step 2: Extracting User Credentials

We'll start by extracting the "email" and "password" from the formData object. This is essential for verifying whether the credentials are valid.

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

'use server';

import { redirect } from 'next/navigation';

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' };
  }
  redirect('/');
}

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

Step 3: Implementing Fake Authentication

For this example, we'll use a simple fake authentication logic. This is just a placeholder until we connect to a real database of users. Our temporary logic will validate any login where the email ends with "@example.com" and the password is "test". If the credentials are valid, we'll return the user's details, which, for now, is just the email.

Step 4: Validating Credentials

In the signInAction, we call the authenticate function with the submitted email and password. If the credentials are incorrect, authenticate returns undefined, and we display an error message to the user, indicating "Invalid credentials."

Step 5: Handling Successful Login

If the authentication is successful, we redirect the user to the home page. We achieve this by using the redirect function from the next/navigation module. This mimics the behavior in our createCommentAction by telling the router which page to display next.

Testing the Authentication Flow

1. Invalid Credentials: Enter an email like "[email protected]" and an incorrect password. You'll see the "Invalid credentials" message displayed on the page, verifying that our error handling is working.

2. Valid Credentials: Enter "test" as the password. Upon submission, you should be redirected to the home page, confirming that the successful login flow is functioning as expected.

Next Steps

While we've set up a basic sign-in flow, we're not yet storing any session data to remember that a user is logged in. This means the navigation bar still shows the "Sign in" link, even after a successful login. In the next section, we'll explore how to maintain user authentication status across sessions.

By following this guide, you've implemented a foundational authentication system in your Next.js application. This setup will pave the way for more advanced features, such as user sessions and persistent login states. Stay tuned for our next post, where we’ll tackle these challenges!