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_ANON_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 (credentialState === appleAuth.State.AUTHORIZED && appleAuthRequestResponse.identityToken && appleAuthRequestResponse.authorizationCode) {
22
    const signInWithIdTokenCredentials: SignInWithIdTokenCredentials = {
23
      provider: 'apple',
24
      token: appleAuthRequestResponse.identityToken,
25
      nonce: appleAuthRequestResponse.nonce,
26
      access_token: appleAuthRequestResponse.authorizationCode,
27
    };
28
29
    const { data, error } = await supabase.auth.signInWithIdToken(signInWithIdTokenCredentials);
30
31
    if (error) {
32
      console.error('Error signing in with Apple:', error);
33
    }
34
35
    if (data) {
36
      console.log('Apple sign in successful:', data);
37
      router.navigate('/(tabs)');
38
    }
39
  }
40
}
41
42
export default function AppleSignInButton() {
43
  if (Platform.OS !== 'ios') { return <></>; }
44
45
  return <AppleButton
46
    buttonStyle={AppleButton.Style.BLACK}
47
    buttonType={AppleButton.Type.SIGN_IN}
48
    style={{ width: 160, height: 45 }}
49
    onPress={() => onAppleButtonPress()}
50
  />;
51
}

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) { return <></> }
61
62
  return <AppleButton
63
    buttonStyle={AppleButton.Style.BLACK}
64
    buttonType={AppleButton.Type.SIGN_IN}
65
    onPress={() => onAppleButtonPress()}
66
  />;
67
}

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
10
  // Generate secure, random values for state and nonce
11
  const [nonce, setNonce] = useState('');
12
  const [sha256Nonce, setSha256Nonce] = useState('');
13
14
  async function onGoogleButtonSuccess(authRequestResponse: CredentialResponse) {
15
    console.debug('Google sign in successful:', { authRequestResponse });
16
    if (authRequestResponse.clientId && authRequestResponse.credential) {
17
      const signInWithIdTokenCredentials: SignInWithIdTokenCredentials = {
18
        provider: 'google',
19
        token: authRequestResponse.credential,
20
        nonce: nonce,
21
      };
22
23
      const { data, error } = await supabase.auth.signInWithIdToken(signInWithIdTokenCredentials);
24
25
      if (error) {
26
        console.error('Error signing in with Google:', error);
27
      }
28
29
      if (data) {
30
        console.log('Google sign in successful:', data);
31
      }
32
    }
33
  }
34
35
  function onGoogleButtonFailure() {
36
    console.error('Error signing in with Google');
37
  }
38
39
  useEffect(() => {
40
    function generateNonce(): string {
41
      const array = new Uint32Array(1);
42
      window.crypto.getRandomValues(array);
43
      return array[0].toString();
44
    }
45
46
    async function generateSha256Nonce(nonce: string): Promise<string> {
47
      const buffer = await window.crypto.subtle.digest('sha-256', new TextEncoder().encode(nonce));
48
      const array = Array.from(new Uint8Array(buffer));
49
      return array.map(b => b.toString(16).padStart(2, '0')).join('');
50
    }
51
52
    let nonce = generateNonce();
53
    setNonce(nonce);
54
55
    generateSha256Nonce(nonce)
56
      .then((sha256Nonce) => { setSha256Nonce(sha256Nonce) });
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
}