A screen to allow the user to create a new account for the application using their existing Google credentials. It usually takes between 10.8 and 13.2 hours and costs $900 to add Google Sign Up to an application.

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.
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.
"dependencies": {
"@react-native-community/google-signin": "^5.0.0",
"react-native-fbsdk": "1.1.2",
"@invertase/react-native-apple-authentication": "^2.1.0"
}
import SocialLogin from '../features/<module_directory>/';
Then, add it to the AppNavigator, as follows:
const AppNavigator = {
SocialLogin: { screen: SocialLogin.navigator },
//@BlueprintNavigationInsertion
...
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);
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).
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
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)
Similarly to Facebook, Google login should ideally be configured in the Google account that is going to manage everything related to this project (usually, the project owner). But for development purposes, it can temporarily be configured by anyone.
Before anything, open this file in your social login module /src/features/<your_social_login_module_name>/auth/utils.js and locate the variable GOOGLE_WEB_CLIENT_ID and update its value with the proper backend client id that you previously used to configure your SocialLogin - Backend module (Go to admin panel > Social Accounts > Social Applications, choose the Google application and copy the code in the Client Id field).
Ultimately, you need to follow the react-native/google-signin instructions to configure your app, but it will be provided steps in this README to accomplish this configuration for a Crowdbotics app.
keytool -list -v -keystore android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android
Read the documentation for more information.
Finish up and Download Client Configuration (you will need this information later).
<string name="server_client_id">XXXXX-XXXXXXXX.apps.googleusercontent.com</string>
...
implementation "com.facebook.react:react-native:+"
implementation(project(":react-native-community_google-signin"))
...
At the very end of the same file, add the line apply plugin: 'com.google.gms.google-services'.
buildscript {
ext {
buildToolsVersion = "29.0.2"
minSdkVersion = 16
compileSdkVersion = 29
targetSdkVersion = 29
googlePlayServicesAuthVersion = "16.0.1" // <- For Google Login
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.5.3")
classpath ('com.google.gms:google-services:4.1.0') // <- For Google Login
}
}
...
You can follow the official documentation to configure this, but below, brief steps will be provided.
...
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
pod 'GoogleSignIn', '~> 5.0.2'# ,_ Add this line HERE
...
Then, on terminal, navigate to <your_project_name>/ios/ folder and run:
pod install