# <AuthView /> component

> This documents the native `<AuthView />` from `@clerk/expo/native`. For web projects, use the [web <SignIn />](https://clerk.com/docs/reference/components/authentication/sign-in.md) or [<SignUp />](https://clerk.com/docs/reference/components/authentication/sign-up.md) 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](https://dashboard.clerk.com) are automatically supported.

> Before using this component, ensure you meet the [Expo requirements](https://clerk.com/docs/reference/expo/native-components/overview.md#requirements).

## Usage

The following examples show how to use the `<AuthView />` in your Expo app. Use [useAuth()](https://clerk.com/docs/reference/hooks/use-auth.md) or [useUser()](https://clerk.com/docs/reference/hooks/use-user.md) in a `useEffect` to react to authentication state changes.

### Basic usage

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

filename: app/(auth)/sign-in.tsx
```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

```tsx
<AuthView mode="signIn" />
```

### Sign-up only

```tsx
<AuthView mode="signUp" />
```

### Dismissible auth view

The following example enables the native dismiss button with the `isDismissable` prop.

```tsx
<AuthView isDismissable />
```

## Properties

| Name                                                                                                          | Type                                                                                          | Description                                                                                                                                                   |
| ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| '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. |                                                                                                                                                               |
| isDismissable                                                                                                 | boolean                                                                                       | 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. |

## Social connection (OAuth) configuration

`<AuthView />` automatically shows sign-in buttons for any social connections enabled in your [Clerk Dashboard](https://dashboard.clerk.com/~/user-authentication/sso-connections). 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](https://clerk.com/docs/guides/configure/auth-strategies/sign-in-with-google.md) guide to complete the following:

1. [Enable Google as a social connection](https://dashboard.clerk.com/~/user-authentication/sso-connections) with **Use custom credentials** toggled on.
2. Create OAuth 2.0 credentials in the [Google Cloud Console](https://console.cloud.google.com/) — 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](https://dashboard.clerk.com/~/user-authentication/sso-connections).
4. Add your iOS application to the [**Native Applications**](https://dashboard.clerk.com/~/native-applications) page in the Clerk Dashboard (Team ID + Bundle ID).
5. Add your Android application to the [**Native Applications**](https://dashboard.clerk.com/~/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](https://clerk.com/docs/guides/configure/auth-strategies/sign-in-with-google.md#configure-environment-variables) guide.
7. Configure the `@clerk/expo` plugin with the iOS URL scheme in your `app.json`.

> 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](https://clerk.com/docs/guides/configure/auth-strategies/sign-in-with-apple.md) guide to complete the following:

1. Add your iOS application to the [**Native Applications**](https://dashboard.clerk.com/~/native-applications) page in the Clerk Dashboard (Team ID + Bundle ID).
2. [Enable Apple as a social connection](https://dashboard.clerk.com/~/user-authentication/sso-connections) in the Clerk Dashboard.

> 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

| Platform | Status                                                                                                          |
| -------- | --------------------------------------------------------------------------------------------------------------- |
| iOS      | Supported (SwiftUI)                                                                                             |
| Android  | Supported (Jetpack Compose)                                                                                     |
| Web      | Use [<SignIn />](https://clerk.com/docs/reference/components/authentication/sign-in.md) from `@clerk/expo/web` |

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)