Skip to main content
Docs

<AuthView /> component

The <AuthView /> component renders a complete native authentication interface using SwiftUI on iOS and Jetpack Compose on Android. It handles all authentication flows including email, phone, OAuth, passkeys, and multi-factor authentication. All methods enabled in your Clerk Dashboard are automatically supported.

Important

Before using this component, ensure you meet the Expo requirementsExpo Icon.

Usage

The following examples show how to use the <AuthView /> in your Expo app. Use useAuth() or useUser() in a useEffect to react to authentication state changes.

Basic usage

app/(auth)/sign-in.tsx
import { AuthView } from '@clerk/expo/native'
import { useAuth } from '@clerk/expo'
import { useRouter } from 'expo-router'
import { useEffect } from 'react'

export default function SignInScreen() {
  const { isSignedIn } = useAuth()
  const router = useRouter()

  useEffect(() => {
    if (isSignedIn) {
      router.replace('/(home)')
    }
  }, [isSignedIn])

  return <AuthView mode="signInOrUp" />
}

Sign-in only

<AuthView mode="signIn" />

Sign-up only

<AuthView mode="signUp" />

Properties

  • Name
    mode
    Type
    'signIn' | 'signUp' | 'signInOrUp'
    Description

    The authentication mode that determines which flows are available to the user. Defaults to 'signInOrUp'.

    • 'signIn' - Restricts the interface to sign-in flows only. Users can only authenticate with existing accounts.
    • 'signUp' - Restricts the interface to sign-up flows only. Users can only create new accounts.
    • 'signInOrUp' - Automatically determines whether to sign users in or sign them up based on whether they already have an account. This is the default mode that provides seamless authentication without requiring users to choose between sign-in and sign-up.
  • Name
    isDismissable
    Type
    boolean
    Description

    Whether the authentication view can be dismissed by the user. When true, a dismiss button appears. When false, no dismiss button is shown. Defaults to false.

    Important

    Do not set isDismissable={true} when rendering inside a React Native <Modal>. The native dismiss button relies on SwiftUI (iOS) or Jetpack Compose (Android) to close the view, which cannot dismiss a React Native <Modal>. Tapping the native dismiss button will not close the modal and may leave the screen unresponsive.

Social connection (OAuth) configuration

<AuthView /> automatically renders sign-in buttons for social connections (Google, Apple, etc.) that are enabled in your Clerk Dashboard. However, these buttons require native application credentials to be configured — without them, users will see the buttons but get an error when they tap them.

  • Google: You must create OAuth credentials in Google Cloud Console and register your native applications in the Clerk Dashboard. See the Sign in with Google guide for setup steps. You do not need the useSignInWithGoogle() hook or expo-crypto — <AuthView /> handles the flow automatically.
  • Apple: You must register your iOS native application (Team ID + Bundle ID) in the Clerk Dashboard. See the Sign in with Apple guide for setup steps. You do not need expo-apple-authentication, expo-crypto, or the useSignInWithApple() hook.

Platform support

PlatformStatus
iOSSupported (SwiftUI)
AndroidSupported (Jetpack Compose)
WebUse <SignIn /> from @clerk/expo/web

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub