🔐 Mastering Authentication: Building a Login Form with Next.js Server Actions

// src/actions/auth.js

'use server'; // 👈 MANDATORY: Marks all exports as Server Actions

import { redirect } from 'next/navigation';

export async function loginAction(formData) {
  // 1. Extract data from the native FormData object
  const email = formData.get('email');
  const password = formData.get('password');

  // --- Real-world Logic Goes Here ---
  
  // NOTE: Replace this placeholder with secure credential validation (e.g., comparing
  // hashed passwords against a database record).

  if (email === 'user@example.com' && password === 'password123') {
    // 2. Successful Login: Set Session/Cookie
    console.log(`User ${email} logged in successfully!`);
    
    // In a real application, you would create and set an encrypted session cookie here.
    // e.g., await createSession(userId);

    // 3. Use Next.js redirect to send the user to the dashboard
    redirect('/dashboard'); 
    
  } else {
    // 4. Failed Login: Return an error object
    console.error(`Login failed for ${email}`);
    
    // The client component will handle this returned object
    return { 
      error: 'Invalid credentials. Please check your email and password.',
      success: false 
    };
  }
}

// src/components/LoginForm.jsx

'use client'; // 👈 Mandatory for interactive hooks like useState and useFormStatus

import React from 'react';
import { useFormStatus } from 'react-dom'; 
import { loginAction } from '@/actions/auth'; // Import your Server Action

// --- Helper Component for Loading State ---
function SubmitButton() {
  // useFormStatus monitors the status of the form it's contained within
  const { pending } = useFormStatus(); 

  return (
    <button 
      type="submit" 
      aria-disabled={pending} 
      disabled={pending}
    >
      {pending ? 'Logging in...' : 'Log In'}
    </button>
  );
}

// --- Main Login Form Component ---
export default function LoginForm() {
  const [errorMessage, setErrorMessage] = React.useState(null); 

  // Client-side wrapper to call the Server Action and handle its return value
  async function handleFormSubmit(formData) {
    setErrorMessage(null); 
    
    // 1. Call the imported Server Action directly
    const result = await loginAction(formData); 
    
    // 2. Check the return object for errors
    if (result && result.error) {
      setErrorMessage(result.error);
    }
    // Note: If login is successful, the server performs the redirect, 
    // so no 'else' logic is needed here.
  }

  return (
    // We pass our wrapper function to the 'action' prop
    <form action={handleFormSubmit} className="login-form">
      <h2>Login to Your Account</h2>
      
      {errorMessage && <p style={{ color: 'red', fontWeight: 'bold' }}>{errorMessage}</p>}

      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" required />

      <label htmlFor="password">Password:</label>
      <input type="password" id="password" name="password" required />
      
      <SubmitButton />
    </form>
  );
}

// src/app/login/page.js (Default Server Component)

import LoginForm from '@/components/LoginForm';

export default function LoginPage() {
  return (
    <main style={{ maxWidth: '400px', margin: '50px auto' }}>
      <h1>Secure Login</h1>
      <LoginForm />
    </main>
  );
}