React Native Google Sign-In in CLI without firebase

Tutorial on how to enable Google Sign-In in React Native. It covers setup, UI, user validation, and sessions for a secure and user-friendly authentication

vinod singh

2 months ago

react-native-google-sign-in-in-cli-without-firebase

For most modern apps, authentication options have become more flexible. Rather than relying on traditional email-password combinations, users now prefer faster, secure login options such as Google, Apple, GitHub, etc., commonly referred to as Single Sign-On (SSO).

We recently added Login with Google in our mobile app, and during the process, we faced a few challenges. In this guide, I’ll walk you through the steps to implement Google Sign-In in a React Native app, share how to handle the login response, validate the user, manage sessions—and cover some common errors like the dreaded developer_error.


📌 Table of Contents

  1. Create a Google Developer Console Project

  2. Set Up Your React Native Project

  3. Install the Google Sign-In Package

  4. Configure Google Sign-In

  5. Create a Google Sign-In Button

  6. Handle Google Sign-In Logic

  7. Validate the Google User

  8. Implement User Sessions

  9. Fixing developer_error

  10. Final Thoughts


1. Create a Google Developer Console Project

Before using Google Sign-In, create a project in the Google Developer Console:

  1. Go to the Console and create a new project or select an existing one.

  2. Navigate to APIs & Services > Credentials.

  3. Click Create Credentials → Select OAuth Client ID.

  4. Choose Web Application.

  5. Additionally, create OAuth credentials for Android and iOS clients.

ℹ️ Tip: To find the SHA-1 key for Android, see point #10 below.

You will now have three client IDs:

  • Web

  • Android

  • iOS


2. Set Up Your React Native Project

If you haven’t already, create your React Native project:

npx react-native init MyGoogleSignInApp cd MyGoogleSignInApp


3. Install the Google Sign-In Package

Install the official package:

npm install @react-native-google-signin/google-signin

For setup instructions, refer to the official documentation.


4. Configure Google Sign-In

Add the following configuration to your main JS file (e.g., index.js) or to a dedicated service:

import { GoogleSigninButton, GoogleSignin } from '@react-native-google-signin/google-signin';
GoogleSignin.configure({

    webClientId: '732276031820-vnekqp4tecccxcxnlidkbct04d9hgr4b8d12j.apps.googleusercontent.com',
//for android, webclient is used for android too
    scopes: ['profile', 'email'],
    offlineAccess: true,
});

✅ Store all client IDs in a .env file for security.


5. Create a Google Sign-In Button

Here’s a simple button to trigger login (styling excluded for brevity):

import { GoogleSigninButton, GoogleSignin } from '@react-native-google-signin/google-signin';

const GoogleLogin = async () => {
    try {
        await GoogleSignin.hasPlayServices();
        const userInfo = await GoogleSignin.signIn();
        console.log("userInfo", userInfo);
        return userInfo;
    } catch (error) {
        console.error("Google Sign-In Error:", error);
        throw error;
    }
};
 const handleGoogleLogin = async () => {

        try {
            const response: any = await GoogleLogin();
            const { data } = response;
            console.log("google", data)

        } catch (apiError) {

        } finally {

        }
    };
<GoogleSigninButton
                    size={GoogleSigninButton.Size.Wide}
                    color={GoogleSigninButton.Color.Dark}
                    onPress={() => {
                        handleGoogleLogin()
                    }}

                />

6. Handle Google Sign-In Logic

The login logic includes:

  1. Checking if Play Services are available.

  2. Triggering the sign-in flow.

  3. Receiving user info and token.

  4. Sending the token to your backend for validation.


7. Validate the Google User

The backend should verify the token using Google’s API:

js

CopyEdit

await axios.get( https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=${token} );

Once validated, create or authenticate the user on your server.

🔐 Make sure this call is made server-side, not from the client.


8. Implement User Sessions

To maintain sessions:

  • Use JWTs or secure session cookies.

  • Attach session info to the user profile or store it in secure storage on the device (e.g., @react-native-async-storage/async-storage).

9. Fixing developer_error

You may encounter a developer_error while integrating Google Sign-In. Here’s how to fix it:

Common causes:

  • SHA-1 mismatch
    Ensure the SHA-1 used in the Google Developer Console matches the one from your keystore. Get it using:

    bash

    cd android

    keytool -list -v -keystore app/debug.keystore

    Default password: android

  • Incorrect package/bundle name
    Ensure that the app’s bundle ID matches what you used when generating the client IDs.


10. Final Thoughts

Implementing Google Sign-In in React Native can be smooth once you’ve correctly configured all credentials and understand the token validation process. While the developer_error is a common hurdle, it's easily fixable with the right setup.

This guide should help you get started and avoid common pitfalls. If you're integrating SSO options into your app, Google is a great starting point.