I am new to firebase authentication. I am creating a react native app. I am using createUserWithEmailAndPassword for signing up new user. I have attached an event handler to handle the submission of form which fires the function onRegister. I wish to make use of the promise object that is returned from createUserWithEmailAnPassword.
When trying to debug using chrome, debugger does not move into the try block(password is more than 6 digits and email is also valid). The app freezes. The console log I have written in the try block is also not printed. But, in my firebase console, a new user is created.
If I pass an invalid password, the code within the catch block is triggered. The app dosent freeze.
How to prevent the app from freezing and make use of the object being returned from createUserWithEmailAndPassword?
export default function Register(props) {
let state = {
email: "",
password: "",
name: "",
};
async function onRegister() {
const { email, password, name } = state;
try {
const res = await createUserWithEmailAndPassword(auth, email, password);
const user = res.user;
console.log(user);
} catch (err) {
console.error(err);
alert(err.message);
}
}
return (
<View>
<TextInput
placeholder="name"
onChangeText={(name) => (state.name = name)}
/>
<TextInput
placeholder="email"
onChangeText={(email) => (state.email = email)}
/>
<TextInput
placeholder="password"
secureTextEntry={true}
onChangeText={(password) => (state.password = password)}
/>
<Button onPress={() => onRegister()} title="Sign Up" />more tmore
</View>
);
}
This worked for me
import auth from '@react-native-firebase/auth';
export default class App extends React.Component{
constructor(props){
super(props);
this.onSignUpPressed = this.onSignUpPressed.bind(this);
this.state = {
email: '',
password: '',
passwordError: '',
emailError: '',
secureTextEntry: true,
}
}
emailValidator = (email) => {
const re = /\S+@\S+\.\S+/;
if (!email || email.length <= 0) return 'Email cannot be empty.';
if (!re.test(email)) return 'Ooops! We need a valid email address.';
return '';
};
passwordValidator = (password) => {
if (!password || password.length <= 0) return 'Password cannot be empty.';
return '';
};
async onSignUpPressed(){
const emailError = this.emailValidator(this.state.email);
const passwordError = this.passwordValidator(this.state.password);
if (emailError || passwordError) {
this.setState({
emailError: emailError,
passwordError: passwordError
})
return;
}
const {email, password} = this.state;
await auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
console.log(user)
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage)
});
};
render(){
const {email, password, passwordError, emailError, secureTextEntry} = this.state;
return(
<View>
<TextInput
placeholder="Email"
value={email}
error={!!emailError}
errorText={emailError}
placeholderTextColor="#666666"
onChangeText={(email) => this.setState({email})}
/>
<TextInput
placeholder="Password"
placeholderTextColor="#666666"
error={!!passwordError}
errorText={passwordError}
value={password.value}
secureTextEntry={secureTextEntry ? true : false}
onChangeText={(password) => this.setState({password})}
/>
<Button onPress={this.onSignUpPressed} title='SignUp'/>
</View>
)}
}