Build a Social Auth App with Expo React Native

1
import AsyncStorage from '@react-native-async-storage/async-storage'
2
import { createClient } from '@supabase/supabase-js'
3
import 'react-native-url-polyfill/auto'
4
5
const isSSR = typeof window === 'undefined'
6
7
const ExpoWebSecureStoreAdapter = {
8
  getItem: (key: string) => {
9
    if (isSSR) return null
10
    console.debug('getItem', { key })
11
    return AsyncStorage.getItem(key)
12
  },
13
  setItem: (key: string, value: string) => {
14
    if (isSSR) return
15
    return AsyncStorage.setItem(key, value)
16
  },
17
  removeItem: (key: string) => {
18
    if (isSSR) return
19
    return AsyncStorage.removeItem(key)
20
  },
21
}
22
23
export const supabase = createClient(
24
  process.env.EXPO_PUBLIC_SUPABASE_URL ?? '',
25
  process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY ?? '',
26
  {
27
    auth: {
28
      storage: ExpoWebSecureStoreAdapter,
29
      autoRefreshToken: true,
30
      persistSession: true,
31
      detectSessionInUrl: false,
32
    },
33
  }
34
)

1
import { supabase } from '@/lib/supabase'
2
import { AppleButton, appleAuth } from '@invertase/react-native-apple-authentication'
3
import type { SignInWithIdTokenCredentials } from '@supabase/supabase-js'
4
import { router } from 'expo-router'
5
import { Platform } from 'react-native'
6
7
async function onAppleButtonPress() {
8
  // Performs login request
9
  const appleAuthRequestResponse = await appleAuth.performRequest({
10
    requestedOperation: appleAuth.Operation.LOGIN,
11
    // Note: it appears putting FULL_NAME first is important, see issue #293
12
    requestedScopes: [appleAuth.Scope.FULL_NAME, appleAuth.Scope.EMAIL],
13
  })
14
15
  // Get the current authentication state for user
16
  // Note: This method must be tested on a real device. On the iOS simulator it always throws an error.
17
  const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user)
18
19
  console.log('Apple sign in successful:', { credentialState, appleAuthRequestResponse })
20
21
  if (
22
    credentialState === appleAuth.State.AUTHORIZED &&
23
    appleAuthRequestResponse.identityToken &&
24
    appleAuthRequestResponse.authorizationCode
25
  ) {
26
    const signInWithIdTokenCredentials: SignInWithIdTokenCredentials = {
27
      provider: 'apple',
28
      token: appleAuthRequestResponse.identityToken,
29
      nonce: appleAuthRequestResponse.nonce,
30
      access_token: appleAuthRequestResponse.authorizationCode,
31
    }
32
33
    const { data, error } = await supabase.auth.signInWithIdToken(signInWithIdTokenCredentials)
34
35
    if (error) {
36
      console.error('Error signing in with Apple:', error)
37
    }
38
39
    if (data) {
40
      console.log('Apple sign in successful:', data)
41
      router.navigate('/(tabs)')
42
    }
43
  }
44
}
45
46
export default function AppleSignInButton() {
47
  if (Platform.OS !== 'ios') {
48
    return <></>
49
  }
50
51
  return (
52
    <AppleButton
53
      buttonStyle={AppleButton.Style.BLACK}
54
      buttonType={AppleButton.Type.SIGN_IN}
55
      style={{ width: 160, height: 45 }}
56
      onPress={() => onAppleButtonPress()}
57
    />
58
  )
59
}

1
import { supabase } from '@/lib/supabase'
2
import { appleAuthAndroid, AppleButton } from '@invertase/react-native-apple-authentication'
3
import { SignInWithIdTokenCredentials } from '@supabase/supabase-js'
4
import { Platform } from 'react-native'
5
import 'react-native-get-random-values'
6
import { v4 as uuid } from 'uuid'
7
8
async function onAppleButtonPress() {
9
  // Generate secure, random values for state and nonce
10
  const rawNonce = uuid()
11
  const state = uuid()
12
13
  // Configure the request
14
  appleAuthAndroid.configure({
15
    // The Service ID you registered with Apple
16
    clientId: process.env.EXPO_PUBLIC_APPLE_AUTH_SERVICE_ID ?? '',
17
18
    // Return URL added to your Apple dev console. We intercept this redirect, but it must still match
19
    // the URL you provided to Apple. It can be an empty route on your backend as it's never called.
20
    redirectUri: process.env.EXPO_PUBLIC_APPLE_AUTH_REDIRECT_URI ?? '',
21
22
    // The type of response requested - code, id_token, or both.
23
    responseType: appleAuthAndroid.ResponseType.ALL,
24
25
    // The amount of user information requested from Apple.
26
    scope: appleAuthAndroid.Scope.ALL,
27
28
    // Random nonce value that will be SHA256 hashed before sending to Apple.
29
    nonce: rawNonce,
30
31
    // Unique state value used to prevent CSRF attacks. A UUID will be generated if nothing is provided.
32
    state,
33
  })
34
35
  // Open the browser window for user sign in
36
  const credentialState = await appleAuthAndroid.signIn()
37
  console.log('Apple sign in successful:', credentialState)
38
39
  if (credentialState.id_token && credentialState.code && credentialState.nonce) {
40
    const signInWithIdTokenCredentials: SignInWithIdTokenCredentials = {
41
      provider: 'apple',
42
      token: credentialState.id_token,
43
      nonce: credentialState.nonce,
44
      access_token: credentialState.code,
45
    }
46
47
    const { data, error } = await supabase.auth.signInWithIdToken(signInWithIdTokenCredentials)
48
49
    if (error) {
50
      console.error('Error signing in with Apple:', error)
51
    }
52
53
    if (data) {
54
      console.log('Apple sign in successful:', data)
55
    }
56
  }
57
}
58
59
export default function AppleSignInButton() {
60
  if (Platform.OS !== 'android' || appleAuthAndroid.isSupported !== true) {
61
    return <></>
62
  }
63
64
  return (
65
    <AppleButton
66
      buttonStyle={AppleButton.Style.BLACK}
67
      buttonType={AppleButton.Type.SIGN_IN}
68
      onPress={() => onAppleButtonPress()}
69
    />
70
  )
71
}

1
import { supabase } from '@/lib/supabase'
2
import { CredentialResponse, GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google'
3
import { SignInWithIdTokenCredentials } from '@supabase/supabase-js'
4
import { useEffect, useState } from 'react'
5
6
import 'react-native-get-random-values'
7
8
export default function GoogleSignInButton() {
9
  // Generate secure, random values for state and nonce
10
  const [nonce, setNonce] = useState('')
11
  const [sha256Nonce, setSha256Nonce] = useState('')
12
13
  async function onGoogleButtonSuccess(authRequestResponse: CredentialResponse) {
14
    console.debug('Google sign in successful:', { authRequestResponse })
15
    if (authRequestResponse.clientId && authRequestResponse.credential) {
16
      const signInWithIdTokenCredentials: SignInWithIdTokenCredentials = {
17
        provider: 'google',
18
        token: authRequestResponse.credential,
19
        nonce: nonce,
20
      }
21
22
      const { data, error } = await supabase.auth.signInWithIdToken(signInWithIdTokenCredentials)
23
24
      if (error) {
25
        console.error('Error signing in with Google:', error)
26
      }
27
28
      if (data) {
29
        console.log('Google sign in successful:', data)
30
      }
31
    }
32
  }
33
34
  function onGoogleButtonFailure() {
35
    console.error('Error signing in with Google')
36
  }
37
38
  useEffect(() => {
39
    function generateNonce(): string {
40
      const array = new Uint32Array(1)
41
      window.crypto.getRandomValues(array)
42
      return array[0].toString()
43
    }
44
45
    async function generateSha256Nonce(nonce: string): Promise<string> {
46
      const buffer = await window.crypto.subtle.digest('sha-256', new TextEncoder().encode(nonce))
47
      const array = Array.from(new Uint8Array(buffer))
48
      return array.map((b) => b.toString(16).padStart(2, '0')).join('')
49
    }
50
51
    let nonce = generateNonce()
52
    setNonce(nonce)
53
54
    generateSha256Nonce(nonce).then((sha256Nonce) => {
55
      setSha256Nonce(sha256Nonce)
56
    })
57
  }, [])
58
59
  return (
60
    <GoogleOAuthProvider
61
      clientId={process.env.EXPO_PUBLIC_GOOGLE_AUTH_WEB_CLIENT_ID ?? ''}
62
      nonce={sha256Nonce}
63
    >
64
      <GoogleLogin
65
        nonce={sha256Nonce}
66
        onSuccess={onGoogleButtonSuccess}
67
        onError={onGoogleButtonFailure}
68
        useOneTap={true}
69
        auto_select={true}
70
      />
71
    </GoogleOAuthProvider>
72
  )
73
}