DEV Community

Cover image for React native App firebase email authentication signup
sreehari k
sreehari k

Posted on

React native App firebase email authentication signup

`
function Login({ navigation }) {

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [emailPlaceholder, setEmailPlaceholder]=useState('Email id');
const [passworPlaceholder, setPasswordPlaceholder]=useState('Password');

const signup = () => {
    if(email !='' && password !=''){
        auth().createUserWithEmailAndPassword(email, password).then((res)=>{
            navigation.navigate('Home')
            console.log('response', res)
        })
        .catch((error)=>{
            console.log('Error:', error);
            Alert.alert(error.message);
        })
    }else if(email == ''){
        // Alert.alert('email cannot be empty')
        setEmailPlaceholder('email cannot be empty')
    }else if(password == ''){
        setPasswordPlaceholder('password cannot be empty')
    }
}

const login = () => {
    auth().signInWithEmailAndPassword(email,password).then((res)=>{
        navigation.navigate('Home')
        console.log('response', res)
    }).catch((error)=>{
        console.log('error',error)
    })
}

return (
    <View style={styles.container}>
        <TextInput style={styles.userInput} placeholder={emailPlaceholder}
            placeholderTextColor={'#3e4f6b'} value={email}
            onChangeText={setEmail} keyboardType='email-address' />

        <TextInput style={styles.userInput} placeholder={passworPlaceholder}
            placeholderTextColor={'#3e4f6b'} value={password}
            onChangeText={setPassword} secureTextEntry={true} />

        <View style={styles.buttonView}>
            <TouchableHighlight style={styles.button}
                onPress={signup} >
                <Text style={styles.buttonText}>Sign up</Text>
            </TouchableHighlight>
            <TouchableHighlight style={styles.button}
                onPress={login}>
                <Text style={styles.buttonText}>Login</Text>
            </TouchableHighlight>
        </View>

    </View>
)
Enter fullscreen mode Exit fullscreen mode

}
`

Top comments (0)