Skip to main content

<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.

iOSAndroid
The AuthView renders a comprehensive authentication interface that handles both user sign-in and sign-up flows on iOS.The AuthView renders a comprehensive authentication interface that handles both user sign-in and sign-up flows on Android.

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.

The <AuthView /> renders inline in your React Native view hierarchy, so you can place it in a modal, route, full-screen view, or any other layout that fits your app.

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. You can use useAuth() or useUser() to read authentication state and update your UI after auth changes.

Render in a modal

The following example demonstrates one way to render <AuthView /> inside a React Native <Modal>. The native dismiss button is shown by default. Use onDismiss to close the modal in React Native state.

Important

When using native components, pass { treatPendingAsSignedOut: false } to useAuth() so pending are not treated as signed out.

Important

Keep the React Native <Modal> that contains <AuthView /> mounted at the same level as your signed-in and signed-out content. Don't render the modal only inside signed-out content, because auth state can change before required are finished and unmount the modal too early.

src/app/index.tsx
import { AuthView } from '@clerk/expo/native'
import { useAuth, useUser } from '@clerk/expo'
import { useState } from 'react'
import { Button, Modal, StyleSheet, Text, View } from 'react-native'

export default function AuthButton() {
  const { isSignedIn } = useAuth({ treatPendingAsSignedOut: false })
  const { user } = useUser()
  const [isAuthOpen, setIsAuthOpen] = useState(false)

  return (
    <View style={styles.container}>
      {isSignedIn ? (
        <Text>User ID: {user?.id}</Text>
      ) : (
        <Button title="Sign in" onPress={() => setIsAuthOpen(true)} />
      )}
      <Modal
        animationType="slide"
        visible={isAuthOpen}
        presentationStyle="pageSheet"
        onRequestClose={() => setIsAuthOpen(false)}
      >
        <AuthView onDismiss={() => setIsAuthOpen(false)} />
      </Modal>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

Sign-in only

<AuthView mode="signIn" />

Sign-up only

<AuthView mode="signUp" />

Render as a required full-screen view

You can render <AuthView /> directly in a full-screen view when users must authenticate before continuing. In this case, pass isDismissible={false} so the native dismiss button isn't shown.

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

export default function SignInScreen() {
  const { session } = useSession()
  const router = useRouter()

  useEffect(() => {
    if (session?.status === 'active') {
      router.replace('/(home)')
    }
  }, [session?.status, router])

  return <AuthView isDismissible={false} />
}

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
    isDismissible
    Type
    boolean
    Description

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

  • Name
    onDismiss
    Type
    () => void
    Description

    A callback that runs when the native authentication view requests dismissal. Use this to update your app's presentation state, such as closing a React Native <Modal>. Use useAuth(), useUser(), or useSession() to read auth state after authentication changes.

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