@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/auth/clerk.md

@@ -1,132 +0,0 @@
-# Clerk Authentication Patterns
-
-Battle-tested patterns for Clerk authentication in Next.js.
-
-## Server-Side Auth Check
-
-```typescript
-// lib/auth.ts
-import { auth } from '@clerk/nextjs/server'
-
-export async function requireAuth() {
-  const { userId } = await auth()
-
-  if (!userId) {
-    throw new Error('UNAUTHORIZED')
-  }
-
-  return userId
-}
-
-// Usage in Server Action
-export async function myAction() {
-  const userId = await requireAuth()
-  // Continue with authenticated user
-}
-```
-
-## Protected Layout
-
-```typescript
-// app/(protected)/layout.tsx
-import { auth } from '@clerk/nextjs/server'
-import { redirect } from 'next/navigation'
-
-export default async function ProtectedLayout({
-  children
-}: {
-  children: React.ReactNode
-}) {
-  const { userId } = await auth()
-
-  if (!userId) {
-    redirect('/sign-in')
-  }
-
-  return <>{children}</>
-}
-```
-
-## Get Current User with Metadata
-
-```typescript
-// lib/auth.ts
-import { currentUser } from '@clerk/nextjs/server'
-import { prisma } from '@/lib/db'
-
-export async function getCurrentUser() {
-  const user = await currentUser()
-  if (!user) return null
-
-  // Get or create database user
-  const dbUser = await prisma.user.upsert({
-    where: { clerkId: user.id },
-    update: {
-      email: user.emailAddresses[0]?.emailAddress,
-      name: `${user.firstName} ${user.lastName}`.trim()
-    },
-    create: {
-      clerkId: user.id,
-      email: user.emailAddresses[0]?.emailAddress ?? '',
-      name: `${user.firstName} ${user.lastName}`.trim()
-    }
-  })
-
-  return dbUser
-}
-```
-
-## Client-Side Auth Hook
-
-```typescript
-// hooks/use-user.ts
-'use client'
-import { useUser } from '@clerk/nextjs'
-
-export function useCurrentUser() {
-  const { user, isLoaded, isSignedIn } = useUser()
-
-  return {
-    user: isSignedIn ? user : null,
-    isLoading: !isLoaded,
-    isAuthenticated: isSignedIn
-  }
-}
-```
-
-## Middleware Configuration
-
-```typescript
-// middleware.ts
-import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
-
-const isProtectedRoute = createRouteMatcher([
-  '/dashboard(.*)',
-  '/settings(.*)',
-  '/api/user(.*)'
-])
-
-const isPublicRoute = createRouteMatcher([
-  '/',
-  '/sign-in(.*)',
-  '/sign-up(.*)',
-  '/api/webhooks(.*)'
-])
-
-export default clerkMiddleware(async (auth, req) => {
-  if (isProtectedRoute(req)) {
-    await auth.protect()
-  }
-})
-
-export const config = {
-  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)']
-}
-```
-
-## When to Use
-
-- Server Components needing user context
-- Server Actions modifying user data
-- API routes requiring authentication
-- Protected page layouts

package/skills/patterns/auth/mfa.md

@@ -1,313 +0,0 @@
-# Multi-Factor Authentication Patterns
-
-Patterns for implementing MFA/2FA.
-
-## TOTP Setup
-
-```typescript
-// lib/mfa.ts
-import { authenticator } from 'otplib'
-import QRCode from 'qrcode'
-import { prisma } from '@/lib/db'
-
-authenticator.options = {
-  window: 1 // Allow 1 step variance for clock drift
-}
-
-export async function generateMfaSecret(userId: string, email: string) {
-  const secret = authenticator.generateSecret()
-
-  // Store encrypted secret
-  await prisma.user.update({
-    where: { id: userId },
-    data: {
-      mfaSecret: encrypt(secret),
-      mfaEnabled: false // Not enabled until verified
-    }
-  })
-
-  // Generate QR code
-  const otpauth = authenticator.keyuri(email, 'MyApp', secret)
-  const qrCode = await QRCode.toDataURL(otpauth)
-
-  return { secret, qrCode }
-}
-
-export async function verifyAndEnableMfa(userId: string, token: string) {
-  const user = await prisma.user.findUnique({
-    where: { id: userId }
-  })
-
-  if (!user?.mfaSecret) {
-    throw new Error('MFA not set up')
-  }
-
-  const secret = decrypt(user.mfaSecret)
-  const isValid = authenticator.verify({ token, secret })
-
-  if (!isValid) {
-    throw new Error('Invalid verification code')
-  }
-
-  // Generate backup codes
-  const backupCodes = generateBackupCodes()
-
-  await prisma.user.update({
-    where: { id: userId },
-    data: {
-      mfaEnabled: true,
-      mfaBackupCodes: backupCodes.map(code => hashBackupCode(code))
-    }
-  })
-
-  return backupCodes
-}
-
-export function verifyTotp(secret: string, token: string): boolean {
-  return authenticator.verify({ token, secret })
-}
-
-function generateBackupCodes(count = 10): string[] {
-  return Array.from({ length: count }, () =>
-    Math.random().toString(36).slice(2, 10).toUpperCase()
-  )
-}
-```
-
-## MFA Setup Flow
-
-```tsx
-// app/settings/security/mfa/page.tsx
-'use client'
-
-import { useState } from 'react'
-import Image from 'next/image'
-
-export default function MfaSetupPage() {
-  const [step, setStep] = useState<'setup' | 'verify' | 'backup'>('setup')
-  const [qrCode, setQrCode] = useState<string>()
-  const [secret, setSecret] = useState<string>()
-  const [backupCodes, setBackupCodes] = useState<string[]>()
-  const [verifyCode, setVerifyCode] = useState('')
-  const [error, setError] = useState('')
-
-  async function startSetup() {
-    const res = await fetch('/api/mfa/setup', { method: 'POST' })
-    const data = await res.json()
-
-    setQrCode(data.qrCode)
-    setSecret(data.secret)
-    setStep('verify')
-  }
-
-  async function verifyAndEnable() {
-    setError('')
-
-    const res = await fetch('/api/mfa/verify', {
-      method: 'POST',
-      body: JSON.stringify({ token: verifyCode })
-    })
-
-    if (!res.ok) {
-      setError('Invalid code. Please try again.')
-      return
-    }
-
-    const data = await res.json()
-    setBackupCodes(data.backupCodes)
-    setStep('backup')
-  }
-
-  if (step === 'setup') {
-    return (
-      <div className="max-w-md">
-        <h1 className="mb-4 text-2xl font-bold">Enable Two-Factor Auth</h1>
-        <p className="mb-6 text-gray-600">
-          Add an extra layer of security to your account.
-        </p>
-        <button onClick={startSetup} className="rounded bg-blue-600 px-4 py-2 text-white">
-          Set Up 2FA
-        </button>
-      </div>
-    )
-  }
-
-  if (step === 'verify') {
-    return (
-      <div className="max-w-md">
-        <h1 className="mb-4 text-2xl font-bold">Scan QR Code</h1>
-        <p className="mb-4 text-gray-600">
-          Scan this QR code with your authenticator app.
-        </p>
-
-        {qrCode && (
-          <Image src={qrCode} alt="QR Code" width={200} height={200} className="mb-4" />
-        )}
-
-        <p className="mb-4 text-sm text-gray-500">
-          Or enter manually: <code className="bg-gray-100 px-2 py-1">{secret}</code>
-        </p>
-
-        <div className="mb-4">
-          <label className="mb-1 block text-sm font-medium">Verification Code</label>
-          <input
-            type="text"
-            value={verifyCode}
-            onChange={(e) => setVerifyCode(e.target.value)}
-            placeholder="Enter 6-digit code"
-            className="w-full rounded border px-3 py-2"
-          />
-          {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
-        </div>
-
-        <button onClick={verifyAndEnable} className="rounded bg-blue-600 px-4 py-2 text-white">
-          Verify and Enable
-        </button>
-      </div>
-    )
-  }
-
-  return (
-    <div className="max-w-md">
-      <h1 className="mb-4 text-2xl font-bold">Save Backup Codes</h1>
-      <p className="mb-4 text-gray-600">
-        Save these codes in a secure place. You can use them if you lose access to your authenticator.
-      </p>
-
-      <div className="mb-6 grid grid-cols-2 gap-2 rounded bg-gray-100 p-4 font-mono">
-        {backupCodes?.map((code, i) => (
-          <div key={i}>{code}</div>
-        ))}
-      </div>
-
-      <a href="/settings/security" className="rounded bg-blue-600 px-4 py-2 text-white">
-        Done
-      </a>
-    </div>
-  )
-}
-```
-
-## MFA Login Challenge
-
-```tsx
-// app/login/mfa/page.tsx
-'use client'
-
-import { useState } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
-
-export default function MfaChallengePage() {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const [code, setCode] = useState('')
-  const [error, setError] = useState('')
-  const [useBackup, setUseBackup] = useState(false)
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setError('')
-
-    const res = await fetch('/api/auth/mfa-verify', {
-      method: 'POST',
-      body: JSON.stringify({
-        code,
-        isBackupCode: useBackup,
-        token: searchParams.get('token')
-      })
-    })
-
-    if (!res.ok) {
-      setError('Invalid code')
-      return
-    }
-
-    router.push('/dashboard')
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="mx-auto max-w-md py-12">
-      <h1 className="mb-6 text-2xl font-bold">Two-Factor Authentication</h1>
-
-      <div className="mb-4">
-        <label className="mb-1 block text-sm font-medium">
-          {useBackup ? 'Backup Code' : 'Authentication Code'}
-        </label>
-        <input
-          type="text"
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
-          placeholder={useBackup ? 'Enter backup code' : 'Enter 6-digit code'}
-          className="w-full rounded border px-3 py-2"
-          autoFocus
-        />
-        {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
-      </div>
-
-      <button type="submit" className="w-full rounded bg-blue-600 py-2 text-white">
-        Verify
-      </button>
-
-      <button
-        type="button"
-        onClick={() => setUseBackup(!useBackup)}
-        className="mt-4 text-sm text-blue-600"
-      >
-        {useBackup ? 'Use authenticator code' : 'Use backup code'}
-      </button>
-    </form>
-  )
-}
-```
-
-## SMS Fallback
-
-```typescript
-// lib/mfa-sms.ts
-import twilio from 'twilio'
-
-const client = twilio(
-  process.env.TWILIO_ACCOUNT_SID,
-  process.env.TWILIO_AUTH_TOKEN
-)
-
-export async function sendSmsCode(phoneNumber: string, code: string) {
-  await client.messages.create({
-    body: `Your verification code is: ${code}`,
-    from: process.env.TWILIO_PHONE_NUMBER,
-    to: phoneNumber
-  })
-}
-
-export async function generateAndSendSmsCode(userId: string) {
-  const code = Math.floor(100000 + Math.random() * 900000).toString()
-
-  const user = await prisma.user.findUnique({
-    where: { id: userId },
-    select: { phone: true }
-  })
-
-  if (!user?.phone) {
-    throw new Error('No phone number')
-  }
-
-  // Store code with expiry
-  await prisma.verificationCode.create({
-    data: {
-      userId,
-      code: hashCode(code),
-      type: 'SMS_MFA',
-      expiresAt: new Date(Date.now() + 5 * 60 * 1000) // 5 minutes
-    }
-  })
-
-  await sendSmsCode(user.phone, code)
-}
-```
-
-## When to Use
-
-- Account security
-- Compliance requirements
-- High-value accounts
-- Admin access

package/skills/patterns/auth/nextauth.md

@@ -1,140 +0,0 @@
-# NextAuth.js (Auth.js) Patterns
-
-Authentication patterns for NextAuth.js v5 in Next.js.
-
-## Basic Setup
-
-```typescript
-// auth.ts
-import NextAuth from 'next-auth'
-import GitHub from 'next-auth/providers/github'
-import Google from 'next-auth/providers/google'
-import { PrismaAdapter } from '@auth/prisma-adapter'
-import { prisma } from '@/lib/db'
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
-  adapter: PrismaAdapter(prisma),
-  session: { strategy: 'jwt' },
-  providers: [
-    GitHub({
-      clientId: process.env.GITHUB_ID!,
-      clientSecret: process.env.GITHUB_SECRET!
-    }),
-    Google({
-      clientId: process.env.GOOGLE_ID!,
-      clientSecret: process.env.GOOGLE_SECRET!
-    })
-  ],
-  callbacks: {
-    async jwt({ token, user }) {
-      if (user) {
-        token.id = user.id
-      }
-      return token
-    },
-    async session({ session, token }) {
-      if (session.user) {
-        session.user.id = token.id as string
-      }
-      return session
-    }
-  },
-  pages: {
-    signIn: '/login',
-    error: '/login'
-  }
-})
-```
-
-## Route Handler
-
-```typescript
-// app/api/auth/[...nextauth]/route.ts
-import { handlers } from '@/auth'
-
-export const { GET, POST } = handlers
-```
-
-## Server-Side Auth Check
-
-```typescript
-// lib/auth.ts
-import { auth } from '@/auth'
-
-export async function getSession() {
-  return auth()
-}
-
-export async function requireAuth() {
-  const session = await auth()
-
-  if (!session?.user) {
-    throw new Error('Unauthorized')
-  }
-
-  return session
-}
-```
-
-## Credentials Provider
-
-```typescript
-// auth.ts (add to providers)
-import Credentials from 'next-auth/providers/credentials'
-import bcrypt from 'bcryptjs'
-
-Credentials({
-  credentials: {
-    email: { type: 'email' },
-    password: { type: 'password' }
-  },
-  async authorize(credentials) {
-    const user = await prisma.user.findUnique({
-      where: { email: credentials.email as string }
-    })
-
-    if (!user?.password) return null
-
-    const valid = await bcrypt.compare(
-      credentials.password as string,
-      user.password
-    )
-
-    if (!valid) return null
-
-    return { id: user.id, email: user.email, name: user.name }
-  }
-})
-```
-
-## Sign In/Out Components
-
-```tsx
-// components/auth-buttons.tsx
-'use client'
-import { signIn, signOut } from 'next-auth/react'
-import { Button } from '@/components/ui/button'
-
-export function SignInButton() {
-  return (
-    <Button onClick={() => signIn('github')}>
-      Sign In with GitHub
-    </Button>
-  )
-}
-
-export function SignOutButton() {
-  return (
-    <Button variant="outline" onClick={() => signOut()}>
-      Sign Out
-    </Button>
-  )
-}
-```
-
-## When to Use
-
-- Self-hosted authentication
-- Multiple OAuth providers
-- Database session storage
-- Custom credential authentication