Social login integration in React Native apps

Ajith V
2 min readJun 15, 2021

--

Social login helps users to log in to the app without spending much time filling the forms, It’s a must feature in modern mobile applications. In this blog, I integrate Google login with the help of React Native Firebase,react-native-google-signin.

1.First install the firebase module

npm install — save @react-native-firebase/app

2.Then Create an ios project and download the configuration file GoogleService-Info.plist from firebase

URL: https://console.firebase.google.com/

3.Open Xcode and add the file to the project

4.Open AppDelegate.m

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 {

if ([FIRApp defaultApp] == nil) {

[FIRApp configure];}}

5.Enable google login within authentication in firebase

Goto firebase =>authentication=>sign in providers

Enable Google

6.Install authentication module

yarn add @react-native-firebase/auth

cd ios/ && pod install

7.Now open app.js

import auth from ‘@react-native-firebase/auth’;

// Set an initializing state with Firebase connects

const [initializing, setInitializing] = useState(true);

const [user, setUser] = useState();

// Handle user state changes

function onAuthStateChanged(user) {

setUser(user);

if (initializing) setInitializing(false);

}

useEffect(() => {

const subscriber = auth().onAuthStateChanged(onAuthStateChanged);

return subscriber; // unsubscribe on unmount

}, []);

8.Install the google-login module

yarn add @react-native-google-signin/google-signin

9.install the Google Sign-in SDK with CocoaPods: add pod ‘GoogleSignIn’, ‘~> 5.0.2’ in your Podfile and run pod install

10.pod repo update

11.Configure URL types in the Info panel

import { GoogleSignin } from ‘@react-native-google-signin/google-signin’;

GoogleSignin.configure({webClientId: ‘’,});

import { GoogleSignin } from ‘@react-native-google-signin/google-signin’;

async function onGoogleButtonPress() {

// Get the users ID token

const { idToken } = await GoogleSignin.signIn();

// Create a Google credential with the token

const googleCredential = auth.GoogleAuthProvider.credential(idToken);

try {

let loginUser = await auth().signInWithCredential(googleCredential);

setGoogleLogin(true);

} catch (error) {

setGoogleLogin(false);}}

12.install pod and run the app npx pod-install ,npx react-native run-ios

Github : https://github.com/Ajithmanali/react-native-google-login.git

--

--

Ajith V
Ajith V

Written by Ajith V

Technology enthusiast focussing on building high-performance hybrid solution

No responses yet