Expo Native Components (beta)

Available components
Requirements
How it works
Session synchronization
Web compatibility

Warning

Expo native components are currently in beta. If you run into any issues, please reach out to our 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 while automatically synchronizing with the JavaScript SDK.

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:

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.

How it works

The native components handle authentication through the native Clerk SDKs (clerk-ios and clerk-android). When authentication completes, the session is automatically synchronized to the JavaScript SDK:

Native Authentication - User authenticates through the native UI
Session Created - Native SDK creates and manages the session
Session Sync - @clerk/expo syncs the native session to the JS SDK
JS SDK Ready - All hooks (useUser, useAuth, useSession, etc.) reflect the authenticated state

Session synchronization

Native components do not use imperative callbacks. Instead, use hooks like useAuth(), useUser(), or useSession() in a useEffect to react to authentication state changes:

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" />
}

The same pattern applies to sign-out detection:

app/(home)/profile.tsx

import { UserProfileView } from '@clerk/expo/native'
import { useAuth } from '@clerk/expo'
import { useRouter } from 'expo-router'
import { useEffect } from 'react'

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

  useEffect(() => {
    if (!isSignedIn) {
      router.replace('/(auth)/sign-in')
    }
  }, [isSignedIn])

  return <UserProfileView style={{ flex: 1 }} />
}

Web compatibility

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

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 Mar 9, 2026

Edit on GitHub