* docs(react-native): create the basic expo project * docs(react-native): cross-platform Apple social sign-in * docs(react-native): cross-platform Google social sign-in * docs(react-native): fix typos * docs(react-native): remove wrong entry in the `Connection` component * Correct typos * Prettier * Draft * Draft * docs(react-native): use kebab-case file naming convention in Expo guide - use kebab-case file naming convention in Expo guide - add trailing semicolon to align with the standard Expo template conventions * docs(react-native): use kebab-case file naming convention in Expo social auth example * docs(react-native): update the packages of the Expo social auth example * Fix * Draft * Changes * Correct log message --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { supabase } from '@/lib/supabase';
|
|
import type { SignInWithIdTokenCredentials } from '@supabase/supabase-js';
|
|
import * as AppleAuthentication from 'expo-apple-authentication';
|
|
import { router } from 'expo-router';
|
|
import { Platform, StyleSheet } from 'react-native';
|
|
|
|
async function onAppleButtonPress() {
|
|
// Performs login request
|
|
try {
|
|
const appleAuthRequestResponse = await AppleAuthentication.signInAsync({
|
|
requestedScopes: [
|
|
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
|
|
AppleAuthentication.AppleAuthenticationScope.EMAIL,
|
|
],
|
|
});
|
|
|
|
console.log('Apple sign in successful:', { appleAuthRequestResponse })
|
|
|
|
if (appleAuthRequestResponse.identityToken && appleAuthRequestResponse.authorizationCode) {
|
|
const signInWithIdTokenCredentials: SignInWithIdTokenCredentials = {
|
|
provider: 'apple',
|
|
token: appleAuthRequestResponse.identityToken,
|
|
access_token: appleAuthRequestResponse.authorizationCode,
|
|
}
|
|
|
|
const { data, error } = await supabase.auth.signInWithIdToken(signInWithIdTokenCredentials)
|
|
|
|
if (error) {
|
|
console.error('Error signing in with Apple:', error)
|
|
}
|
|
|
|
if (data) {
|
|
console.log('Apple sign in successful:', data)
|
|
router.navigate('/(tabs)/explore')
|
|
}
|
|
}
|
|
|
|
} catch (e: any) {
|
|
if (e.code === 'ERR_REQUEST_CANCELED') {
|
|
console.error('Error signing in with Apple:', e)
|
|
} else {
|
|
console.error('Error signing in with Apple:', e)
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function ExpoAppleSignInButton() {
|
|
if (Platform.OS !== 'ios') { return <></> }
|
|
|
|
return <AppleAuthentication.AppleAuthenticationButton
|
|
buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
|
|
buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
|
|
cornerRadius={5}
|
|
style={styles.button}
|
|
onPress={() => onAppleButtonPress()}
|
|
/>
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
button: {
|
|
width: 160, height: 45
|
|
},
|
|
});
|