Skip to main content
Docs

<AuthView /> component

Note

This documents the native <AuthView /> from @clerk/expo/native. For web projects, use the web <SignIn /> or <SignUp /> components from @clerk/expo/web.

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

Important

When using native components, pass { treatPendingAsSignedOut: false } to useAuth() to keep auth state in sync with the native SDK and avoid issues with pending .

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({ treatPendingAsSignedOut: false })
  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 shows sign-in buttons for any social connections enabled in your Clerk Dashboard. However, native OAuth requires additional credential setup — without it, the buttons will appear but fail with an error when tapped.

Sign in with Google

Follow the steps in the Sign in with Google guide to complete the following:

  1. Enable Google as a social connection with Use custom credentials toggled on.
  2. Create OAuth 2.0 credentials in the Google Cloud Console — you'll need an iOS Client ID, Android Client ID, and Web Client ID.
  3. Set the Web Client ID and Client Secret in the Clerk Dashboard.
  4. Add your iOS application to the Native Applications page in the Clerk Dashboard (Team ID + Bundle ID).
  5. Add your Android application to the Native Applications page in the Clerk Dashboard (package name).
  6. Add the Google Client IDs as environment variables in your .env file. Follow the .env.example in the Sign in with Google guide.
  7. Configure the @clerk/expo plugin with the iOS URL scheme in your app.json.

Important

You do not need to install expo-crypto or use the useSignInWithGoogle() hook — <AuthView /> handles the sign-in flow automatically.

Sign in with Apple

Follow the steps in the Sign in with Apple guide to complete the following:

  1. Add your iOS application to the Native Applications page in the Clerk Dashboard (Team ID + Bundle ID).
  2. Enable Apple as a social connection in the Clerk Dashboard.

Important

You do not need to install expo-apple-authentication, expo-crypto, or use the useSignInWithApple() hook — <AuthView /> handles the sign-in flow automatically.

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