Build a Social Sign-in 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 { createClient } from '@supabase/supabase-js'
2
import { deleteItemAsync, getItemAsync, setItemAsync } from 'expo-secure-store'
3
4
const ExpoSecureStoreAdapter = {
5
  getItem: (key: string) => {
6
    console.debug('getItem', { key, getItemAsync })
7
    return getItemAsync(key)
8
  },
9
  setItem: (key: string, value: string) => {
10
    if (value.length > 2048) {
11
      console.warn(
12
        'Value being stored in SecureStore is larger than 2048 bytes and it may not be stored successfully. In a future SDK version, this call may throw an error.'
13
      )
14
    }
15
    return setItemAsync(key, value)
16
  },
17
  removeItem: (key: string) => {
18
    return deleteItemAsync(key)
19
  },
20
}
21
22
export const supabase = createClient(
23
  process.env.EXPO_PUBLIC_SUPABASE_URL ?? '',
24
  process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY ?? '',
25
  {
26
    auth: {
27
      storage: ExpoSecureStoreAdapter as any,
28
      autoRefreshToken: true,
29
      persistSession: true,
30
      detectSessionInUrl: false,
31
    },
32
  }
33
)

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 type { SignInWithIdTokenCredentials } from '@supabase/supabase-js'
3
import { useEffect, useState } from 'react'
4
import AppleSignin, { type AppleAuthResponse } from 'react-apple-signin-auth'
5
import { Platform } from 'react-native'
6
7
export default function AppleSignInButton() {
8
  const [nonce, setNonce] = useState('')
9
  const [sha256Nonce, setSha256Nonce] = useState('')
10
11
  async function onAppleButtonSuccess(appleAuthRequestResponse: AppleAuthResponse) {
12
    console.debug('Apple sign in successful:', { appleAuthRequestResponse })
13
    if (
14
      appleAuthRequestResponse.authorization &&
15
      appleAuthRequestResponse.authorization.id_token &&
16
      appleAuthRequestResponse.authorization.code
17
    ) {
18
      const signInWithIdTokenCredentials: SignInWithIdTokenCredentials = {
19
        provider: 'apple',
20
        token: appleAuthRequestResponse.authorization.id_token,
21
        nonce,
22
        access_token: appleAuthRequestResponse.authorization.code,
23
      }
24
25
      const { data, error } = await supabase.auth.signInWithIdToken(signInWithIdTokenCredentials)
26
27
      if (error) {
28
        console.error('Error signing in with Apple:', error)
29
      }
30
31
      if (data) {
32
        console.log('Apple sign in successful:', data)
33
      }
34
    }
35
  }
36
37
  useEffect(() => {
38
    function generateNonce(): string {
39
      const array = new Uint32Array(1)
40
      window.crypto.getRandomValues(array)
41
      return array[0].toString()
42
    }
43
44
    async function generateSha256Nonce(nonce: string): Promise<string> {
45
      const buffer = await window.crypto.subtle.digest('sha-256', new TextEncoder().encode(nonce))
46
      const array = Array.from(new Uint8Array(buffer))
47
      return array.map((b) => b.toString(16).padStart(2, '0')).join('')
48
    }
49
50
    let nonce = generateNonce()
51
    setNonce(nonce)
52
53
    generateSha256Nonce(nonce).then((sha256Nonce) => {
54
      setSha256Nonce(sha256Nonce)
55
    })
56
  }, [])
57
58
  if (Platform.OS !== 'web') {
59
    return <></>
60
  }
61
62
  return (
63
    <AppleSignin
64
      authOptions={{
65
        clientId: process.env.EXPO_PUBLIC_APPLE_AUTH_SERVICE_ID ?? '',
66
        redirectURI: process.env.EXPO_PUBLIC_APPLE_AUTH_REDIRECT_URI ?? '',
67
        scope: 'email name',
68
        state: 'state',
69
        nonce: sha256Nonce,
70
        usePopup: true,
71
      }}
72
      uiType="dark"
73
      onSuccess={onAppleButtonSuccess}
74
      onError={(error: any) => console.error('Apple sign in error:', error)}
75
    />
76
  )
77
}