DEV Community: Emaani Dev

Implementing Secure Social Login Authentication in Next.js 13+ NextAuth.js

Emaani Dev — Thu, 16 Jan 2025 19:42:36 +0000

Introduction

Social login authentication has become a standard feature in modern web applications. This article will guide you through implementing secure social login using Next.js 13+, NextAuth.js, and Prisma, with Google and Facebook as authentication providers.

Prerequisites

Node.js 16+
Next.js 13+
PostgreSQL database
Google and Facebook Developer accounts

Table of Contents

Initial Setup
Configuration
Database Integration
Implementation
Error Handling
Security Considerations
Testing
Best Practices

1. Initial Setup

First, install the required dependencies:

npm install next-auth @auth/prisma-adapter prisma @prisma/client

2. Configuration

Environment Variables

Create a .env file:

# OAuth Configuration
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
FACEBOOK_CLIENT_ID=your_facebook_client_id
FACEBOOK_CLIENT_SECRET=your_facebook_client_secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secure_secret

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/dbname"

NextAuth Configuration

Create the authentication configuration file:

import NextAuth, { DefaultSession, NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import { PrismaAdapter } from "@auth/prisma-adapter";
import prisma from "@/app/lib/prisma";

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      email: string;
      name?: string | null;
    } & DefaultSession["user"]
  }
}

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID ?? "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID ?? "",
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET ?? "",
    }),
  ],
  callbacks: {
    async session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
    async signIn({ user, account, profile }) {
      try {
        if (!user.email) return false;

        const existingUser = await prisma.user.findUnique({
          where: { email: user.email },
          include: { profile: true },
        });

        if (!existingUser) {
          await prisma.user.create({
            data: {
              email: user.email,
              name: user.name || "",
              profile: {
                create: {
                  firstName: (profile as any)?.given_name || "",
                  lastName: (profile as any)?.family_name || "",
                }
              }
            },
          });
        }
        return true;
      } catch (error) {
        console.error("Error in signIn callback:", error);
        return false;
      }
    },
  },
  pages: {
    signIn: '/login',
    error: '/auth/error',
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

3. Database Integration

Prisma Schema

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  profile       Profile?
  accounts      Account[]
  sessions      Session[]
}

model Profile {
  id            String    @id @default(cuid())
  userId        String    @unique
  firstName     String
  lastName      String
  user          User      @relation(fields: [userId], references: [id])
}

// NextAuth.js required models
model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  session_state      String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

4. Implementation

Authentication

"use client";
import { SessionProvider } from "next-auth/react";

export function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

4.2 Social Login Buttons Component

"use client";
import { signIn } from "next-auth/react";
import { FaGoogle, FaFacebook } from "react-icons/fa";

export const SocialLoginButtons = () => {
  const handleSocialLogin = async (provider: "google" | "facebook") => {
    try {
      const result = await signIn(provider, {
        callbackUrl: '/dashboard',
        redirect: false,
      });

      if (result?.error) {
        console.error('Social login error:', result.error);
      }
    } catch (error) {
      console.error(`${provider} login error:`, error);
    }
  };

  return (
    <div className="space-y-4">
      <button
        onClick={() => handleSocialLogin("google")}
        className="w-full flex items-center justify-center gap-2 bg-white text-gray-700 border border-gray-300 rounded-lg px-4 py-2 hover:bg-gray-50"
      >
        <FaGoogle className="text-red-500" />
        Continue with Google
      </button>
      <button
        onClick={() => handleSocialLogin("facebook")}
        className="w-full flex items-center justify-center gap-2 bg-blue-600 text-white rounded-lg px-4 py-2 hover:bg-blue-700"
      >
        <FaFacebook />
        Continue with Facebook
      </button>
    </div>
  );
};

5. Error Handling

Create a custom error page:

"use client";
import { useSearchParams } from "next/navigation";

export default function AuthError() {
  const searchParams = useSearchParams();
  const error = searchParams.get("error");

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <h1 className="text-2xl font-bold text-red-600 mb-4">
          Authentication Error
        </h1>
        <p className="text-gray-600">
          {error || "An error occurred during authentication"}
        </p>
      </div>
    </div>
  );
}

6. Security Considerations

CORS Configuration

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/api/')) {
    const response = NextResponse.next();
    response.headers.set('Access-Control-Allow-Credentials', 'true');
    response.headers.set('Access-Control-Allow-Origin', '*');
    response.headers.set('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    return response;
  }
  return NextResponse.next();
}

7. Testing

Test Authentication Flow

import { render, fireEvent, waitFor } from '@testing-library/react';
import { SocialLoginButtons } from '@/components/SocialLoginButtons';
import { signIn } from 'next-auth/react';

jest.mock('next-auth/react');

describe('SocialLoginButtons', () => {
  it('handles Google login correctly', async () => {
    const { getByText } = render(<SocialLoginButtons />);
    const googleButton = getByText('Continue with Google');

    fireEvent.click(googleButton);

    await waitFor(() => {
      expect(signIn).toHaveBeenCalledWith('google', {
        callbackUrl: '/dashboard',
        redirect: false,
      });
    });
  });
});

8. Best Practices

Environment Variables
- Never commit sensitive credentials
- Use different OAuth credentials for development and production
Error Handling
- Implement comprehensive error logging
- Provide user-friendly error messages
Security
- Implement rate limiting
- Use HTTPS in production
- Keep dependencies updated
User Experience
- Add loading states
- Provide clear feedback
- Handle offline scenarios

Conclusion

This implementation provides a secure and user-friendly social login system. Remember to:

Regularly update dependencies
Monitor authentication logs
Test thoroughly across different browsers
Handle edge cases appropriately
Next.js Documentation
NextAuth.js Documentation
Google OAuth Setup Guide
Facebook OAuth Setup Guide

This article provides a solid foundation for implementing social login in your Next.js application. For production deployment, ensure you follow security best practices and thoroughly test the implementation.

Bulletproof JWT Authentication: Essential Security Patterns for Production Apps

Emaani Dev — Fri, 03 Jan 2025 18:12:57 +0000

JSON Web Tokens (JWT) authentication has become a cornerstone of modern web applications due to its simplicity and scalability. However, implementing JWT securely requires adherence to best practices. Here's a guide to help you protect your applications effectively.

Core Security Principles

Token Structure and Validation

Use Strong Signing Algorithms

Opt for asymmetric algorithms like RS256 over symmetric ones like HS256 for enhanced security.

Implement Strict Payload Validation

Validate every claim in the token to ensure integrity.

Include Essential Claims

Incorporate claims like iat (issued at), exp (expiration), aud (audience), iss (issuer), and sub (subject) to strengthen token purpose and validity.

const token = jwt.sign(
  {
    sub: user.id,
    iss: 'your-app-name',
    aud: 'your-api',
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + (60 * 60), // 1 hour
  },
  privateKey,
  { algorithm: 'RS256' }
);

Storage and Transmission

Use HttpOnly Cookies

Store tokens in HttpOnly cookies to prevent client-side JavaScript access, mitigating XSS risks.

res.cookie('access_token', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict',
  maxAge: 3600000, // 1 hour
});

Enable Secure Flags.

Ensure secure and sameSite attributes are enabled to reduce exposure during token transmission.

Common Pitfalls to Avoid

Token Invalidation

Blacklist Revoked Tokens.

Maintain a server-side token blacklist to invalidate compromised tokens efficiently.

Use Short Expiration Times.

Pair short-lived access tokens with refresh tokens for better control over session lifecycles.

XSS and CSRF Protection

Avoid Storing JWTs in LocalStorage.

LocalStorage is susceptible to XSS attacks. Prefer HttpOnly cookies.

Use CSRF Tokens.

For state-changing operations, implement CSRF tokens to prevent cross-site request forgery.

Enable Content Security Policy (CSP)

Set CSP headers to block malicious scripts.

Secret Management

Use Asymmetric Keys.

Rely on public/private key pairs for signing and verifying tokens.

Rotate Keys Regularly.

Regularly update keys to limit exposure in case of compromise.

Avoid Hardcoding Secrets.

Use environment variables or secret management tools, and keep sensitive data out of version control.

Best Practices for Production

Middleware for Token Verification

Implement middleware to verify tokens and enforce authentication securely:

const verifyToken = async (req, res, next) => {
  try {
    const token = req.cookies.access_token;
    const decoded = await jwt.verify(token, publicKey, {
      algorithms: ['RS256'],
      issuer: 'your-app-name',
      audience: 'your-api',
    });

    if (await isTokenBlacklisted(token)) {
      throw new Error('Token revoked');
    }

    req.user = decoded;
    next();
  } catch (err) {
    res.status(401).json({ error: 'Authentication failed' });
  }
};

Layered Security

JWT authentication is just one aspect of a robust security strategy. Complement it with:

Rate Limiting

Mitigate brute-force attacks by limiting the number of requests per user/IP.

Proper Error Handling

Avoid exposing sensitive error details in responses.

Regular Security Audits

Conduct periodic reviews and penetration testing to identify vulnerabilities.

By following these practices, you can build secure, scalable, and resilient web authentication systems. Remember, security is a journey, not a destination.