Social Login - Frontend Module

This is React Native code for social login feature. FOr this feature to be fully functional, you will need to install and configure Social Login - Backend module.

Initial Setup

In this section, for every mention of <module_directory>, consider the directory name of this module installed in your app. For example, if the SocialLogin module has a folder/directory with name SocialLogin12345, then that's what you should use to replace <module_directory>.

When you are finished with the setup, do not forget to commit all changed and created files to the GitHub project, so the module can be successfully deployed on Crowdbotics platform.

1. Install the following required dependencies (by modifying the project's package.json file under the dependencies section and add the dependencies manually):

"dependencies": {
"@react-native-community/google-signin": "^5.0.0",
"react-native-fbsdk": "1.1.2",
"@invertase/react-native-apple-authentication": "^2.1.0"
}

2. Open the /src/navigator/mainNavigator.js file and import the login navigator in the import section as shown:

import SocialLogin from '../features/<module_directory>/';

Then, add it to the AppNavigator, as follows:

const AppNavigator = {
SocialLogin: { screen: SocialLogin.navigator },
//@BlueprintNavigationInsertion
...

3. Add reducers to the store. Open /src/store/index.js file and add the following imports:

import socialLoginSaga from '../features/<module_directory>/auth/sagas';
import socialLoginReducer from '../features/<module_directory>/auth/reducers';

Locate the store creation with createStore, add comma at end of the last reducer (possibly customReducer) and ADD below the following code socialLogin: socialLoginReducer.

This is how your createStore should look like after modifications:

const store = createStore(
combineReducers({
  apiReducer: apiReducer,
  customReducer: customReducer,
  socialLogin: socialLoginReducer,
}),
composeEnhancers(applyMiddleware(...middlewares))
);

Near the end, before the export { store } line, register the new sagas sagaMiddleware like this:

sagaMiddleware.run(socialLoginSaga);

4. Change the login screen destination to your desired screen/module (likely Home screen).

To do that, open the screens/constants.js file and edit the HOME_SCREEN_NAME value with the desired destination module. For example, if my home screen is called HomeScreen1234535, then I should change as follows: export const HOME_SCREEN_NAME = 'HomeScreen1234535'. If you desire, you can also update your logo image URL (be mindful that the size of the image should match the original ones for ideal results).

5. Make sure your backend support SENDGRID for emailing (optional)

If your app's backend does not have SENDGRID environmental variables available, make changes to project backend settings (in /backend/YOUR_PROJECT_NAME/settings.py file) like below:

EMAIL_HOST = env.str("EMAIL_HOST", "smtp.sendgrid.net")
EMAIL_HOST_USER = env.str("SENDGRID_USERNAME", "")
EMAIL_HOST_PASSWORD = env.str("SENDGRID_PASSWORD", "")

If this code already exists, you can just skip this step.

Next, you need to configure your own sendgrid credentials. Reference website: Sendgrid Once configured, add the sendgrid credential information to your project's environment variables.

Using the Crowdbotics Dashboard, navigate to "Settings" and select the tab "Environment Variables", here you will add the following variables:

SENDGRID_USERNAME
SENDGRID_PASSWORD

STEP 6: Update api url (optional)

If you have renamed your app through the Crowdbotics platform, you might need to change the reference url of your deployed app that is used to execute the api requests. To find out if you need to update, go to the file src/config/app.js and locate the emailAuthAPIEndPoint. If the value is your app's back-end url, then you do not need to change anything. If your current back-end url is different that what is shown there, update accordingly.

For example, after renaming my app from loginapp to personalapp, the code needs to be changed from:

export const appConfig = {
emailAuthAPIEndPoint: "https://loginapp-123.botics.co",
...

to

export const appConfig = {
emailAuthAPIEndPoint: "https://personalapp-123.botics.co",
...

Note for developers: you can access the user token through the reducer state (i.e. state.socialLogin.token and user auth information like email at state.socialLogin.user)

Configuring Facebook

You need to set up Facebook SDK to get social login properly configured in your app. Ideally, these steps should be done by the project owner or with an project owner account, as it needs to be properly configured for app store release, but it can be done with debug configuration during the development phase.

Ultimately, you need to follow the react-native-fbsdk instructions to configure your app, but it will be provided steps in this README to accomplish this configuration for a Crowdbotics app.

1. First, access Facebook for developers at https://developers.facebook.com and register for a developer account, if you do not already have one.
2. After that, access the your facebook apps page and choose to create a Facebook app. For the purpose of social login, you could choose the build connected experiences upon facing the question "What do you need your app to do?" and click continue (as shown below). In the next page, type in the name of your app, contact email and, if existing, business manager account for the app and click Create App:

3. After creation, go to your app's dashboard and look for an option to set up a social login product to your app. The url should look like this: https://developers.facebook.com/apps/<your_facebook_app_id>/fb-login/quickstart/. There, choose the Android option (for your Android app) and iOS option (for your iOS app configuration).

Android Configuration

Upon entering the Android page on the Facebook login configuration, you can click next/continue for most steps. But you will need to pay attention to the following steps:

• 3. Tell Us about Your Android Project Here, they will ask for two things: Package Name and Default Activity Class Name. Your package name is located on <your_project_name>/android/app/src/main/AndroidManifest.xml file, at the first and second line of code as <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="<your_package_name>">. For my test app, this name is: com.social_login_1234.

For activity class name, just add a .MainApplication to your package name. For example, the tutorial application will have the follwing values:

• Package Name: com.social_login_1234
• Default Activity Class Name: com.social_login_1234.MainApplication

• 4. Add Your Development and Release Key Hashes At this step, you need to generate the key hash for your app. Consult the official documentation for more information on how to create a development or production key hash and insert the appropriate value for your Key Hashes and save.
• 6. Edit Your Resources and Android Manifest This step will tell you which files in your project to edit. /app/res/values/strings.xml is equivalent to <your_project_name>/android/app/src/main/res/values/strings.xml

Update your Android manifest file (/android/app/src/main/AndroidManifest.xml) and add <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> code to the metadata section. It should look like this:

<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="XXXXXXX"/>
<!-- Add this line below:  -->
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>

After everything, open the file <your_project_name>/android/app/build.gradle look for defaultConfig object and add multiDexEnabled true. It will look something like this:

...
  defaultConfig {
      applicationId "com.social_login_test_0_18906"
      minSdkVersion rootProject.ext.minSdkVersion
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
      multiDexEnabled true
  }
...

iOS Configuration (Mac and access to XCode Required)

Upon entering the Android page on the Facebook login configuration, there will be a question Set up your development environment before using Facebook Login for iOS.. Answer this by picking the dropdown option for SDK: Cocoapods. From there, follow the provided instructions. At this step, you should basically change the file <your_project_name>/ios/Podfile and add pod 'FBSDKLoginKit' and pod 'FBSDKCoreKit' after the last pod command and save. It should look like this:

...
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
pod 'FBSDKCoreKit' # <- Add this line HERE
pod 'FBSDKLoginKit' # <- Add this line HERE
...

Then, on terminal, navigate to <your_project_name>/ios/ folder and run:

pod install

Make sure that you have all the package.json dependencies installed before running the command above (consult the main README.md for the project for more information).

In the next step 2. Add your Bundle Identifier, open your project on xcode.

1. Go to xcode and choose to open a project
2. Open the <your-Project_name>/ios/<your_project_name>.xcworkspace file.
3. Click on your project's name on the left side bar and look for Bundle identifier. You can update it to something like com.crowdbotics.<your_app_name>. In this tutorial, our app is named social-login-1234, so our identifier would be com.crowdbotics.social-login-1234. You can update this later.

Copy this value and paste in the Facebook configuration field for bundle ID.

Go to step 4. Configure Your Info.plist and follow all the instructions.

Finally, open your project again on XCode, find the root folder of the XCode project, click on the right button of your mouse and select to create a New File. Choose it to be a Swift file and click create, as shown in the images below:

XCode will ask about Bridging Folder, just choose the option Create Bridging Folder. You are all set up for iOS deployment now!