clerk-core-workflow-a

# 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) ```typescript // 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> ) } ``` ```typescript // app/sign-up/[[...sign-up]]/page.tsx import { SignUp } from '@clerk/nextjs' export default function SignUpPage() { return ( <div className="flex min-h-screen items-center justify-center"> <SignUp routing="path" path="/sign-up" signInUrl="/sign-in" /> </div> ) } ``` ```bash # .env.local — routing configuration NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_S...