No More Password Hassles: Google Sign-In for Your React Native App on Mac

No comments


Implementing Google Authentication in a React Native application on a Mac without using Expo involves several steps, including setting up your project on Google Cloud Platform and Firebase, configuring your React Native environment, and making the necessary adjustments in Xcode. This article will guide you through each of these steps in detail.

You need to first setup your code base. You can follow below tutorial regarding setup of react native

No More Platform Worries: One Codebase, Two Apps (iOS & Android)

Step 1: Setting up Google Cloud Platform

1. Create a New Project:

Go to Google Cloud Console.
Image 1

Click on Project mentioned with red arrow on above image. On clicking, it open a modal.

Click on NEW PROJECT mentioned on above image. It will open a page.

Write your Project Name as shown on above image and click CREATE button. It will redirect to Welcome screen with project creation status.

Now if we click on Project (Refer image 1) , it will open a modal with your newly created project name mentioned on below image.

Click on your newly created project. It will open newly created project welcome page.

Click on APIs & Services shown on above screen. It will open below mentioned page. Make sure your Project name is mentioned in header of the page.

Now click on Credentials 1st , it will redirect to Credentials page and then 2nd click on CREATE CREDENTIALS as mentioned on below image.

Now click on Oauth client ID as shown on below screen.

Now it has open a screen, that says that we have not created a consent screen yet. Click on the CONFIGURE CONSENT SCREEN button as mentioned in below screen:

It will open Oauth consent screen . Chose External and then click on CREATE button.

It will open App registration page. Write your App name, User support email, upload your app logo

also write url link of your Application’s home page, give link of privacy policy, give link of terms of service, write your Authorized domain , write email address of developer and press SAVE AND CONTINUE button.

Now it will redirect to Scopes. Click on ADD OR REMOVE SCOPES as shown on below screen.

Now you can choose scopes which you required from user on login. scope is users, name, email, age , profile pic etc. Choosen scopes I have marked in as point 1 and 2 in red color and then click on UPDATE button and then click on SAVE and CONTINUE button.

Now it will open Test users page. Click on ADD USERS button as mentioned in below image.

You can insert list of email address that you will use on development of google login. After adding your single or multiple emails click on SAVE AND CONTINUE button.

Now it will redirect to Summary page as shown on below image.

Now click on Credentials and then Click on CREATE CREDENTIALS and then choose OAuth client ID.

It will open Create Oauth client ID page . Click on Application type which will open lists.

Choose Web application.

On selecting Web application it will open some more fields. Fill the name, Authorised redirect url. Authorised redirect url is usually required on web application to redirect to a page after google login.

Now click CREATE button as shown on image below.

Now it will popup with a modal which display Client ID and Client secret of your google auth project.

Note down your Client ID and Client secret.

Step 2: Get Bundle Identifier of your IOS Apps :

The Bundle Identifier serves as a unique identifier for your app within the iOS ecosystem. When integrating Google OAuth, this unique identifier ensures that the authentication process is securely tied to your specific application. This is essential for maintaining the integrity and security of the authentication process.

To proceed you must have react native app . You can check below article on how to create an app in react native .

Developing a Cross-Platform Mobile App on macOS: A Guide to Using React Native and Node.js Without Expo

1. Go to ios folder of your react native app. It should have files and folder as mentioned in below mentioned. Name of my app here is ReactGAuth .

2 Right click on ReactGAuth.xcodeproj . In your case instead of ReactGAuth it will have your app name.

Click on Open With and then Click on Xcode as mentioned in below image.

It will open your app on Xcode. Click on your App name shown on below image. In my case I have clicked on ReactGAuth.

It will open multiple tabs. Click on General Tab. In General Tab you can see your apps Bundle Identifier.

You can see it in below image.

In my case my Apps Bundle Identifier is org.reactjs.native.example.ReactGAuth

You can also edit the name of your Bundle Identifier.

To edit click on the right arrow as mentioned on below image.

Write your new Bundle Identifier name as shown on below image.

As you can see I have edited Bundle Identifier name to org.reactjs.native.zahiralam.ReactGAuth

To save click on any other part of xcode.

Step 3: React Native Project Configuration for Android

A) Gradle Configuration:

1. Open android/build.gradle and below lines in dependencies:

 
classpath 'com.google.gms:google-services:4.4.1'  // Google Services plugin

Your final android/build.gradle usually looks something like this:

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 21
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "25.1.8937393"
        kotlinVersion = "1.8.0"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
        // Add the Google Services classpath here
        classpath 'com.google.gms:google-services:4.4.1' // Use the latest version available
    }
}

apply plugin: "com.facebook.react.rootproject"

You can get Google Services latest version from below mentioned:

https://maven.google.com/web/index.html

2. Apply the Google Services plugin in your android/app/build.gradle file by adding the following line at the bottom of the file:

apply plugin: 'com.google.gms.google-services'

3. Ensure you have the necessary dependencies for Google Sign-In in the same android/app/build.gradle file:

implementation 'com.google.android.gms:play-services-auth:21.0.0'

similar way you can get latest version of play-services-auth from https://maven.google.com/web/index.html

Your final android/app/build.gradle will looks something like this:

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

react {
    
}

def enableProguardInReleaseBuilds = false

def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion

    namespace "com.gloginandroid"
    defaultConfig {
        applicationId "com.gloginandroid"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    implementation("com.facebook.react:flipper-integration")
    implementation 'com.google.android.gms:play-services-auth:21.0.0' // Add this line

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
apply plugin: 'com.google.gms.google-services'

B) Find Android package name:

Go to android/app/src/main/java/com

Go to your project name, in my case it is reactgauth. Open MainActivity.kt

At top you can see your package name. In my case it is ‘com.reactgauth‘.

Note down your package name.

C) Get SHA-1 Fingerprint of your App:

Inside your project go to android folder and type below command

./gradlew signingReport

Note down SHA1.

Step 4: Setting up Firebase :

1. Go to Firebase Console. Click on Add project as shown on below image.

It will show below screen. On clicking ‘Enter your project name’ input , it will show list of Google cloud projects. Select project which you have created from ‘Step 1: Setting up Google Cloud Platform’. In my case I have Choosen ReactGAuth as shown on below screen. And click on Continue.

It will open below screen. Click on Continue.

It will display Google Analytics configuration setup. Choose default account for Firebase and Click Add Firebase as shown on below image.

It will show a project ready message . Click Continue as shown on below image.

It will redirect to your project. In my case it is ReactGAuth. Click on ioS+ as shown on below screen.

Write your ‘Bundle Identifier’ that we have got from ‘Step 2: Get Bundle Identifier of your IOS Apps’ in my case it is ‘org.reactjs.native.zahiralam.ReactGAuth ‘. Write App nickname and press ‘Register app‘ as shown on below image.

Now it will appear below screen. Click Next.

Now it will appear with Add Firebase SDK setup screen. Click Next as shown on below image.

Now it will show below mentioned screen. Press Next.

It will redirect to home page of firebase app. Click on Authentication which is inside Build as shown on below image.

It will redirect to Authentication setup. Click on Sign-in-method and then choose Google as shown on below image.

Click on Enable as shown on below image and click on Save.

It will show a modal which configuration file. Download the Configuration file which is GoogleService-Info.plist

Step 5: Setting up Firebase for Android:

1. Go to your project of firebase console and click on Add app as mention on below image.

It will show list of platform. Choose Android.

Not it will show Firebase setup for android.

Write your Android package name which we have got from ‘Step 3: React Native Project Configuration for Android -> B) Find Android package name’. In my case it is ‘com.reactgauth’.

Write App nickname .

Write SHA-1 which we have got from ‘Step 3: React Native Project Configuration for Android -> C) Get SHA-1 Fingerprint of your App’.

Note For apps installed from the Google Play Store:

  • Google uses the SHA-1 from the Google Play App signing certificate instead of the one from your development key. You need to make sure both SHA-1 certificates are added to your project in the Google Cloud Console.
  • Check your Google Cloud Platform project that is linked to your Google Sign-In API. You need to add the SHA-1 certificate fingerprint from your Google Play Console (App signing key certificate) to the list of credentials in the Google API Console.
  • To find the SHA-1 of your app signing key, go to your Play Console, select your app, then go to “Setup” → “App signing”. Copy the SHA-1 certificate fingerprint from the “App signing key certificate” section.

And click on Register as mentioned on below image.

Below mentioned screen will appear. Click on Next.

Now below mentioned screen will appear. Click Next.

Now click on ‘Continue to console‘ as mentioned on below image.

Now click on Project Overview and then Project Setting as shown on below image.

Setting page will appear. Click on General and then scroll down , choose your android app and then download google-service.json as shown on below image

Place google-service.json in your React Native project under android/app/ as shown on below image.

Step 6: Configuring Xcode for iOS

Open your app in Xcode by clicking ‘.xcodeproj’ extension as mentioned in ‘Step 2: Get Bundle Identifier of your IOS Apps :’ .In my case it is ‘ReactGAuth.xcodeproj’ . After opening of Xcode open folder ‘ReactGAuth’ as shown on below image and inside ‘ReactGAuth’ there is another ‘ReactGAuth’ . Drag ‘GoogleService-Info.plist‘ into this folder. As you can see from below image ‘GoogleService-Info.plist’ has information like CLIENT_ID, RESERVED_CLIENT_ID, BUNDLE_ID of your app etc. Copy RESERVED_CLIENT_ID.

Open Info.plist in a notepad. Info.plist is located in same directory. Add add below mentioned lines to Info.plist

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>RESERVED_CLIENT_ID</string>
			</array>
		</dict>
	</array>

Replace ‘RESERVED_CLIENT_ID’ with value of RESERVED_CLIENT_ID received on ‘GoogleService-Info.plist‘.

Your final Info.plist will look something like this :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleDevelopmentRegion</key>
	<string>en</string>
	<key>CFBundleDisplayName</key>
	<string>ReactGAuth</string>
	<key>CFBundleExecutable</key>
	<string>$(EXECUTABLE_NAME)</string>
	<key>CFBundleIdentifier</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
	<key>CFBundleInfoDictionaryVersion</key>
	<string>6.0</string>
	<key>CFBundleName</key>
	<string>$(PRODUCT_NAME)</string>
	<key>CFBundlePackageType</key>
	<string>APPL</string>
	<key>CFBundleShortVersionString</key>
	<string>$(MARKETING_VERSION)</string>
	<key>CFBundleSignature</key>
	<string>????</string>
	<key>CFBundleVersion</key>
	<string>$(CURRENT_PROJECT_VERSION)</string>
	<key>LSRequiresIPhoneOS</key>
	<true/>
	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<false/>
		<key>NSAllowsLocalNetworking</key>
		<true/>
	</dict>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string></string>
	<key>UILaunchStoryboardName</key>
	<string>LaunchScreen</string>
	<key>UIRequiredDeviceCapabilities</key>
	<array>
		<string>armv7</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>com.googleusercontent.apps.6786875767-juy689878797yggihsdfds6576576sf709890798</string>
			</array>
		</dict>
	</array>
</dict>
</plist>

Step 7: Setup Your code:

You can get all the codes from https://github.com/mesepith/ReactGAuth

Install Dependencies:

The package.json file lists all the required dependencies for this project. To install them, run the following command in your project directory:

npm install @react-native-google-signin/google-signin @react-navigation/native @react-navigation/native-stack react react-native react-native-safe-area-context react-native-screens react-redux redux

Create credentials.ts in root of your project and write your GOOGLE_WEB_CLIENT_ID that we have got from ‘Step 1: Setting up Google Cloud Platform’. It should look like below code:

export const GOOGLE_WEB_CLIENT_ID = 'Your Google Web Client Id';

credentials.ts exports the GOOGLE_WEB_CLIENT_ID constant, which is used to configure the Google Sign-In library.

The flow of the application is as follows:

  1. The App component renders the NavigationContainer and the AppNavigator.
  2. The AppNavigator renders the LoginScreen as the initial screen.
  3. The LoginScreen renders the LoginForm component, which displays a “Sign in with Google” button.
  4. When the user clicks the button, the handleGoogleSignIn function is called, which checks for Google Play Services and initiates the Google Sign-In process.
  5. If the sign-in is successful, the handleGoogleSignIn function navigates to the HomeScreen and passes the user information as a parameter.
  6. The HomeScreen receives the user information and renders the UserProfile component, displaying the user’s name, email, and profile picture.

├── App.tsx
├── credentials.ts
├── package.json
├── src
│   ├── AppNavigator.tsx
│   ├── components
│   │   ├── LoginForm.tsx
│   │   └── UserProfile.tsx
│   ├── screens
│   │   ├── HomeScreen.tsx
│   │   └── LoginScreen.tsx
│   └── utils
│       └── auth.ts
└── tsconfig.json

Leave a Reply

Your email address will not be published. Required fields are marked *