@optisolbusiness/react-native-social-login
@optisolbusiness/react-native-social-login
Installation
npm i @optisolbusiness/react-native-social-login
Usage
import {
SocialLoginFacebook,
SocialLoginGmail,
SocialLoginLinkedin,
SocialLoginApple,
SocialLoginTwiter } from "@optisolbusiness/react-native-social-login";
// ...
<SocialLoginFacebook onResponse={onResponse} />
<SocialLoginGmail
onResponse={onResponse}
webClientId={
"141885507289-p184kodadu0ok5abtpj3av3f28atvcfq.apps.googleusercontent.com"
}
/>
<SocialLoginLinkedin
clientID="77qy8me13kppie"
clientSecret="hTx7dlg2Uw2dEFW9"
redirectUri="http://localhost:8081/auth/linkedin/callback"
onResponse={onResponse}
/>
<SocialLoginApple onResponse={onResponse} />
<SocialLoginTwiter onResponse={onResponse} />
Congiguration
1. Login With Google
install react-native-google-signIn dependency
npm install react-native-google-signin — save
Install Cocoa Pods cd ios && pod install && cd ..
Reference
https://github.com/react-native-google-signin/google-signin
Step 1: Create Firebase Project
A. Create Firebase Project on https://console.firebase.google.com/ B. Select android platform C. Enter the name of your package and SHA1 key→Register App following image shows a step to find a SHA1 key D. Download config file → move it to Android app module directory → go to Next
Step 2: Enable Google Login in Firebase
Authentication → Sign-In Method → Google
We need to give a name for your Auth consent screen and save your web client Id. This will be used to integrate the React Native app with Firebase.
Step 3: Implement Google auth functions in RN app
A. Google Login button
<SocialLoginGmail
onResponse={onResponse}
webClientId={
""
}
/>
2. Login With Facebook
$ npm install react-native-fbsdk –save
$ cd ios && pod install && cd ..
Step 1: Create a new App on Facebook console
reference
https://github.com/thebergamo/react-native-fbsdk-next
we need to register our app’s package/bundle name on Facebook Console viz. https://developers.facebook.com/
Update the basic details and adding a specific platforms -Add Android Platform -Add Facebook App Id in Android code -Enter some details inside Basic submenu of Dashboard: We need a keyHash using SHA1: For finding the SHA1 fingerprint you can click on below url and can generate a Release Key Hash or Debug Key Hash using Release SHA1 or Debug SHA1 respectively: For getting a Key Hashes, visit http://tomeko.net/online_tools/hex_to_base64.php
Add meta-data in the AndroidManifest.xml file
copy this AppId and paste it in string.xml ""
Step 2: Some platform specific changes in iOS code
For iOS plattform, we have to open iOS project in XCode and follow these steps: Right-click on the info.plist file→ Open As → select Source Code We can see info.plist file in the XML format. We have to replace the Facebook App Id here at two places. Open AppDelegate.m and add the following lines:
<SocialLoginFacebook onResponse={onResponse} />
3. Login With LinkedIn
Step 1: Create app on LinkedIn console
Reference
https://github.com/smuxx/react-native-linkedin
go to https://developer.linkedin.com/ and create an app and by filling some details given below:
After saving the above changes, we must add an app id in AndroidManifest file.
Enter the App name, url of your linkedIn page, privacy policy url, App logo. You will see a following screen:
Copy this ClientID. It’s showing “This app is not verified as being associated with this company” You need to verify this LinkedIn Page by following 1–3 steps:
<SocialLoginLinkedin
clientID=""
clientSecret=""
redirectUri=""
onResponse={onResponse}
/>
Step 2: Verify the App
Copy the Generate URL → Copy URL → Hit on browser It sends a verification code on your LinkedIn account.
Go to your LinkedIn account, click on Verify
After refreshing a page of linkedIn console, you will see it as a verified.
Select 2nd tab ’Auth’ and copy a Client ID and Client Secret
Step 3: Enable the LinkedIn Login option from Products list:
Now go to 3rd tab ‘Product’ and select an option Sign in with LinkedIn
Step 3: Enable the LinkedIn Login option from Products list:
npm install react-native-linkedin — save npm install react-native-webview –save cd ios && pod install && cd
<SocialLoginFacebook onResponse={onResponse} />
4. Login With Apple
Reference
https://github.com/invertase/react-native-apple-authentication
- Initial set-up
Import the appleAuth (API documentation) module and the AppleButton (API documentation) exported member element from the @invertase/react-native-apple-authentication library. Setup an event handler (onPress) to kick start the authentication request.
- Implement the login process
<SocialLoginApple onResponse={onResponse} />
5. Login with twiter
npm install react-native-login-twitter --save
Go to Twitter Apps to create your app so that you can obtain API key and secret, note:
Remember to set a Callback Url, whatever will work By default, Twitter won't allow you to grab user's email, so you have to apply for a permission for your app to retrieve user's email
iOS
// Info.plist CFBundleURLTypes CFBundleURLSchemes twitterkit- LSApplicationQueriesSchemes twitter twitterauth
usage
<SocialLoginTwiter onResponse={onResponse} />
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