Adding Next Auth on Website

Implementing Authentication in Next.js

To add authentication to your Next.js application, grasp these core concepts:

Key Concepts

1. Authentication: Verifies user identity (e.g., username/password or via Google).
2. Session Management: Tracks user's state across requests.
3. Authorization: Controls access to different parts of the app.

Authentication Strategies

• OAuth/OpenID Connect (OIDC): Ideal for social logins and Single Sign-On (SSO).
• Email + Password: Common and straightforward, requires strong security.
• Passwordless: Uses email magic links or SMS codes, reducing password fatigue.
• Passkeys/WebAuthn: High-security cryptographic credentials, complex to implement.

Implementing Email-Password Authentication

Here’s how to add basic email-password authentication to a Next.js app:

Login Form

Create a login form in app/login/page.tsx:

import { authenticate } from '@/app/lib/actions';

export default function Page() {
  return (
    <form action={authenticate}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  );
}

Authentication Logic

Handle authentication in app/lib/actions.ts:

'use server';
import { signIn } from '@/auth';

export async function authenticate(formData: FormData) {
  try {
    await signIn('credentials', formData);
  } catch (error) {
    if (error) {
      switch (error.type) {
        case 'CredentialsSignin':
          return 'Invalid credentials.';
        default:
          return 'Something went wrong.';
      }
    }
    throw error;
  }
}

Form Handling

Manage form state and handle errors in app/login/page.tsx:

'use client';
import { authenticate } from '@/app/lib/actions';
import { useFormState, useFormStatus } from 'react-dom';

export default function Page() {
  const [errorMessage, dispatch] = useFormState(authenticate, undefined);

  return (
    <form action={dispatch}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      {errorMessage && <p>{errorMessage}</p>}
      <LoginButton />
    </form>
  );
}

function LoginButton() {
  const { pending } = useFormStatus();

  return (
    <button aria-disabled={pending} type="submit">
      Login
    </button>
  );
}

Conclusion

This setup provides a basic email-password authentication flow. For enhanced security and multiple login options, consider integrating OAuth or passwordless authentication methods.