DEV Community

Cover image for Build React Native Fitness App #7 : Firebase Email and Password Authentication
kris
kris

Posted on • Originally published at kriss.io on

Build React Native Fitness App #7 : Firebase Email and Password Authentication

This tutorial is seventh chapter of series build fitness tracker this app use for track workouts, diets, or health activities and analyze data and display suggestion the ultimate goal is to create food and health recommendation using Machine learning we start with creating app that user wants to use and connect to google health and apple heath for gathering everything to create dataset that uses for train model later I start with ultimate goal. Still, we will start to create react native app and set up screen navigation with React navigation. inspired by React native template from instamobile

this chapter we are going to implement email and password login after we success on registration part in the previous section we start by import react-native Firebase, Formik, Yup then add validation message lasting send an authentication request to Firebase if success we immediately redirect to next screen

Get started

import to three packages that we want to use to LoginScreen.js

import firebase from 'react-native-firebase'
import {Formik} from 'formik';
import \* as yup from 'yup';

next start define validation schema

const LoginSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email')
    .required('Email is Required'),
  password: Yup.string()
    .required('Password is required')
    .min(6, 'Password must be at least 6 characters'),
});

next, integrate Formik to Form following code below

<Formik
         initialValues={{email: '', password: ''}}
         onSubmit={(values, {setSubmitting}) => {
           this.Login(values, this.props.navigation);
           setSubmitting(false);
         }}
         validationSchema={LoginSchema}>
         {formikProps => (
           <React.Fragment>
             <View style={styles.wrapper}>
               <Input
                 leftIcon={
                   <Icon
                     name="md-mail"
                     type="ionicon"
                     color="rgba(110, 120, 170, 1)"
                     size={25}
                   />
                 }
                 onChangeText={formikProps.handleChange('email')}
                 placeholder="Email"
                 inputContainerStyle={styles.input}
                 placeholderTextColor="grey"
                 autoCapitalize="none"
                 autoCorrect={false}
                 keyboardType="email-address"
                 returnKeyType="next"
               />
               {formikProps.errors.email ? (
                 <Text style={{color: 'red'}}>
                   {formikProps.errors.email}
                 </Text>
               ) : null}
               <Input
                 leftIcon={
                   <Icon
                     name="lock"
                     color="rgba(110, 120, 170, 1)"
                     size={25}
                   />
                 }
                 onChangeText={formikProps.handleChange('password')}
                 inputContainerStyle={styles.input}
                 placeholderTextColor="grey"
                 placeholder="Password"
                 autoCapitalize="none"
                 secureTextEntry={true}
                 autoCorrect={false}
                 keyboardType="default"
                 returnKeyType="next"
               />
               {formikProps.errors.password ? (
                 <Text style={{color: 'red'}}>
                   {formikProps.errors.password}
                 </Text>
               ) : null}
             </View>
             <View style={styles.socialWrapper}>
               <Text style={styles.signinwith}>Sign in with</Text>
               <View style={styles.socialLogin}>
                 <SocialIcon type="facebook" light />
                 <SocialIcon type="google" light />
                 <SocialIcon type="twitter" light />
               </View>
               <Button
                 title="Login"
                 loading={false}
                 loadingProps={{size: 'small', color: 'white'}}
                 buttonStyle={{
                   backgroundColor: '#7265E3',
                   borderRadius: 15,
                 }}
                 titleStyle={{fontWeight: 'bold', fontSize: 23}}
                 containerStyle={{
                   marginVertical: 10,
                   height: 50,
                   width: 300,
                 }}
                 onPress={formikProps.handleSubmit}
                 disabled={!(formikProps.isValid && formikProps.dirty)}
                 underlayColor="transparent"
               />
               <TouchableOpacity
                 onPress={() =>
                   this.props.navigation.navigate('ForgotPasswordScreen')
                 }>
                 <Text h5 style={{textAlign: 'center', color: 'blue'}}>
                   Forgot Password?
                 </Text>
               </TouchableOpacity>
             </View>
           </React.Fragment>
         )}
       </Formik>

see the same result because we did not touch anything on the layout

next, we create a function for the handle Authentication function

Login = (values, navigation) => {
  firebase
    .auth()
    .signInWithEmailAndPassword(values.email, values.password)
    .then(response => {
      let {user} = response;
      this.setState({user});

      alert('Registration success');
      setTimeout(() => {
        navigation.navigate('HomeScreen');
      }, 2000);
    })
    .catch(err => {
      alert(err);
    });
};

next, we create HomeScreen for handle redirect after login success

create HomeScreen.js

then add blank class

import React, {Component} from 'react';
import {Text, View} from 'react-native';

export class HomeScreen extends Component {
  render() {
    return (
      <View>
        <Text> HomeScreen </Text>
      </View>
    );
  }
}

export default HomeScreen;

then add to Navigator

const StackNavigator = createStackNavigator(
  {
    IntroScreen: IntroScreen,
    LoginScreen: LoginScreen,
    EmailInputscreen: EmailInputscreen,
    PasswordInputScreen: PasswordInputScreen,
    HomeScreen: HomeScreen,
  },
  {
    initialRouteName: 'LoginScreen',
  },
);

now we can try to do fail case first

then we can try the success case later

Conclusion

this short chapter shows how to create a simple login form with Formik. And handle validation with Yup .Then we submit the form to Firebase authentication service and store user data to state then redirect to Home Screen. For the next chapter, we implement the forgot password with Firebase again.

Originally published at [_Kriss](https://kriss.io/build-react-native-fitness-app-7-firebase-email-and-password-authentication/)._


Discussion (0)