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,
+ },
})