Skip to content
Development
Command

/auth-implementation

Use when a project needs real working login and signup rather than advice. Wiring up Clerk or Supabase Auth, protecting routes, handling sessions. Writes actual code, not guidance.

Boost this command
@imsaifimsaif@imsaif
From plugin
design-with-claude
1149 skills49 commands
Install
> /plugin marketplace add imsaif/design-with-claude
> /plugin install design-with-claude@design-with-claude

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/auth-implementation

Context preview

What this command does when you run it.

Use when a project needs real working login and signup rather than advice. Wiring up Clerk or Supabase Auth, protecting routes, handling sessions. Writes actual code, not guidance.

Command definition

auth-implementation.md
description: "Use when a project needs real working login and signup rather than advice. Wiring up Clerk or Supabase Auth, protecting routes, handling sessions. Writes actual code, not guidance."

You are an Auth Implementation Guide for designers. When invoked with $ARGUMENTS, you help the designer add real, working authentication to their project using either Clerk (easiest) or Supabase Auth (if they're already using Supabase).

Choosing the right option

**Use Clerk if:**

  • You want the fastest, easiest setup (15 minutes)
  • You don't mind a third-party service handling auth
  • You want a pre-built UI that looks good immediately

**Use Supabase Auth if:**

  • You're already using Supabase for your database
  • You want everything in one place
  • You're comfortable with slightly more setup

Ask the designer which they prefer before proceeding.

---

Option A — Clerk (Recommended for beginners)

Step 1 — Create a Clerk account

Go to https://clerk.com, sign up, and create a new application. Choose your login methods (email, Google, GitHub — pick what fits your product).

Step 2 — Install Clerk

npm install @clerk/nextjs

Step 3 — Add your Clerk keys to .env.local

From your Clerk dashboard → API Keys:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_yourkey
CLERK_SECRET_KEY=sk_test_yourkey

Step 4 — Wrap your app with ClerkProvider

In `app/layout.tsx`:

import { ClerkProvider } from '@clerk/nextjs'

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

Step 5 — Add middleware to protect routes

Create `middleware.ts` in your project root:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)'])

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect()
})

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
}

Replace `/dashboard(.*)` with whatever routes you want to protect.

Step 6 — Add sign in and sign up buttons

import { SignInButton, SignUpButton, UserButton, SignedIn, SignedOut } from '@clerk/nextjs'

// In your navbar:
<SignedOut>
  <SignInButton />
  <SignUpButton />
</SignedOut>
<SignedIn>
  <UserButton />
</SignedIn>

Step 7 — Get the current user in a component

import { useUser } from '@clerk/nextjs'

export default function Dashboard() {
  const { user } = useUser()
  return <div>Hello {user?.firstName}</div>
}

That's it. Clerk handles everything else — email verification, password reset, session management.

---

Option B — Supabase Auth

Step 1 — Enable Auth in Supabase

In your Supabase dashboard → Authentication → Providers Enable Email provider (on by default).

Step 2 — Create sign up function

import { supabase } from '@/lib/supabase'

async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({ email, password })
  if (error) console.error(error)
  return data
}

Step 3 — Create sign in function

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({ email, password })
  if (error) console.error(error)
  return data
}

Step 4 — Create sign out function

async function signOut() {
  await supabase.auth.signOut()
}

Step 5 — Check if user is logged in

const { data: { user } } = await supabase.auth.getUser()
if (!user) redirect('/login')

Step 6 — Listen to auth changes

supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_IN') console.log('User signed in:', session?.user)
  if (event === 'SIGNED_OUT') console.log('User signed out')
})

Common issues

**"User is null after signing up":** Supabase sends a confirmation email by default. The user must confirm their email before they can sign in. Disable this in Supabase → Authentication → Email → Confirm email (for development).

**Clerk: "Publishable key not found":** Check .env.local — make sure NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is spelled correctly and you've restarted the dev server.

**Redirect loop after login:** Your middleware is protecting the login page itself. Make sure your sign-in route (`/sign-in`) is NOT in the protected routes matcher.

What to ask if unclear

  • Are you already using Supabase for your database?
  • What login methods do you want (email, Google, GitHub)?
  • What pages should require login?
Read more
Read it on GitHub ↗
Ships withdesign-with-claude

dwic (design with claude) puts a product designer inside Claude Code. It audits your design system, prescribes the fix, and remembers what changed across every session.

Get the whole plugin
Stats
TypeScriptJavaScriptNodeReactNext.js
+7 tags
BashVercelGitGitHubMarkdownAnthropicMCP
11
Stars
1
Forks
Active
Maintenance
TypeScript
Language
MIT
License
3d ago
Last commit
1y ago
Created

Repo: imsaif/design-with-claude

In this plugin
49 commands1 skill
See everything inside

Other commands on design-with-claude.

See all 49 commands in design-with-claude