Authentication

RocketFuel uses Clerk for authentication. This guide covers configuration, customization, and common patterns.

Overview

When you enable authentication during rocketfuel init, you get:

Sign-in and sign-up pages using Clerk components
Middleware for route protection
A users table synced via webhooks
Webhook handler at /api/webhooks/clerk

Environment Setup

You need three keys from the Clerk dashboard:

Variable	Description
`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`	Publishable key (client-safe)
`CLERK_SECRET_KEY`	Secret key for server-side operations
`CLERK_WEBHOOK_SECRET`	Secret for verifying webhook payloads

Add them to your .env file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."
CLERK_WEBHOOK_SECRET="whsec_..."

Middleware Configuration

RocketFuel configures Clerk middleware in src/middleware.ts to protect routes:

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = {
  matcher: [
    // Skip Next.js internals and static files
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    // Always run for API routes
    "/(api|trpc)(.*)",
  ],
};

Protecting Routes

Server Components

Use auth() from @clerk/nextjs/server to check authentication:

import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";

export default async function DashboardPage() {
  const { userId } = await auth();

  if (!userId) {
    redirect("/sign-in");
  }

  return <div>Welcome to your dashboard!</div>;
}

API Routes

import { auth } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export async function GET() {
  const { userId } = await auth();

  if (!userId) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  return NextResponse.json({ userId });
}

Client-Side Auth

Use Clerk’s React hooks for client-side operations:

"use client";

import { useUser, useAuth } from "@clerk/nextjs";

export function UserProfile() {
  const { user, isLoaded } = useUser();
  const { signOut } = useAuth();

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <div>
      <p>Hello, {user?.firstName}!</p>
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  );
}

User Sync via Webhooks

RocketFuel includes a webhook handler at /api/webhooks/clerk that syncs Clerk users to your database. When a user is created, updated, or deleted in Clerk, the webhook keeps your local users table in sync.

This lets you associate application data (posts, orders, etc.) with users via foreign keys in your database.

Customization

Appearance

Customize the look of Clerk’s pre-built components using the appearance prop:

<SignIn
  appearance={{
    elements: {
      rootBox: "mx-auto",
      card: "shadow-none",
    },
  }}
/>

OAuth Providers

Additional OAuth providers (Google, GitHub, etc.) are configured directly in the Clerk dashboard under User & Authentication > Social Connections. No code changes are needed.