From baab800a1ce37464d973b6b8b426069ec9d58d74 Mon Sep 17 00:00:00 2001
From: Loewy <loewy@chainstarters.com>
Date: Thu, 8 Feb 2024 12:32:20 -0800
Subject: [PATCH] working with email on create user / sign in -- not getting
 expected error from firebase

---
 src/auth/firebase-auth.tsx | 14 ++++++++++++++
 src/screens/login.tsx      | 38 ++++++++++++++++++++++++++------------
 src/screens/profile.tsx    |  5 +++--
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/auth/firebase-auth.tsx b/src/auth/firebase-auth.tsx
index ea49c31..e394843 100644
--- a/src/auth/firebase-auth.tsx
+++ b/src/auth/firebase-auth.tsx
@@ -30,6 +30,20 @@ export const confirmCode = async (
 	}
 };
 
+	
+export const createOrSignInUser = (email: string, password: string, isSignUp: boolean) => {
+	console.log('isSignUp', isSignUp);
+	try {
+		if (isSignUp) {
+			auth().createUserWithEmailAndPassword(email, password)
+		} else {
+			auth().signInWithEmailAndPassword(email, password)
+		}
+	} catch (err) {
+		
+	}
+}
+
 export const onAuthStateChanged = (
 	// TODO: eslint not detecting ts?
 	// eslint-disable-next-line no-unused-vars
diff --git a/src/screens/login.tsx b/src/screens/login.tsx
index fa37c4b..7c9d961 100644
--- a/src/screens/login.tsx
+++ b/src/screens/login.tsx
@@ -7,25 +7,28 @@ import {
 	Switch,
 	Text,
 	TextInput,
+	TouchableOpacity,
 	TouchableWithoutFeedback,
 	View,
 } from "react-native";
 import { confirmCode, handleSignInWithPhoneNumber } from "../auth";
+import { createOrSignInUser } from "../auth/firebase-auth";
 
 export default function Login() {
 	const [isEmailLogin, setIsEmailLogin] = useState(false);
-	const [phoneNumber, setPhoneNumber] = useState<string>("");
-	const [code, setCode] = useState<string>("");
-	const [email, setEmail] = useState<string>("");
-	const [password, setPassword] = useState<string>("");
-	const [confirm, setConfirm] =
-		useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
-
 	const toggleSwitch = () => setIsEmailLogin((previousState) => !previousState);
 
-	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-	const handleSignInWithEmail = (email: string, password: string) =>
-		console.log("signingInWithEmail");
+	// Phone number
+	const [phoneNumber, setPhoneNumber] = useState<string>("");
+	const [code, setCode] = useState<string>("");
+	const [confirm, setConfirm] =
+		useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
+  
+	// Email
+	const [isSignUp, setIsSignUp] = useState<boolean>(false)
+	const [email, setEmail] = useState<string>("");
+	const [password, setPassword] = useState<string>("");
+	const toggleSignUp = () => setIsSignUp(!isSignUp);
 
 	return (
 		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
@@ -94,11 +97,16 @@ export default function Login() {
 							value={password}
 							onChangeText={setPassword}
 						/>
+						<TouchableOpacity onPress={toggleSignUp}>
+							<Text style={styles.linkText}>
+								{isSignUp ? 'Already have an account? Sign In' : "Don't have an account? Sign Up"}
+							</Text>
+        		</TouchableOpacity>
 
 						<View style={styles.buttonContainer}>
 							<Button
-								title="Sign in"
-								onPress={() => handleSignInWithEmail(email, password)}
+								title={isSignUp ? 'SignUp' : 'Sign in'}
+								onPress={() => createOrSignInUser(email, password, isSignUp)}
 							/>
 						</View>
 					</>
@@ -130,6 +138,12 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 		marginBottom: 20,
 	},
+	linkText: {
+    fontSize: 16,
+    color: '#007AFF',
+    paddingVertical: 10,
+    textAlign: 'center',
+  },
 	buttonContainer: {
 		width: "80%",
 		borderRadius: 25,
diff --git a/src/screens/profile.tsx b/src/screens/profile.tsx
index d0cbb65..a1c65cd 100644
--- a/src/screens/profile.tsx
+++ b/src/screens/profile.tsx
@@ -7,14 +7,15 @@ import { useAuth } from "../context";
 // Sign out button only functional when NOT using dev env
 export default function ProfileScreen() {
 	const { user } = useAuth();
+	console.log(user)
 
 	return (
 		<View style={styles.container}>
 			{user && (
 				<>
 					<View style={styles.userInfo}>
-						<Text>Display name: {user?.displayName}</Text>
-						<Text>Phone number: {user?.phoneNumber}</Text>
+						<Text>Display name: {user?.displayName ?? 'No username set'}</Text>
+						<Text>Phone number/Email: {user?.phoneNumber ?? user?.email}</Text>
 					</View>
 					<View style={styles.signOutButton}>
 						<SignOutButton />