Build React Native Fitness App #7 : Firebase Email and Password Authentication
Tags: reactnative
Published: 2020-02-02 12:41:47

---
title: Build React Native Fitness App #7 : Firebase Email and Password Authentication
published: true
date: 2020-02-02 12:40:07 UTC
tags: react-native
canonical_url: https://kriss.io/build-react-native-fitness-app-7-firebase-email-and-password-authentication/
cover_image: https://cdn-images-1.medium.com/max/1024/0*lOQI1BSNl5wDSHdi.png
series: Build React native Fitness app
---


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](http://instamobile.io/) from instamobile

this chapter we are going to implement email and password login after we success on registration part in the [previous section](https://kriss.io/build-react-native-fitness-app-6-firebase-email-authentication-integrate-formik-and-yup/) 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

![](https://cdn-images-1.medium.com/max/530/0*T-eFcCWqTOtol5Xb.png)

![](https://cdn-images-1.medium.com/max/578/0*nPjXIo4wgmFkIlnX.png)

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

![](https://cdn-images-1.medium.com/max/219/0*xR3BfzeOI7I51MxK.png)

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

![](https://cdn-images-1.medium.com/max/466/0*ipqcXaR_BwM0934b.gif)

then we can try the success case later

![](https://cdn-images-1.medium.com/max/466/0*mlSXRStMNb0XOqTY.gif)

#### 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/)_._

* * *