Using Firebase Authentication (SDK 9) with Expo (v 8.5.0) - firebase

Question

For the past week I have been encountering an error which is as follows: auth/invalid-email Firebase: Error (auth/invalid-email). To my understanding and to other Stacks and much time researching this, and using ChatGPT (no, it didn't work) the configuration file is correct and my code is correct, but clearly it isn't. I have gone over the Firebase docs several times, and it seems to check out, but again, clearly it doesn't. Anywho, here is the the firebaseConfig.js file (copied directly from Firebase docs).
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "myAPI Key",
authDomain: "myAuth Domain",
projectId: "myProjectID",
storageBucket: "myStorageBucket",
messagingSenderId: "myMessageSenderID",
appId: "myAppID",
measurementId: "myMeasurementID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
export { auth };
Obviously, for security purposes I have an actual API Key where it belongs in the configuration.
Now here is where I believe my issue is, which is in the SignIn.js file.
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../firebaseConfig";
export default function Home() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
let signIn = () => {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
console.log(user);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode, errorMessage);
alert(errorMessage);
});
}
return (
<>
<Button title="Sign In" onPress={signIn} st />
<TextInput
style={tw`pl-4 h-12 w-80 border-black border-2 rounded-xl`}
placeholder="Email"
onChange={text => setEmail(text)}
value={email}
/>
<TextInput
style={tw`mt-4 pl-4 h-12 w-80 border-black border-2 rounded-xl`} placeholder="Password"
onChange={text => setPassword(text)}
value={password}
secureTextEntry={true}
/>
</>
);
}
Again, please keep in mind I am using expo. Additionally, here are the following dependencies, and versions I have installed to the root directory:
"dependencies": {
"#expo-google-fonts/open-sans": "^0.2.2",
"#expo-google-fonts/open-sans-condensed": "^0.2.2",
"expo": "~47.0.12",
"expo-app-loading": "~2.1.1",
"expo-font": "~11.0.1",
"expo-status-bar": "~1.4.2",
"firebase": "^9.16.0",
"react": "18.1.0",
"react-native": "0.70.5",
"tailwind-react-native-classnames": "^1.5.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
},
EDIT: Not sure if it matters to let you know or not, but I am using metro as it was mentioned to use on the expo docs for firebase. Here is the the metro.config.js file
const { getDefaultConfig } = require('#expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push('cjs');
module.exports = defaultConfig;

Answer 1

So after reading it over and over and doing even more research the code I had was correct. However, there was an error coming from the SignIn.js file specifically from the <TextInputs> Instead of doing onChange={text => setEmail(text)} it should be onChangeText={text => setEmail(text)}. The reason for this is the onChangeText, to my understanding is that it recalls the function for every new text is entered/updated.
For more information about onChange vs. onChangeTextis at this Stack which explains the major difference.