Alt description missing in image
Beta: Plugins coming soon!
@auth/clerkhooksuseSignInFlow

useSignInFlow()

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

Use this hook to build a custom sign-in experience with Zod based form state included. Wraps Clerk’s useSignIn() and our useSocialAuthFlow() to provide a simple API for email/password or social sign-ins, plus navigation and status handling.

Usage

SignInScreen.tsx
import { useSignInFlow } from '@auth/clerk'
 
export const SignInScreen = () => {
    const {
        formState,
        isLoaded,
        isLoading,
        onSignInPressed,
        onPressSocialSignIn,
        signInError,
        signInStatus,
    } = useSignInFlow({
        forceRedirectUrl: '/',
        initialValues: { emailAddress: '', password: '' },
    })
 
    if (!isLoaded) return null
 
    return (
        <View>
            <TextInput
                value={formState.values.emailAddress}
                onChangeText={(v) => formState.setFieldValue('emailAddress', v)}
                placeholder="Email"
                autoCapitalize="none"
            />
            <TextInput
                value={formState.values.password}
                onChangeText={(v) => formState.setFieldValue('password', v)}
                placeholder="Password"
                secureTextEntry
            />
            <Button disabled={isLoading} onPress={onSignInPressed} title="Sign in" />
 
            <Button disabled={isLoading} onPress={() => onPressSocialSignIn('oauth_google')} title="Continue with Google" />
 
            {!!signInError && <Text>{signInError}</Text>}
            {!!signInStatus && <Text>Status: {signInStatus}</Text>}
        </View>
    )
}

API

Parameters

  • forceRedirectUrl?: string | null — When sign-in completes, navigate to this URL (defaults to /).
  • initialValues?: Partial<SignInFormState> — Prefill the form state.

Returned values

  • formState: UseFormState<SignInFormState> — Controlled form state with values, setFieldValue, etc.
  • isLoaded: boolean — Underlying Clerk useSignIn() loaded state.
  • isLoading: boolean — Local submitting/processing state.
  • onSignInPressed: () => Promise<void> — Email/username + password sign-in handler.
  • router — Universal navigation object from useRouter().
  • signIn — Clerk signIn resource.
  • signInStatus: SignInStatus | null — Most recent sign-in status when not complete.
  • setActive — Clerk setActive to set the active session on success.
  • setIsLoading, setSignInStatus, setSignInError — Local setters.
  • signInError: string | null — Last user-facing error message.

Form shape

type SignInFormState = {
    emailAddress: string
    password: string
    username?: string
}
See Clerk’s guide on error handling for custom flows: https://clerk.com/docs/guides/development/custom-flows/error-handling
useSignUpuseSignIn