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.