diff --git a/JSOnlyQuickstart/app/(auth)/sign-in.tsx b/JSOnlyQuickstart/app/(auth)/sign-in.tsx index e3c3d197..ecc36500 100644 --- a/JSOnlyQuickstart/app/(auth)/sign-in.tsx +++ b/JSOnlyQuickstart/app/(auth)/sign-in.tsx @@ -1,9 +1,36 @@ import { ThemedText } from '@/components/themed-text' import { ThemedView } from '@/components/themed-view' -import { useSignIn } from '@clerk/expo' +import { useSignIn, useSSO } from '@clerk/expo' +import type { OAuthStrategy } from '@clerk/shared/types' import { type Href, Link, useRouter } from 'expo-router' import React from 'react' -import { Pressable, StyleSheet, TextInput, View } from 'react-native' +import { ActivityIndicator, Pressable, StyleSheet, TextInput, View } from 'react-native' + +function SSOButton({ strategy, label }: { strategy: OAuthStrategy; label: string }) { + const { startSSOFlow } = useSSO() + const [loading, setLoading] = React.useState(false) + + const handleSSO = async () => { + setLoading(true) + try { + await startSSOFlow({ strategy }) + } catch (err) { + console.error(`[SSO ${strategy}]`, err) + } finally { + setLoading(false) + } + } + + return ( + [styles.ssoButton, pressed && styles.buttonPressed, loading && styles.buttonDisabled]} + onPress={handleSSO} + disabled={loading} + > + {loading ? : {label}} + + ) +} export default function Page() { const { signIn, errors, fetchStatus } = useSignIn() @@ -169,6 +196,8 @@ export default function Page() { {/* For your debugging purposes. You can just console.log errors, but we put them in the UI for convenience */} {errors && {JSON.stringify(errors, null, 2)}} + + Don't have an account? @@ -245,4 +274,12 @@ const styles = StyleSheet.create({ opacity: 0.5, marginTop: 8, }, + ssoButton: { + backgroundColor: '#4285F4', + paddingVertical: 12, + paddingHorizontal: 24, + borderRadius: 8, + alignItems: 'center', + marginTop: 8, + }, })