Authentication

Authentication

Overview

The NextAI starter kit uses Clerk (opens in a new tab) for authentication, providing a secure and easy-to-use authentication system out of the box. This integration handles user registration, login, and session management with minimal configuration.

Features

  • User registration and login
  • Social login providers
  • Email verification
  • Password reset
  • User profile management
  • Role-based access control

Setup

Environment Variables

To set up authentication, you need to configure the following environment variables in your .env file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

You can obtain these keys by creating a Clerk application at clerk.dev (opens in a new tab).

Protected Routes

The starter kit automatically protects certain routes using Clerk middleware. This is configured in the middleware.ts file:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
 
const isProtectedRoute = createRouteMatcher(['/chat(.*)'])
 
export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

By default, all chat-related routes and API endpoints are protected, requiring users to be authenticated before accessing them.

Local Development Setup

For local development, you can use the /api/init route to set up a test user with the necessary subscription status:

  1. Register or log in to your application
  2. Navigate to /api/init in your browser
  3. This will set up your user account with the appropriate subscription tier in the database

After completing these steps, you'll be able to access all features of the application locally without setting up payment processing.

User Metadata

The starter kit uses Clerk's user metadata to store subscription information. This is accessed in the application code using the currentUser() function:

const user = await currentUser();
 
if (!user || user.publicMetadata.subscriptionTier as number < 1) {
  return Response.json('Unauthorized!', { status: 401 });
}

This pattern is used throughout the application to check if a user has the necessary subscription tier to access certain features.

Customization

UI Components

Clerk provides customizable UI components that you can modify to match your application's design. These components are used in the app/(auth) directory.

Authentication Flow

You can customize the authentication flow by modifying the Clerk configuration in your application. This includes:

  • Changing the sign-up and sign-in forms
  • Adding or removing social login providers
  • Customizing email templates
  • Configuring multi-factor authentication

Security Best Practices

  1. Always keep your Clerk API keys secure and never expose them in client-side code
  2. Use environment variables for all sensitive configuration
  3. Implement proper role-based access control for your application features
  4. Regularly audit user access and permissions

For more detailed information about Clerk and its features, refer to the official Clerk documentation (opens in a new tab).

N8n IntegrationDatabase