Expo Native Components (beta)

Available components
Requirements
1. Expo plugin options
Respond to auth changes
Web compatibility

Warning

Expo native components are currently in beta. If you run into any issues, please reach out to the support team.

The Clerk Expo SDK provides prebuilt native UI components rendered with SwiftUI on iOS and Jetpack Compose on Android. These components provide a fully native authentication experience for Expo apps.

<AuthView /> and <UserProfileView /> render inline in your React Native view hierarchy, so you can place them in a modal, route, full-screen view, or any other layout that fits your app. <UserButton /> renders the platform-native Clerk button and opens <UserProfileView /> when tapped.

Available components

Component	Description
<AuthView />	Full sign-in and sign-up authentication UI
<UserButton />	Circular avatar button that opens the user profile
<UserProfileView />	Complete profile management interface

Requirements

Native components require:

Expo SDK 53 or later. See the quickstart guide.
A development build (npx expo run:ios or npx expo run:android), as these components are not available in Expo Go.
The @clerk/expo plugin configured in your app.json file. See the available plugin options.
app.json
```
{
  "expo": {
    "plugins": ["@clerk/expo"]
  }
}
```
If using social connections, you must register your native application credentials in the Clerk Dashboard. See the Sign in with Google and Sign in with Apple guides for setup steps.

Expo plugin options

The plugin accepts the following options:

Name
appleSignIn
Type
boolean
Description
Whether to add the com.apple.developer.applesignin entitlement. Set to false if your app does not use Apple Sign In. Defaults to true.
Name
keychainService
Type
string
Description
Custom keychain service identifier. Required if you need extension targets (widgets, App Clips, Watch) to share the keychain with the main app.
Name
theme
Type
string
Description
Path to a JSON file that customizes the appearance of the native components on iOS and Android (colors, dark mode, border radius, and font family). See the Theming reference for platform-specific details and the full schema.

Example

app.json

{
  "expo": {
    "plugins": [
      [
        "@clerk/expo",
        {
          "appleSignIn": false,
          "keychainService": "com.example.myapp"
        }
      ]
    ]
  }
}

Respond to auth changes

Use hooks like useAuth(), useUser(), or useSession() to read authentication state and update your UI after auth changes.

Important

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

The following example demonstrates one way to open <AuthView /> from a sign-in button.

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 session tasks 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, Text, View } from 'react-native'

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

  return (
    <View>
      {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>
  )
}

When rendering <AuthView /> or <UserProfileView /> directly in a route or full-screen view, pass isDismissible={false} if users must complete the flow to continue.

<AuthView isDismissible={false} />

<UserProfileView isDismissible={false} style={{ flex: 1 }} />

Web compatibility

For Expo web projects, use the web-specific components from @clerk/expo/web:

src/app/sign-in.web.tsx

import { SignIn } from '@clerk/expo/web'

export default function SignInScreen() {
  return <SignIn />
}

See the web component reference for more information.

Last updated on Jun 16, 2026

Edit on GitHub