Elements Logo

Elements

Pixelated Heart IconGitHub Logo

Command Palette

Search for a command to run...

[ AUTH ]
Clerk Logo

Clerk

Complete authentication suite with sign-in, sign-up, and user management

Overview

Complete auth solution with 3 implementation styles: ShadCN Custom (full control), Signals (experimental real-time validation), and Built-in (fastest setup).

ShadCN Custom Components

Fully customizable using shadcn/ui primitives.

Sign In

Complete sign-in with OAuth, MFA, password reset, and error handling.

BETA
Open in v0

Features: Email/password, 12 OAuth providers, MFA, password reset, account lockout

import { SignInShadcn } from "@elements/clerk";

export default function SignInPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <SignInShadcn />
    </div>
  );
}

Sign Up

Registration with dynamic fields, email verification, and CAPTCHA.

BETA
Open in v0

Features: Dynamic fields, OAuth, 6-digit verification, password strength, waitlist detection

import { SignUpShadcn } from "@elements/clerk";

export default function SignUpPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <SignUpShadcn />
    </div>
  );
}

Waitlist

Animated waitlist signup with server-side integration.

BETA
Open in v0

Features: Email validation, animated success, duplicate detection, Framer Motion

Setup: Enable in Clerk Dashboard → Configure → Restrictions → Sign-up mode → "Waitlist"

import { WaitlistShadcn } from "@elements/clerk";

export default function WaitlistPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-md w-full">
        <WaitlistShadcn />
      </div>
    </div>
  );
}

Signals Components (Experimental)

⚠️ Experimental: Uses Clerk's Signals API (@clerk/clerk-react@5.44.0+). May change.

Sign In (Signals)

Real-time validation with built-in password reset flow.

Open in v0
Welcome back
Don't have an account? Sign up

Key Differences: useSignInSignal() hook, field-level errors, built-in reset flow

import { SignInSignals } from "@elements/clerk";

export default function SignInPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <SignInSignals />
    </div>
  );
}

Sign Up (Signals)

Registration with Signals API validation.

Open in v0
Create an account
Already have an account? Sign in
import { SignUpSignals } from "@elements/clerk";

export default function SignUpPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <SignUpSignals />
    </div>
  );
}

Built-in Components

Clerk's pre-built components. Fastest setup, limited customization.

bunx shadcn@latest add @elements/clerk-sign-in
import { SignIn } from "@clerk/nextjs";

export default function SignInPage() {
  return <SignIn />;
}

Theme customization:

import { ClerkProvider } from "@clerk/nextjs";
import { shadcn } from "@clerk/themes";

<ClerkProvider appearance={{ theme: shadcn }}>
  {children}
</ClerkProvider>

Quick Start

1. Install Clerk

npm install @clerk/nextjs

2. Add Environment Variables

# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

Get keys from Clerk Dashboard.

3. Wrap App with ClerkProvider

// app/layout.tsx
import { ClerkProvider } from "@clerk/nextjs";

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

4. Add Middleware (Optional)

bunx shadcn@latest add @elements/clerk-middleware

Protects routes automatically.

Install Suites### All ShadCN Components

bunx shadcn@latest add @elements/clerk-auth-shadcn

All Signals Components

bunx shadcn@latest add @elements/clerk-auth-signals

All Built-in Components

bunx shadcn@latest add @elements/clerk-auth

Comparison

FeatureShadCN CustomSignalsBuilt-in
Customization✅ Full✅ Full⚠️ Limited
OAuth✅ 12 providers✅ 12 providers✅ 12 providers
MFA✅✅✅
Real-time Validation❌✅✅
Password Reset✅ Manual✅ Built-in✅ Built-in
SetupMediumMediumEasy
Bundle Size~8KB~9KB~12KB
Production Ready✅⚠️ Experimental✅

Configuration

OAuth Providers

Configure in Clerk Dashboard → User & Authentication → Social Connections

Supported: Google, GitHub, Apple, Microsoft, Linear, Notion, Slack, Discord, GitLab, Spotify, Twitch, Twitter/X

MFA

Enable in Dashboard → User & Authentication → Multi-factor

Options: TOTP, SMS codes, Backup codes

Custom Redirects

Set environment variables:

NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/dashboard

Or in components:

router.push("/dashboard"); // After successful auth

Troubleshooting

Hydration errors: Add suppressHydrationWarning to <html>

Already signed in: Components show message when authenticated. Sign out to test.

Waitlist not working: Verify waitlist mode enabled, CLERK_SECRET_KEY set

OAuth redirect issues: Configure callback URL in component:

redirectUrl: "/elements/clerk/sso-callback"

Create callback page:

// app/elements/clerk/sso-callback/page.tsx
import { AuthenticateWithRedirectCallback } from "@clerk/nextjs";

export default function SSOCallbackPage() {
  return <AuthenticateWithRedirectCallback />;
}

Security Best Practices

  1. Never expose CLERK_SECRET_KEY (server-side only)
  2. Enable MFA for admin accounts
  3. Use HTTPS in production
  4. Validate redirects to prevent open redirect attacks
  5. Monitor suspicious activity in Clerk dashboard

Resources