clerk-core-workflow-a

Implement user sign-up and sign-in flows with Clerk. Use when building authentication UI, customizing sign-in experience, or implementing OAuth social login. Trigger with phrases like "clerk sign-in", "clerk sign-up", "clerk login flow", "clerk OAuth", "clerk social login".

Zur Installation springen

Repository: ComeOnOliver/skillshub
Letzte Quellaktivität: 23. März 2026 um 17:43
Erkannte Sprache von SKILL.md: Englisch
Sterne: 58
Forks: 20

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/ComeOnOliver/skillshub --skill clerk-core-workflow-a

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

before-you-build

Review product and feature risk before an AI coding agent starts implementation.

2026-06-24

x-twitter-scraper

Use Xquik for X data and confirmation-gated X actions: tweet search, user lookup, follower export, media download, monitors, webhooks, MCP, and SDK workflows.

2026-06-24

canton-network-repos

Canton Network open-source ecosystem guide covering DAML SDK, Canton runtime, and Splice applications. Use when working with Canton Network, DAML smart contracts, or building decentralized applications.

2026-04-03

Alle aus diesem Repository ansehen

name	clerk-core-workflow-a
description	Implement user sign-up and sign-in flows with Clerk. Use when building authentication UI, customizing sign-in experience, or implementing OAuth social login. Trigger with phrases like "clerk sign-in", "clerk sign-up", "clerk login flow", "clerk OAuth", "clerk social login".
allowed-tools	Read, Write, Edit, Grep
version	1.0.0
license	MIT
author	Jeremy Longshore <jeremy@intentsolutions.io>
compatible-with	claude-code, codex, openclaw
tags	["saas","clerk","authentication"]

Clerk Core Workflow A: Sign-Up & Sign-In

Overview

Implement authentication flows with Clerk: pre-built components for rapid setup, custom forms for full UI control, OAuth social login, email/phone verification, and multi-factor authentication.

Prerequisites

Clerk SDK installed and configured (clerk-install-auth completed)
OAuth providers enabled in Dashboard > User & Authentication > Social Connections
Sign-in/sign-up environment variables set

Instructions

Step 1: Pre-Built Components (Quick Start)

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs'

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignIn
        appearance={{
          elements: {
            rootBox: 'mx-auto',
            card: 'shadow-xl rounded-2xl',
            headerTitle: 'text-2xl',
            socialButtonsBlockButton: 'rounded-lg',
          },
        }}
        routing="path"
        path="/sign-in"
        signUpUrl="/sign-up"
      />
    </div>
  )
}

// app/sign-up/[[...sign-up]]/page.tsx
 {  }  

   () {
   (
    
  )
}

'use client' import { useSignIn } from '@clerk/nextjs' import { useRouter } from 'next/navigation' import { useState } from 'react' export function CustomSignIn() { const { signIn, setActive, isLoaded } = useSignIn() const router = useRouter() const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [error, setError] = useState('') const [loading, setLoading] = useState(false) if (!isLoaded) return null const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError('') setLoading(true) try { const result = await signIn.create({ identifier: email, password, }) if (result.status === 'complete') { // Session created — activate it and redirect await setActive({ session: result.createdSessionId }) router.push('/dashboard') } else if (result.status === 'needs_second_factor') { // MFA required — handled in Step 5 router.push('/sign-in/mfa') } else if (result.status === 'needs_identifier') { setError('Please enter your email address') } } catch (err: any) { const clerkError = err.errors?.[0] switch (clerkError?.code) { case 'form_identifier_not_found': setError('No account found with this email') break case 'form_password_incorrect': setError('Incorrect password') break case 'session_exists': router.push('/dashboard') break default: setError(clerkError?.message || 'Sign-in failed') } } finally { setLoading(false) } } return ( <form onSubmit={handleSubmit} className="space-y-4 max-w-sm mx-auto"> <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email address" required className="w-full p-2 border rounded" /> <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" required className="w-full p-2 border rounded" /> {error && <p className="text-red-500 text-sm">{error}</p>} <button type="submit" disabled={loading} className="w-full p-2 bg-blue-600 text-white rounded"> {loading ? 'Signing in...' : 'Sign In'} </button> </form> ) }

'use client' import { useSignUp } from '@clerk/nextjs' import { useRouter } from 'next/navigation' import { useState } from 'react' export function CustomSignUp() { const { signUp, setActive, isLoaded } = useSignUp() const router = useRouter() const [step, setStep] = useState<'form' | 'verify'>('form') const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [code, setCode] = useState('') const [error, setError] = useState('') if (!isLoaded) return null const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() try { await signUp.create({ emailAddress: email, password }) // Send verification email await signUp.prepareEmailAddressVerification({ strategy: 'email_code' }) setStep('verify') } catch (err: any) { setError(err.errors?.[0]?.longMessage || 'Sign-up failed') } } const handleVerify = async (e: React.FormEvent) => { e.preventDefault() try { const result = await signUp.attemptEmailAddressVerification({ code }) if (result.status === 'complete') { await setActive({ session: result.createdSessionId }) router.push('/onboarding') } } catch (err: any) { setError(err.errors?.[0]?.longMessage || 'Verification failed') } } if (step === 'verify') { return ( <form onSubmit={handleVerify} className="space-y-4"> <p>Check your email for a verification code</p> <input value={code} onChange={e => setCode(e.target.value)} placeholder="Enter 6-digit code" required /> {error && <p className="text-red-500">{error}</p>} <button type="submit">Verify Email</button> </form> ) } return ( <form onSubmit={handleSignUp} className="space-y-4"> <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" required /> <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" required /> {error && <p className="text-red-500">{error}</p>} <button type="submit">Create Account</button> </form> ) }

Error	Cause	Solution
`form_identifier_not_found`	Email not registered	Show sign-up link or check Clerk instance
`form_password_incorrect`	Wrong password	Display error, offer password reset link
`session_exists`	Already signed in	Redirect to dashboard
`verification_failed`	Wrong or expired code	Allow retry; offer "Resend code" button
`oauth_callback_error`	OAuth misconfigured	Check redirect URIs in Dashboard > Social Connections
`identifier_already_signed_in`	Multi-session not enabled	Enable multi-session or redirect to dashboard

clerk-core-workflow-a

Installationsoptionen

Quelldateien prüfen

Clerk Core Workflow A: Sign-Up & Sign-In

Overview

Prerequisites

Instructions

Step 1: Pre-Built Components (Quick Start)

Clerk Core Workflow A: Sign-Up & Sign-In

Overview

Prerequisites

Instructions

Step 1: Pre-Built Components (Quick Start)

Step 2: Custom Sign-In Form (Full UI Control)

Step 3: OAuth Social Login

Step 4: Custom Sign-Up with Email Verification

Step 5: Multi-Factor Authentication (TOTP)

Error Handling

Enterprise Considerations

Resources

Next Steps

clerk-core-workflow-a

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

Clerk Core Workflow A: Sign-Up & Sign-In

Overview

Prerequisites

Instructions

Step 1: Pre-Built Components (Quick Start)

Clerk Core Workflow A: Sign-Up & Sign-In

Overview

Prerequisites

Instructions

Step 1: Pre-Built Components (Quick Start)

Step 2: Custom Sign-In Form (Full UI Control)

Step 3: OAuth Social Login

Step 4: Custom Sign-Up with Email Verification

Step 5: Multi-Factor Authentication (TOTP)

Error Handling

Enterprise Considerations

Resources

Next Steps