rn-firebase-phone-auth v0.1.1

rn-firebase-phone-auth

login with phone using firebase

Installation

npm install rn-firebase-phone-auth

Dependencies

1.@react-native-firebase/app
2.@react-native-firebase/auth

Setup

////////////////////ANDROID SETUP START////////////////// 1.Login in firebase console. 2.Create a new project.Once you create a new project, you’ll see the dashboard. OR Open a existing project

3.Now, click on the Android icon to add an Android app to the Firebase project. 4.You will need the package name of the application to register application. You can find the package name in the AndroidManifest.xml which is located in android/app/src/main/ in key package. OR You can find the package name in the build.gradle which is located in android/app/
in key applicationId.

5.You will also need the Debug signing certificate SHA-1. Which you can find using android studio as mentioned below- a.Open your project in android studio b.Tap on Gradle icon which is present in right side(at the top) of android studio and it will display a menu c.Select root of your project>app>Run Configurations>android:appsigning Report d.Copy the SHA1 value of debug variant and paste it into the Firebase console.

6.Now, proceed to the next step, you can download the google-services.json file. You should place this file in the android/app directory. This file contains configurations that’ll enable your application to access firebase services.

7.After adding the file- First, add the google-services plugin as a dependency inside of your android/build.gradle file:

```bash
        buildscript {
        dependencies {
        // ... other dependencies
        //add this line
        classpath 'com.google.gms:google-services:4.3.3'
        }
        }
```
Then, execute the plugin by adding the following to your android/app/build.gradle file:
```bash
        //add this line
        apply plugin: 'com.google.gms.google-services'
```

8.Setting up Firebase Authentication(IN FIREBASE CONSOLE)- a.Head over to the Authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project. b.Next, you should enable phone authentication in the sign-in methods. Once you’ve enabled it. You can also add phone numbers for testing.Press Save.

9.Install required package-

    yarn add @react-native-firebase/app
                   or
    npm install @react-native-firebase/app

    yarn add @react-native-firebase/auth
                   or
    npm install @react-native-firebase/auth

10.Let’s declare the dependency for the authentication module in the android/app/build.gradle

        dependencies {
            // Add these lines
            implementation platform('com.google.firebase:firebase-bom:29.0.2')
            implementation 'com.google.firebase:firebase-auth'
        }

11.When reCAPTCHA is used for device verification, the application will open the browser for the reCAPTCHA test. So, we should also add implementation "androidx.browser:browser:1.2.0" in the android/app/build.gradle file.

        dependencies {
            implementation platform('com.google.firebase:firebase-bom:26.3.0')
            implementation 'com.google.firebase:firebase-auth'

            // Add this line
            implementation "androidx.browser:browser:1.2.0
        }

With this, the firebase authentication module is set up in our application.

///////////////////////ANDROID SETUP END ////////////////////

///////////////IOS SETUP START//////////////////////////////

1.Login in firebase console. 2.Create a new project.Once you create a new project, you’ll see the dashboard. OR Open a existing project 3.Now, click on the iOS icon to add an iOS app to the Firebase project. 4.Enter your projects details. The "iOS bundle ID" must match your local project bundle ID. The bundle ID can be found within the "General" tab when opening the project with Xcode. 5.Download the GoogleService-Info.plist file. 6.Using Xcode, open the projects /ios/{projectName}.xcworkspace. 7.Once project is open in xcode,Right click on the project name>> Add files to "ProjectName" 8.Select the downloaded GoogleService-Info.plist file from your computer, and ensure the "Copy items if needed" checkbox is enabled. ------Configure Firebase with iOS credentials------ 9.To allow Firebase on iOS to use the credentials, the Firebase iOS SDK must be configured during the bootstrap phase of your application.

To do this, open your /ios/{projectName}/AppDelegate.mm file (or AppDelegate.m if on older react-native), and add the following:

At the top of the file, import the Firebase SDK:

#import <Firebase.h>

Within your existing didFinishLaunchingWithOptions method, add the following to the top of the method:

 (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add me --- \/
  [FIRApp configure];
  // Add me --- /\
  // ...
}

10.The React Native app is going to use reCAPTCHA verification to verify a user. To set this up, open the file PROJECT_NAME/ios/PROJECT_NAME.xworkspace in Xcode. Double-click the project name in the left tree view and select the app from the TARGETS section. Then select the Info tab, and expand the URL Types section.

Click the + button, and add a URL scheme for your reversed client ID. To find this value, open the GoogleService-Info.plist configuration file, and look for the REVERSED_CLIENT_ID key. Copy the value of that key and paste it into the URL Schemes box on the configuration page. Leave the other fields blank.

11.Install required package-

    yarn add @react-native-firebase/app
                   or
    npm install @react-native-firebase/app

    yarn add @react-native-firebase/auth
                   or
    npm install @react-native-firebase/auth

That’s it for all the necessary configuration and setup.

//////////////////IOS SETUP END/////////////////////////

Usage

import RnPhoneSignIn from 'rn-firebase-phone-auth';

// ...

import React,{ useState } from 'react';
import auth from '@react-native-firebase/auth';
import {StyleSheet,Text, TouchableOpacity, View}from 'react-native';
import RnPhoneSignIn from 'rn-firebase-phone-auth';

interface User{
    countryFlag:string,
    countryCode:string,
    mobile:string,
    firebaseToken:string|undefined
}

const App=()=>{
    const defaultCountryFlag = useState('🇮🇳')[0];
    const defaultCountryCode = useState('+91')[0];
    const cellCount = useState(6)[0];
    const [loggedIn,setLoggedIn]=useState(false);
    const onSuccess=(data:User)=>{
        console.log("user data after successful login====",data);
        setLoggedIn(true);
    }

    const logout=async ()=>{
        await auth().signOut();
        setLoggedIn(false);
    }

    return(
        <View style={styles.container}>
        {loggedIn?
        <View style={styles.mainWrapper}>
         <TouchableOpacity style={styles.buttonWrapper}
         onPress={() => logout()}>
         <Text style={styles.buttonTitle}>Logout</Text>
       </TouchableOpacity>
       </View>:
        <RnPhoneSignIn
         defaultCountryFlag={defaultCountryFlag}
         defaultCountryCode={defaultCountryCode}
         cellCount={cellCount}
         onSuccess={onSuccess}
        />
        }
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
    flex: 1,
    },
    mainWrapper: {
    flex: 1,
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems:'center',
    width:'90%'
    },
    buttonWrapper: {
    alignSelf: 'center',
    backgroundColor: 'blue',
    borderRadius: 20,
    marginTop:10,
    },
    buttonTitle: {
    fontSize: 20,
    fontWeight: '400',
    color: 'white',
    paddingHorizontal: 30,
    paddingVertical: 3
    },
  });

export default App;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library