social login

implemented, we can add more providers later

apps/mobile/src/app/(auth)/sign-in.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState, useEffect } from "react";
 import { useSignIn, useAuth } from "@clerk/clerk-expo";
 import { useRouter } from "expo-router";
 import {
@@ -12,19 +12,20 @@ import {
   Platform,
   ScrollView,
 } from "react-native";
+import { OAuthButtons } from "../../components/auth/OAuthButtons";
 
 export default function SignInScreen() {
   const { signIn, setActive, isLoaded } = useSignIn();
   const { isSignedIn } = useAuth();
   const router = useRouter();
 
-  const [emailAddress, setEmailAddress] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState("");
+  const [emailAddress, setEmailAddress] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
 
   // Redirect if already signed in
-  React.useEffect(() => {
+  useEffect(() => {
     if (isSignedIn) {
       router.replace("/(tabs)");
     }
@@ -64,7 +65,7 @@ export default function SignInScreen() {
 
       setError(
         err.errors?.[0]?.message ||
-          "Failed to sign in. Please check your credentials.",
+        "Failed to sign in. Please check your credentials.",
       );
     } finally {
       setLoading(false);
@@ -100,6 +101,14 @@ export default function SignInScreen() {
             </View>
           ) : null}
 
+          <OAuthButtons />
+
+          <View style={styles.dividerContainer}>
+            <View style={styles.dividerLine} />
+            <Text style={styles.dividerText}>OR</Text>
+            <View style={styles.dividerLine} />
+          </View>
+
           <View style={styles.form}>
             <View style={styles.inputContainer}>
               <Text style={styles.label}>Email</Text>
@@ -256,4 +265,19 @@ const styles = StyleSheet.create({
     color: "#2563eb",
     fontWeight: "600",
   },
+  dividerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: "#ddd",
+  },
+  dividerText: {
+    marginHorizontal: 10,
+    color: "#666",
+    fontSize: 14,
+  },
 });

apps/mobile/src/app/(auth)/sign-up.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState, useEffect } from "react";
 import { useSignUp, useAuth } from "@clerk/clerk-expo";
 import { useRouter } from "expo-router";
 import {
@@ -12,23 +12,24 @@ import {
   Platform,
   ScrollView,
 } from "react-native";
+import { OAuthButtons } from "../../components/auth/OAuthButtons";
 
 export default function SignUpScreen() {
   const { signUp, setActive, isLoaded } = useSignUp();
   const { isSignedIn } = useAuth();
   const router = useRouter();
 
-  const [emailAddress, setEmailAddress] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [firstName, setFirstName] = React.useState("");
-  const [lastName, setLastName] = React.useState("");
-  const [pendingVerification, setPendingVerification] = React.useState(false);
-  const [code, setCode] = React.useState("");
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState("");
+  const [emailAddress, setEmailAddress] = useState("");
+  const [password, setPassword] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [pendingVerification, setPendingVerification] = useState(false);
+  const [code, setCode] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
 
   // Redirect if already signed in
-  React.useEffect(() => {
+  useEffect(() => {
     if (isSignedIn) {
       router.replace("/(tabs)");
     }
@@ -182,6 +183,14 @@ export default function SignUpScreen() {
             </View>
           ) : null}
 
+          <OAuthButtons />
+
+          <View style={styles.dividerContainer}>
+            <View style={styles.dividerLine} />
+            <Text style={styles.dividerText}>OR</Text>
+            <View style={styles.dividerLine} />
+          </View>
+
           <View style={styles.form}>
             <View style={styles.inputContainer}>
               <Text style={styles.label}>First Name</Text>
@@ -372,4 +381,19 @@ const styles = StyleSheet.create({
     color: "#2563eb",
     fontWeight: "600",
   },
+  dividerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: "#ddd",
+  },
+  dividerText: {
+    marginHorizontal: 10,
+    color: "#666",
+    fontSize: 14,
+  },
 });