React Native With Firebase — Part 2

Hello Again… In Part 1, we set up the firebase backend and the front end. In this section, we create a simple app for user authentication. We already created DemoProject in Part 1.

Firebase provides lots of features like Realtime Database, Hosting, Authentication, Storage, Cloud Messaging, etc. But in this section, we use the Authentication feature. So let's start…

Set up Authentication

1. Go to the Authentication section from the navigation drawer

2. Navigate to the second tap “Sign-in method”

3. Click on “Email/Password” section

4. Then enable the first one switch and click on save button. Now the “Email/Password” option is enabled.

5. Now click on the “Users” section, You will show the no users are registered. So now we register the user using firebase library.

User Registration

For user registration, create signup.js file and design the UI according to user expectations Or simply take two TextInput and Login Button.

constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
render() {
  return (
    <View>
      <TextInput
        placeholder="Enter email"
        keyboardType='email-address'
        value={this.state.email}
        onChangeText={email => this.setState({email})}
      />
      <TextInput
        placeholder="Enter password”
        secureTextEntry={true}
        value={this.state.password}
        onChangeText={password => this.setState({password})}
      />
      <TouchableOpacity onPress={this.actionOnSignUpButton}>
         <Text>Sign Up</Text>
      </TouchableOpacity>
    </View>
  );
}

And now we perform the action on the Sign-Up button. Put your code just below the render method

actionOnSignUpButton() {
    const { email, password } = this.state;
    try {
      firebase.auth().createUserWithEmailAndPassword(email, password).then(data => {
          console.log("User Data", data);
        })
        .catch(error => {
          console.log(error);
        });
    } catch (error) {
      console.log(error.toString());
    }
}

Here, your user is registered successfully, Now to the browser and navigate to the “User” section. One new entry inserted into the user section with the UID.

That's it!!! 😊 Use was registered.

Now using the registered Email and Password, we try to log in the user in the following topic.

User Login

For user login, create the filelogin.js and the login UI. Or you can use the same sign up UI.

constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
render() {
  return (
    <View>
      <TextInput
        placeholder="Enter email"
        keyboardType='email-address'
        value={this.state.email}
        onChangeText={email => this.setState({email})}
      />
<TextInput
        placeholder="Enter password”
        secureTextEntry={true}
        value={this.state.password}
        onChangeText={password => this.setState({password})}
      />
<TouchableOpacity onPress={this.actionOnLoginButton}>
         <Text>Sign Up</Text>
      </TouchableOpacity>
    </View>
  );
}

UI is done and now perform the login action on a button. Use the below code for user login.

actionOnLoginButton() {
    const { email, password } = this.state;
     try {
      firebase.auth().signInWithEmailAndPassword(email, password).then(data => {
          console.log("User Data", data);
        })
        .catch(error => {
          console.log(error);
        });
    } catch (error) {
      console.log(error);
    }
  }

Now the user is logged in successfully 😊.

User Log Out

For logout, put the below code on log out button.

userLogOut() {
    firebase.auth().signOut().then( () => {
        console.log('User logged out successfully ');
    }).catch((error) => {
      console.log(error);
    });
}

Done with Firebase Authentication 😍. If you have any questions regarding Authentication feel free to put your comments.

Thank you 😊 and Happy Coding 😍