Build a custom authentication flow using biometric sign-in

npx expo install @clerk/expo-biometrics

import { useBiometricCredentials } from '@clerk/expo/biometrics'
import { Button } from 'react-native'

export function EnrollBiometricCredential() {
  const { enroll } = useBiometricCredentials()

  const enrollCurrentDevice = async () => {
    try {
      await enroll({ reason: 'Use biometrics to sign in.' })
    } catch (err) {
      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
      // for more info on error handling.
      console.error(JSON.stringify(err, null, 2))
    }
  }

  return <Button title="Enable biometric sign-in" onPress={enrollCurrentDevice} />
}

import { useEffect, useState } from 'react'
import { useAuth } from '@clerk/expo'
import { useBiometricCredentials } from '@clerk/expo/biometrics'
import { Button } from 'react-native'

export function SignInWithBiometrics() {
  const { isLoaded } = useAuth()
  const { getAvailability, signIn } = useBiometricCredentials()
  const [isAvailable, setIsAvailable] = useState(false)

  const refreshAvailability = async () => {
    try {
      const availability = await getAvailability()
      setIsAvailable(availability.isAvailable)
    } catch {
      setIsAvailable(false)
    }
  }

  useEffect(() => {
    if (isLoaded) void refreshAvailability()
  }, [isLoaded])

  const handleSignIn = async () => {
    try {
      const result = await signIn()
      if (result.status === 'complete' && result.createdSessionId) {
        await result.setActive({ session: result.createdSessionId })
      }
    } catch (err) {
      // Keep another sign-in method available when biometric sign-in fails.
      console.error(JSON.stringify(err, null, 2))
      await refreshAvailability()
    }
  }

  if (!isLoaded || !isAvailable) return null

  return <Button title="Sign in with biometrics" onPress={handleSignIn} />
}

import { useAuth, useReverification } from '@clerk/expo'
import { isBiometricCredentialError, useBiometricCredentials } from '@clerk/expo/biometrics'
import { Button } from 'react-native'

export function TransferButton() {
  const { getToken } = useAuth()
  const { reverify } = useBiometricCredentials()

  const transferMoney = useReverification(
    async () => {
      const token = await getToken()
      const res = await fetch('https://example.com/api/reverification-example', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}` },
      })

      return res.json()
    },
    {
      onNeedsReverification: async ({ level, complete, cancel }) => {
        try {
          const result = await reverify({
            level,
            reason: 'Verify your identity to continue.',
          })

          if (result.status !== 'complete') {
            console.error(
              'Biometric verification is incomplete. Offer another verification method.',
            )
            cancel()
            return
          }

          complete()
        } catch (err) {
          if (
            isBiometricCredentialError(err) &&
            err.code === 'biometric_credential_policy_incompatible'
          ) {
            console.error('Choose another verification method for this credential.')
          }

          cancel()
        }
      },
    },
  )

  const handlePress = async () => {
    try {
      await transferMoney()
    } catch (err) {
      console.error(JSON.stringify(err, null, 2))
    }
  }

  return <Button title="Transfer" onPress={handlePress} />
}

import { useEffect, useState } from 'react'
import { type BiometricCredential, useBiometricCredentials } from '@clerk/expo/biometrics'
import { Button, Text, View } from 'react-native'

export function RevokeBiometricCredential() {
  const { list, revoke } = useBiometricCredentials()
  const [credentials, setCredentials] = useState<BiometricCredential[]>([])

  const loadBiometricCredentials = async () => {
    try {
      setCredentials(await list())
    } catch (err) {
      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
      // for more info on error handling.
      console.error(JSON.stringify(err, null, 2))
    }
  }

  const handleRevoke = async (id: string) => {
    try {
      await revoke(id)
      setCredentials((currentCredentials) =>
        currentCredentials.filter((credential) => credential.id !== id),
      )
    } catch (err) {
      // See https://clerk.com/docs/guides/development/custom-flows/error-handling
      // for more info on error handling.
      console.error(JSON.stringify(err, null, 2))
    }
  }

  useEffect(() => {
    void loadBiometricCredentials()
  }, [])

  return (
    <View>
      {credentials.map((credential) => (
        <View key={credential.id}>
          <Text>{credential.name ?? 'Biometric credential'}</Text>
          <Button title="Revoke" onPress={() => handleRevoke(credential.id)} />
        </View>
      ))}
    </View>
  )
}