Firebase is a platform for building iOS, android as well as web-based apps like in React Native. it offers storage, real-time database, authentication and user-notification, Crash Reporting,   Cloud FirestoreCloud FunctionsHostingPerformance MonitoringTest Lab for Android  etc. To know more about firebase go to firebase doc.

Firebase 3.x SDK , authentication part of the SDK was not supported. Firebase 3.1.0 SDK release replace the use of browser-specific APIs that supports again with React Native.

I am going to create very simple app for authentication using firebase. If user have already account, he can sign-in else user need to signup. You can find complete the code on GitHub , you can clone the project. Inside the project directory run command npm install  then run the app using the react-native run-android.  Follow the following instruction for complete setup.


Firebase Setup

Step 1:– Go to Firebase Setup . Login if you are not. or  Go to and click on Go to Console on the top right of the Screen. You need to make sure you are using latest version of firebase.

Step 2:-  Create new project. Fill up your project name and region name.


Step 3:-  Click on Add Firebase to your web app.


Step 4:-   After clicking Add Firebase to your web app,  a dialog box will be open. There is all credential like apiKey, authDomain, databaseURL, ProjectId, storageBucket  just copy that it will used in react-native project.


Step 5:- Inside the project, click to Authentication which is left side of screen. Click on SIGN-IN METHOD and enable the Email/Password option.


Step 6:-  After successfully signup you can see all the account on USERS tab.


Create  React-Native project.

The complete code for the Firebase Authentication app is on github.

Note:- You have to need to replace the firebaseconfiguration. To get the firebaseconfiguration you need to follow the above steps of firebase setup.

Step 1:- Create a new React-Native Project  using command. If you have not set up the environment you can setup from here

 react-native init  firebaseAuth

Step 2:- Install npm firebase.

npm install –save firebase

Step 3:-  Install npm react-navigation

npm install –save react-navigation

Step 4:- Create folder app inside the project. Inside the app folder create two folder.

  • app/component

Step 5:- Create the following files.

  • app/component/LoginPage.js
  • App.js

Step 6:- Replace the index.js with following code.


import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('firebaseAuth', () => App);

Step 7:- App.js  

In this file, replace firebase configuration (
apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId) inside the componentWillMount() function.

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Config from 'react-native-config';
import firebase from 'firebase';
import LoginPage from './app/component/LoginPage';

class App extends Component {
    componentWillMount() {
            apiKey: 'AIzaSyBkP3ovBefuls9MTZ9X176MqORlVqAlpck',
            authDomain: '',
            databaseURL: '',
            projectId: 'reactfirebase-e69e0',
            storageBucket: '',
            messagingSenderId: '470892154345'
    render() {
        return (
              <LoginPage />

export default App;

Step 8:-  app/component/LoginPage.js

Firebase provide the signInWithEmailAndPassword() method to sign-in and createUserWithEmailAndPassword() method to signup.

import React, { Component } from 'react';
import { View, Button, TextInput, TouchableOpacity, Text, Spinner } from 'react-native';
import firebase from 'firebase';

class LoginPage extends Component {
  constructor(props) {
    this.state = {
     email: '',
     password: '',
     error: ''
   this.onLoginPress= this.onLoginPress.bind(this);

  onLoginPress() {
        this.setState({ error: '', loading: true });
        const { email, password } = this.state;
        firebase.auth().signInWithEmailAndPassword(email, password)
            .then(() => { alert('Successful login') })
            .catch(() => {
                //Login was not successful, let's create a new account
                firebase.auth().createUserWithEmailAndPassword(email, password)
                    .then(() => { alert("Successfully Created new account") })
                    .catch(() => {
                       alert('Something wrong') 

  render() {
    return (
           <Text style={styles.title} >Login with Firebase </Text>
             style={{height: 40}}
             onChangeText={(email) => this.setState({email})}
             placeholder="Enter your email"
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(password) => this.setState({password})}
            placeholder="Enter your password"
           <TouchableOpacity onPress={this.onLoginPress}>
             <View style={styles.loginView}>
               <Text style={styles.loginText}>LogIn/Signup</Text>
const styles = {
    errorTextStyle: {
      color: '#E64A19',
      alignSelf: 'center',
      paddingTop: 10,
      paddingBottom: 10
    loginView: {
      margin: 20,
      height: 40,
      alignItems: 'center',
      justifyContent: 'center',
    loginText: {
      color: '#fff',
    title: {
      alignSelf: 'center',
      margin: 40,
      fontSize: 20,
export default LoginPage;

Feel free to comment if you have any issue.

Leave a Reply

Your email address will not be published. Required fields are marked *