Authentication in React Native using Firebase part 1

In this tutorial, we are going to implement Firebase authentication on a React Native app. This tutorial will be in two parts. In this first part, we will build a simple sign-in form, and in the next part, we will authenticate user sign-in with Firebase

Let’s get rolling… shall we?

Before we roll, make sure you have React-Native set up on your machine. You can visit this link to setup React-Native.

First, we create our project. We are going to call it Authenticator. Go to your terminal and type in the following command

react-native init Authenticator

The command above creates the react-native environment for the project and installs the necessary dependencies. Next, navigate to the newly created project.

cd Authenticator

Now we are in the project directory. You can run the app with the following command

react-native run-ios

or if you use an android simulator

react-native run-android

The system will run the build and when it is done you should see a default display as shown below. This shows that the project is set up and ready.

Next, we are going to build our components. In the project root directory, create a folder called src and inside the src folder, create another folder called components. This is where we will create all our react components. Inside the component folder, create three files and name themHeader.js Input.jsand LoginForm.js

Your folder structure should look like this

In the Header.js file, add the following code.

import React from 'react';
import { Text } from 'react-native';
const Header = (props) => {
  return (
    <Text style={styles.viewStyles}>{props.title}</Text>
  )
};
const styles = {
  viewStyles: {
    margin: 9,
    padding: 9,
    fontSize: 32,
    shadowColor: '#ddd',
    backgroundColor: '#f8f8f8',
    height: 60,
    paddingTop: 14,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    borderColor: '#fff',
    borderBottomWidth: 4,
  }
}
export default Header;

In the code above, we imported the Text component from react-native. React-native offers many built-in components which makes life easier for the mobile developer. We’ll see more of such components as we progress. So far, we have seen:

• Text — a component used to display texts on the screen.
• style — a prop used to apply the styles on containerStyles to the Text component
• props.title contains the text we want to display. We will pass the title from a parent component called App.js

Navigate to App.js in the root directory. Import the Header.js component into the App.js file like so.

import Header from './src/components/Header'

Locate the render method in the App class and replace it with the code.

render() {
    return (
      <View>
        <Header title='Authenticators' />
      </View>
    );
  }
}

Your final code should look like this

import React, { Component } from 'react';
import {View} from 'react-native';
import Header from './src/components/Header'
export default class App extends Component {
  render() {
    return (
      <View>
        <Header title='Authenticator' />
      </View>
    );
  }
}

We wrapped the Header component in a View tag for display. The View tag is equivalent to div in HTML. Notice how we pass the name of the header (“Authenticator”) to the title property. In the header component, it is read as props.title as we have previously seen.

Now, when you reload the simulator, you should see a nice little header. You can reload withcmd+r

Next, we create other components that will accept and submit the user input. Since we are creating a simple app, we will not create a distinct sign-in and sign up page. Rather, a sign-in page will serve the purpose of both signups and sign-ins. Yes, a two-in-one sign-in page.

For this, we need two components, Input.js and Loginform.js.In theInput.js file add the following code.

import React from 'react'
import { Text, View, TextInput } from 'react-native';
const input = (props) => {
  return (
    <View style={styles.viewStyles} >
      <Text style={styles.textStyles}> {props.label} </Text>
      <TextInput value={props.value} style={styles.textInputStyles}
        placeholder={props.placeholder}
        autoCorrect={false}
        secureTextEntry={props.secureTextEntry}
        onChangeText={props.onChangeText} 
      />
    </View>
  )
}
const styles = {
  viewStyles: {
    margin: 9,
    padding: 9,
    paddingTop: 14,
    borderColor: '#fff',
    height: 50,
    flex: 3,
    flexDirection: "row",
    alignItems: "center"
  },
  textStyles: {
    flex: 1,
    fontSize: 20
  },
  textInputStyles: {
    height: 50,
    flex: 2
  }
}
export default input;

This is a similar component to Header.js Notice we added separate styles for each of the components. TheTextInput is an input box for accepting user input. The purpose of the props are as follows:

• value — displays the value as the user types
• styles — styles the component
• autocorrect— prevents autocorrect assistance when the user types
• secureTextEntry— if set to true, it hides the user inputs.
• placeholder — displays a nice placeholder for the user
• onChageText — is triggered when there is a change in the input and calls a callback function.

All these props will be passed down from the parent component (LoginForm).

We create the LoginForm component wherein the Input component will be used. In theLoginForm.js file add the following code.

import React,{Component} from 'react';
import {View, Button } from 'react-native';
import Input from './Input';

export default class LoginForm extends Component{
  state = {email:'', password:''};
  return (
      <View>
        <Input label="Email"
          placeholder="user@mail.com"
          value={this.state.email}
          secureTextEntry={false}
          onChangeText={email => this.setState({ email })} 
          />
        <Input label="Password"
          placeholder="password"
          value={this.state.password}
          secureTextEntry={true}
          onChangeText={password => this.setState({ password })} 
          />

      <Button title="Sign in" onPress={() => ''} />
    </View>
    )
  }
}

Here we imported the Input component we created previously and also imported View and Button from react-native. In the render method, we called the Input tag twice for email and password respectively and passed in the props as required by the Input component. Let’s talk a bit more about the value and onChangeText props.

• onChangeText — when the user types in anything, a callback function is called which updates the state.
• value — for feedback to the user, the value which has been typed and stored in the state is displayed to the user.

We also rendered the Button component and passed in a title as a prop. This button is inert at the moment as can be seen from the anonymous callback function assigned to the onPress prop.

In the App.js import the LoginForm component like so

import LoginForm from './src/components/LoginForm'

Then update the render method to display the LoginForm component like so

<View>
   <Header title='Authenticator' />
   <LoginForm />
</View>

When you reload the simulator, you should see something similar to the image below.

Now we have a login page. In the next part of this tutorial, we are going to improve our code and add the firebase authentication.