Alt description missing in image
Beta: Plugins coming soon!

useSignUp()

import { useSignUp } from '@auth/clerk'
        • useSignUp()

Low-level Clerk sign-up resource with a universal import path. Prefer useSignUpFlow() for form state + email verification baked in.

Usage

CustomSignUp.tsx
import { useSignUp } from '@auth/clerk'
 
export const CustomSignUp = () => {
    const { isLoaded, signUp, setActive } = useSignUp()
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
 
    const onSubmit = async () => {
        if (!isLoaded) return
        await signUp.create({ emailAddress: email, password })
        await signUp.prepareEmailAddressVerification({ strategy: 'email_code' })
    }
 
    const onVerify = async (code: string) => {
        const attempt = await signUp.attemptEmailAddressVerification({ code })
        if (attempt.status === 'complete') await setActive({ session: attempt.createdSessionId! })
    }
 
    return (
        <View>
            {/* ...inputs... */}
            <Button title="Create account" onPress={onSubmit} />
            {/* then render a code input and call onVerify */}
        </View>
    )
}

API

Returned values (selection)

  • isLoaded: boolean — Whether the resource is ready.
  • signUp: SignUpResource — Clerk sign-up resource.
  • setActive: (params) => Promise<void> — Set the active session.