React-Native authentication via email using firebase

Create “Sign Up” and “Sign In” flow in react-native app using firebase

Step:1 (App creation)
Create a react-native app using react-native init <AppName>

Step:2 (Installation of Dependencies)
Navigate to <AppName> folder and install the firebase dependencies
(a.) Install firebase using “npm install — save react-native-firebase”
(b.) After installation in MainApplication.java
import “import io.invertase.firebase.auth.RNFirebaseAuthPackage;”
and add package “packages.add(new RNFirebaseFirestorePackage());”

(c.) In android > build.gradle
add “ classpath ‘com.google.gms:google-services:4.3.3’ ” in buildscript > dependencies

(d.) In android > App > build.gradle
add “ apply plugin: ‘com.google.gms.google-services’ “ at the top
and “ implementation ‘com.google.firebase:firebase-auth:19.4.0’ ” in dependencies

Errors
1. If u get this error during making build
“ The number of method references in a .dex file cannot exceed 64K “
Then in “android > app > build.gradle” add
“multiDexEnabled true”
in
defaultConfig {
...

// Enabling multidex support.
multiDexEnabled true
}

Step 3 (Configuration in firebase)
Go to firebase console and create an app and download the google.service.json file

Step 4 (Add google service json)
Copy the downloaded google.service.json file in android>app folder

Step 5 (Importing firebase and initial setup)
Create a signup page and import firebase library

“ import firebase from ‘react-native-firebase’; ”

Add state variables for username and password

(Optional)
You can use flash message and Loader library
In this case we have used
“react-native-flash-message” and “react-native-spinkit”

Step 6 (Using firebase library for login and signup)
In signup use the firebase createUserWithEmailAndPassword method

firebase.auth()
.createUserWithEmailAndPassword(this.state.email, this.state.password)
.then((a) =>{
global.flashMessage =” Login successful”;
this.showFlash();
this.setState({
loader: false
})
})
.catch(error => {
console.log(error.message)
global.flashMessage = error.message;
this.showFlash();
this.setState({
loader: false
})
})

In signIn use the signInWithEmailAndPassword method

firebase.auth()
.signInWithEmailAndPassword(this.state.email, this.state.password)
.then((e) => {

this.setState({
loader: true
},()=>{
global.flashMessage = ‘Welcome back ‘+firebase.auth()._user.displayName ;
this.showFlash();

const currentUser = firebase.auth();
console.log(currentUser._user)
})
})
.catch((error) => {

global.flashMessage = error.message;
global.flashmessageType = ‘info’;
this.showFlash();
this.setState({
loader: false
})
console.log(‘error :::>>’+ error.message)
})

That’s it