/clerk-react-patterns

Custom Flows (HIGH)

Custom Sign-In with useSignIn

import { useSignIn } from '@clerk/react'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

export function CustomSignIn() {
  const { isLoaded, signIn, setActive } = useSignIn()
  const navigate = useNavigate()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!isLoaded) return

    try {
      const result = await signIn.create({
        identifier: email,
        password,
      })

      if (result.status === 'complete') {
        await setActive({ session: result.createdSessionId })
        navigate('/dashboard')
      }
    } catch (err: unknown) {
      const clerkError = err as { errors?: Array<{ message: string }> }
      setError(clerkError.errors?.[0]?.message ?? 'Sign in failed')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={e => setPassword(e.target.value)}
        placeholder="Password"
      />
      {error && <p>{error}</p>}
      <button type="submit">Sign In</button>
    </form>
  )
}

Custom Sign-Up with useSignUp

import { useSignUp } from '@clerk/react'

export function CustomSignUp() {
  const { isLoaded, signUp, setActive } = useSignUp()

  async function handleSubmit(email: string, password: string) {
    if (!isLoaded) return

    const result = await signUp.create({ emailAddress: email, password })

    if (result.status === 'complete') {
      await setActive({ session: result.createdSessionId })
    } else if (result.status === 'missing_requirements') {
      // Email verification needed
      await signUp.prepareEmailAddressVerification({ strategy: 'email_code' })
    }
  }
}

Email Verification

async function verifyEmail(code: string) {
  const result = await signUp.attemptEmailAddressVerification({ code })

  if (result.status === 'complete') {
    await setActive({ session: result.createdSessionId })
    navigate('/dashboard')
  }
}

signIn.status Values

Always check result.status === 'complete' before calling setActive.

Docs