Build Google Sign Up Component for Your App

Learn how to add Google Sign Up functionality to your custom React Native and Django app with Crowdbotics.

What is the Google Sign Up component and how much does it cost?

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.

How does the Google Sign Up component work?

This feature is used to allow end users to register themselves with the application using their Google account. It contains a button to navigate and verify that a user agrees to use their Google account to sign up with the app.

What is the Google Sign Up component used for?

Here are some common Google Sign Up user stories in a custom app build:

As a new user, I would like to use my Google account to register with the app.

Google Sign Up component README file

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",
...

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 Google Login

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.

Configure your Google Cloud account to access the console, and to start a quick setup of an API project, visit https://developers.google.com/identity/sign-in/android/start#configure-a-google-api-project and click on Configure a Project. Then follow the instructions for each application type below.

Android Configuration

There, you will choose to create a new project (or use an existing one, if desired). Follow the instructions, filling out the product name, choosing Android as your OAuth client and filling out the form. There are two values to fill out here: One is your Package Name which can be found in your AndroidManifest, as described in the Facebook step; the other is SHA-1 signing certificate: to get a debug/development key store, type on your app console:

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).

Open the file <your_project_name>/android/app/src/main/res/values/strings.xml and insert the string with the generated client ID. For example, if the generated client ID on Google is XXXXX-XXXXXXXX.apps.googleusercontent.com, then you should add the string and save:

<string name="server_client_id">XXXXX-XXXXXXXX.apps.googleusercontent.com</string>

Open the <your_project_name>/android/app/build.gradle file and find the line of code with implementation "com.facebook.react:react-native:+". Below this line, add the google signing implementation implementation(project(":react-native-community_google-signin")) and save. It should look like this:

...
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'.

Now open the file <your_project_name>/android/build.gradle, find the buildscript object: you will add at the end of the ext value a googlePlayServicesAuthVersion = "16.0.1" and at the end of dependencies the value classpath ('com.google.gms:google-services:4.1.0'). It should look like this:

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
}
}
...

iOS Configuration (Mac and access to XCode Required)

You can follow the official documentation to configure this, but below, brief steps will be provided.

At The google console (as explained in previous steps), create or use an existing Google Project. At the window Configure your OAuth client, choose the iOS option. Visit XCode and find your Bundle Identifier (as explained at the iOS Facebook tutorial) and click Create. Download your client configuration and save the Client ID for later.
Open your project on XCode, double-click in the project name in the left tree view. Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section. Locate the + button and add the REVERSED CLIENT ID as your URL scheme. The reversed client ID is your client ID with the order of the dot-delimited fields reversed. From the documentation, as an example, if you have a client id as 1234567890-abcdefg.apps.googleusercontent.com, you should enter in your URL Schemes as com.googleusercontent.apps.1234567890-abcdefg.
Similarly to Facebook, you will need to add google services to your project's Podfile at <your_project_name>/ios/Podfile. You should add the following pod 'GoogleSignIn', '~> 5.0.2':

...
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

Lastly, open the file src/features/<your_module_folder>/auth/utils.js inside your installed module and change the value for the variable GOOGLE_IOS_CLIENT_ID with your own ios client id.

‍

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the Google Sign Up component.

Full Google Sign Up component code

import React from 'react';
import {
  View,
  ImageBackground,
  Image,
  Text,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { BACKGROUND_URL, LOGO_URL } from './screens/constants.js';
import {
  apiLoginRequest,
  apiSignupRequest,
  apiFacebookLogin,
  apiGoogleLogin,
  apiAppleLogin,
} from './auth/actions';
import reducer from './auth/reducers';
import { styles } from './screens/styles';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import {
  createNavigator,
  createAppContainer,
  TabRouter,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import { SignIn, SignUp } from './screens/loginsignup';
import PasswordReset from './screens/reset';
import UserDemo from './screens/redirect-demo';

// Tabs
const LoginTabBar = ({ navigation }) => {
  const { routes, index } = navigation.state;
  const currentTab = routes[index];
  return (
    <View style={styles.tabStyle}>
      {routes.map(route => (
        <View
          key={route.routeName}
          style={
            route.routeName == currentTab.routeName
              ? styles.activeTabStyle
              : null
          }>
          <TouchableOpacity
            onPress={() => navigation.navigate(route.routeName)}
            accessibilityLabel="{route.routeName}">
            <Text style={styles.tabStyle}>{route.params.name}</Text>
          </TouchableOpacity>
        </View>
      ))}
    </View>
  );
};

// Main View
const SocialLoginSignupView = ({ navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = navigation.router.getComponentForState(navigation.state);
  return (
    <ScrollView style={[styles.container]}>
      <KeyboardAwareScrollView contentContainerStyle={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <View style={styles.imageContainer}>
            <ImageBackground
              source={{
                uri: BACKGROUND_URL,
              }}
              style={{
                flex: 1,
                justifyContent: 'center',
                resizeMode: 'cover',
                height: '100%',
                width: '100%',
              }}>
              <Image
                source={{
                  uri: LOGO_URL,
                }}
                style={{
                  width: 155,
                  height: 155,
                  alignSelf: 'center',
                  resizeMode: 'contain',
                }}
              />
            </ImageBackground>
          </View>
        </View>
        <View style={[styles.cardView]}>
          <LoginTabBar navigation={navigation} />
          <View style={styles.tabContainerStyle}>
            <ActiveScreen
              navigation={{
                ...navigation,
                state: routes[index],
              }}
            />
          </View>
        </View>
      </KeyboardAwareScrollView>
    </ScrollView>
  );
};

const LoginSignupRouter = TabRouter(
  {
    Login: {
      screen: SignIn,
      path: 'login',
      params: { name: 'Sign In' },
    },
    SignUp: {
      screen: SignUp,
      path: 'signup',
      params: { name: 'Sign Up' },
    },
  },
  {
    initialRouteName: 'Login',
  },
);

const SocialLoginSignup = createAppContainer(
  createNavigator(SocialLoginSignupView, LoginSignupRouter, {}),
);

export const SocialLoginNavigator = createStackNavigator(
  {
    LoginSignup: {
      screen: SocialLoginSignup,
    },
    PasswordReset,
    UserDemo,
  },
  {
    initialRouteName: 'UserDemo',
    defaultNavigationOptions: ({ navigation }) => ({ header: null }),
  },
);

export default {
  name: 'socialLogin',
  navigator: SocialLoginNavigator,
  slice: {
    reducer,
    actions: [
      apiLoginRequest,
      apiSignupRequest,
      apiFacebookLogin,
      apiGoogleLogin,
      apiAppleLogin,
    ],
  },
};

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the Google Sign Up component.

Recommended components for you

Facebook Sign Up

User Profile

Articles

Login and Signup

Splash Screen

Onboarding Slides

All component categories

Add this feature to your project

Snap Google Sign Up into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add Google Sign Up to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Google Sign Up functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building

Search All Components: