How to set individual names for individual accounts? I have tried to set input boxes for user to type name when registering but after I have register and I did a console log. It says undefined. How do I solve this?
My code for RegisterScreen.js (Part of it)
import { StyleSheet, Text, View, KeyboardAvoidingView, TextInput, TouchableOpacity } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';
import { createUserWithEmailAndPassword } from "firebase/auth"
import { useState } from 'react'
import { auth } from '../firebase'
import { signOut } from 'firebase/auth'
const RegisterScreen = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [name, setName] = useState('')
const [showError, setShowError] = useState(false);
const navigation = useNavigation()
const handleSignUp = async () => {
try {
if (email && password) {
setShowError(false);
const { user } = await createUserWithEmailAndPassword(auth, email, password, name)
console.log('Registered as :' , user.name);
try{
await signOut(auth)
console.log("Signed out successfully")
navigation.replace("Login")
}catch (error) {
console.log({error});
}
}
} catch (error) {
console.log({error});
setShowError(true);
}
}
return (
<KeyboardAvoidingView //To prevent keyboard from blocking the writing area
style={styles.container}
behavior = "padding"
>
<View style = {styles.inputContainer}>
<Text>Email:</Text>
<TextInput
placeholder = "Email"
value={email}
onChangeText ={text => setEmail(text)}
style = {styles.input}
/>
<Text></Text>
<Text>Password:</Text>
<TextInput
placeholder = "Password (Min: 6 chars)"
value={password}
onChangeText ={text => setPassword(text)}
style = {styles.input}
secureTextEntry //Hide password
/>
<Text>Name:</Text>
<TextInput
placeholder = "Name"
value={name}
onChangeText ={text => setName(text)}
style = {styles.input}
/>
</View>
{showError && <View style={styles.error}>
<Text>Username or password not valid</Text>
</View>}
<View style = {styles.buttonContainer}>
<TouchableOpacity
onPress = {handleSignUp}
style = {styles.button}
>
<Text style={styles.buttonText}>Register</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
)
}
As stated in the code, I did the following line console.log('Registered as :' , user.name);
and the console returned me as Registered as undefined
. How do I correct my code to extract what the user has type for the name and also to save the name for the account in firebase?
If anyone can help with this, thank you very much !