Social Login in React Native App
Posted By : Ashwini Kumar Gupta | 17-Dec-2020
In my previous blog, I have described the Social login and its benefit on our online business. In that blog, I have explained what is Social Media? What is Social Login and its various benefits? For detailed information, please take a look here.
How Does Social Login Work?
Step 1- The user selects the desired social media network.
Step 2- The system sends a login request to the selected social network.
Step 3- The user is asked to enter their login details (if they are not already logged in). Then, a pop-up asks you to inform the user that you would be collecting some information. Only after approval by the user, he is registered through his social media account.
Now I am going to show you how to integrate the google sign-in in our React Native application.
Google+ sign-in allows users to sign-in by your React Native app with their existing Google account and get their profile information like name, email, profile pic, and other details.
G+ integration is really advantageous as it provides users a fast and convenient way to register on your app, thus encouraging them to use it.
Features-
- Provides three methods of authentication viz. standard, with server-side validation or with offline access (aka server-side access)
- Has the consistency of Promise-based API between Android and iOS
- Typings for TypeScript and Flow
- Native sign in buttons
The react-native-google-signin is like an envelope around the official Google login library. It provides access to the users accessToken
and idToken
which are required to create a Firebase credential.
Project setup and initialization
For RN >= 0.60 please use version 3 installed from @react-native-community/google-signin
npm install @react-native-community/google-signin
For RN <= 0.59 use version 2 installed from react-native-google-signin
npm install react-native-google-signin
Steps for implementation:-
We can achieve Sign in by following two type
1. By Own Sign In Button
Step 1: Configure the library.
- The
configure
the method only needs to be called once during your app’s lifecycle. - Configuration settings can be obtained from here;
import { GoogleSignin, statusCodes } from '@react-native-community/google-signin';
async function bootstrap() {
await GoogleSignin.configure();
}
Step 2: Log in with Google
import { GoogleSignin, statusCodes } from '@react-native-community/google-signin';
.........
........
async googleLogin() {
try {
await GoogleSignin.signIn().then((data)=>{
-----------------------------
----------------------------
});
} catch (e) {
console.log(e);
showErrorToast(StringConstant.SOMETHING_WENT_WRONG);
}
}
Step 3: Parse response of GoogleSignin.signIn() to obtain current Google user profile information viz. name, email, profile pic, and other details.
Step 4: Call your domain Social Login API callSocialLoginAPI and validate Google User.
async googleLogin() {
try {
await GoogleSignin.signIn().then((data)=>{
this.callSocialLoginAPI(data.user, userId);
GoogleSignin.signOut();
});
} catch (e) {
console.log(e);
showErrorToast(StringConstant.SOMETHING_WENT_WRONG);
}
}
2. By Google Sign In Button
- import button
import { GoogleSignin, GoogleSigninButton } from '@react-native-community/google-signin'; -
Add button in our Component Button
render() {
<GoogleSigninButton
style={{ width: 192, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this._signIn}
disabled={this.state.isSigninInProgress} />
}
Conclusion :
It is better to include a user by Google+ via Social login in our React Native Applicaiton. The given library works for both Mobile Platforms Android & iOS as well on Web and well documented.
We, at Oodles Technologies, provide full-scale SaaS app development services to build scalable, responsive, and quality-driven web and mobile applications. Contact us for technical assistance or drop us a line at [email protected] for more detail.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ashwini Kumar Gupta
.He is the Lead Mobile Application Developer. Works on React Native and Native Android technology.