Integrating with Next.js

This guide explains how to integrate OAuth2 authentication into a Next.js application using NextAuth.js with AuthAction. It demonstrates how to set up authentication, handle login and logout, and protect routes and API endpoints.

Overview

This application showcases how to configure and handle authentication using AuthAction’s OAuth2 service with Next.js. The setup includes:

• OAuth2 login flow using NextAuth.js with AuthAction as the provider
• Secure JWT-based session management
• Protected routes that require authentication
• Secure API routes with session validation
• Logout handling with AuthAction’s OIDC-compliant logout flow

Prerequisites

Before using this application, ensure you have:

1. Node.js and npm installed: You can download and install them from nodejs.org.

2. AuthAction OAuth2 credentials: You will need the following from your AuthAction setup:

   • Tenant Domain
   • Client ID
   • Client Secret
   • Redirect URIs (login and logout)

Installation

1. Clone the repository (if applicable):

   git clone https://github.com/authaction/authaction-nextjs-example.git
   cd authaction-nextjs-example

2. Install dependencies:

   npm install

3. Configure your AuthAction credentials:

   Create a .env.local file in the root of your project with the following environment variables:

   AUTHACTION_TENANT_DOMAIN=your-authaction-tenant-domain
   AUTHACTION_CLIENT_ID=your-authaction-client-id
   AUTHACTION_CLIENT_SECRET=your-authaction-client-secret
   NEXTAUTH_SECRET=your-secure-random-string
   NEXTAUTH_URL=http://localhost:3000

Usage

1. Start the development server:

   npm run dev

   This will start the Next.js application on http://localhost:3000.

2. Testing Authentication:

   • Open your browser and navigate to http://localhost:3000.
   • You will be automatically redirected to the AuthAction login page.
   • After successful login, you will be redirected back to the application dashboard.
   • The dashboard displays a welcome message and your profile information.
   • Click the “Logout” button to be logged out and redirected to the specified logout URL.

Code Explanation

Authentication Configuration (pages/api/auth/[...nextauth].ts)

• Configures NextAuth.js with AuthAction as the OAuth2 provider
• Uses JWT strategy for session management
• Handles token refresh and session validation
• Maps user information from AuthAction to the Next.js session

Protected Pages (/app/dashboard/page.tsx)

• Uses useSession hook to check authentication status
• Displays user information when authenticated
• Shows login prompt when not authenticated
• Includes logout functionality with proper token handling

API Routes (/app/api/profile/route.ts)

• Demonstrates server-side session validation
• Returns user profile information for authenticated requests
• Implements proper error handling for unauthenticated access

Common Issues

• Redirects not working:

  • Ensure that the NEXTAUTH_URL matches your application’s base URL
  • Verify that the redirect URIs in your AuthAction configuration match exactly
  • Check that your application is running on the port specified in your environment variables

• Session issues:

  • Make sure NEXTAUTH_SECRET is set to a secure, random string
  • Verify that your AuthAction client secret is correct
  • Check browser console and server logs for any error messages

• Network Errors:

  • Ensure your application can reach the AuthAction servers
  • Verify that there are no firewall rules or network policies blocking the OAuth2 redirects