Setup & Configuration

This docs guides you through configuring Clerk with environment variables and initializing the Clerk client.

To use Clerk, you must obtain API keys from your Clerk dashboard and configure them in your .env file, validated by t3-env to prevent runtime errors.

Steps to Set Up Clerk

Create a Clerk Account

Sign up at Clerk and create a new application.
Select Next.js for framework-specific guidance.

Obtain Clerk API Keys

Navigate to API Keys in the Clerk dashboard.
Copy the Publishable Key, Secret Key, and (optionally) Webhook Secret.

Configure Environment Variables

Add these to your .env (or .env.local) file:

Env Variable	Type	Default
`NEXT_PUBLIC_CLERK_SIGN_IN_URL`	`string`	`/sign-in`
`NEXT_PUBLIC_CLERK_SIGN_UP_URL`	`string`	`/sign-up`
`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`	`string`	`pk_test_xxxx`
`CLERK_SECRET_KEY`	`string`	`sk_test_xxxx`

Ensure .env is in .gitignore to protect sensitive keys.

Verify Configuration

Run npm run dev to validate keys via t3-env (in env.mjs).
Check the Clerk dashboard if validation fails.

Initialize Clerk

Plainform includes <ClerkProvider> in app/layout.tsx to wrap the app with Clerk’s authentication context.

For customizing sign-in pages or advanced settings, consult the Clerk Next.js Documentation.

How is this guide ?

Last updated on

Overview

Learn about Clerk’s secure authentication features and how they streamline user management in Plainform.

Usage & Integration

Learn how to implement Clerk’s authentication features, such as sign-in, protected routes, and user management, in your app.

On this page

Steps to Set Up Clerk

Create a Clerk Account

Obtain Clerk API Keys

Configure Environment Variables

Verify Configuration

Initialize Clerk