Skip to main content

Clerk Auth Config Generator

Generate ready-to-use Clerk authentication configuration for Next.js, Remix, and Astro. Select your framework, configure protected routes, pick social providers, and get complete middleware.ts, layout wrappers, and .env templates instantly.

✓ Next.js / Remix / Astro ✓ Social OAuth providers ✓ Route protection config ✓ Copy-ready code

Frequently Asked Questions

What is Clerk and why use it?▼

Clerk is a drop-in authentication and user management service. It handles sign-up, sign-in, password resets, social OAuth, MFA, session management, and user profiles — so you don't have to build any of that from scratch. It integrates natively with Next.js App Router, Remix, and Astro via framework-specific SDKs.

What does the middleware.ts file do?▼

The middleware runs on every request before your route handler executes. It uses Clerk's clerkMiddleware() to check if a user is authenticated. For routes you mark as protected (using createRouteMatcher), it calls auth.protect() which redirects unauthenticated users to the sign-in page automatically. Public routes skip the auth check entirely.

How do I protect a specific page in Next.js App Router?▼

Add the route pattern to the protected routes list (e.g. /dashboard(.*) to protect /dashboard and all sub-paths). For page-level protection, you can also use auth().protect() inside a Server Component or getAuth() inside a Route Handler. The middleware approach is recommended for consistent protection across all routes without per-page code.

How do social providers work?▼

Social providers (Google, GitHub, etc.) are configured in the Clerk Dashboard under User & Authentication → Social Connections. You select which providers to enable, provide the OAuth app credentials (Client ID and Secret from the provider's developer console), and Clerk handles all the OAuth flow, token exchange, and user creation automatically.

Where do I get my Clerk API keys?▼

Go to dashboard.clerk.com, create a new application, and find your Publishable Key and Secret Key in the API Keys section. The Publishable Key is safe to expose in client-side code (it's prefixed pk_). The Secret Key must never be exposed — keep it only in server-side environment variables.

What is the difference between Remix and Next.js Clerk setups?▼

In Next.js App Router, Clerk uses a middleware.ts file to intercept requests and a ClerkProvider wrapper in your root layout. In Remix, the rootAuthLoader wraps your root loader and ClerkApp wraps your root component. Both approaches achieve the same result: server-side auth checks with client-side auth state propagation, but the integration points differ to match each framework's conventions.

Share this tool: X / Twitter LinkedIn
✓ 60,000+ developers use DevPlaybook ★★★★★ 4.8 / 5 on Gumroad ✓ MIT licensed · Instant download ✓ No login required

Related Products

on Gumroad

You Might Also Need

More Free Tools

Enjoying this tool? Get more like it.

Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.

DevPlaybook Pro 7 days free

Unlock AI-Powered Dev Tools

  • ⚡ AI Code Review, Doc Generator & SQL Builder
  • ⚡ All premium templates & early access
  • ⚡ Member discounts on Gumroad products
Start Free Trial →

$9/mo after trial · Cancel anytime

Want the full toolkit?

Get DevPlaybook Pro

Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.

$79
$241 separately Save $162 (67% off)
Get DevPlaybook Pro — $79 →

MIT licensed · Instant download · No subscription

See what's included → Browse all deals →