Flutter Google Sign In Without Firebase

Flutter Google Sign In Without Firebase

Realm Flutter

7 min read

Greetings, Flutter community! If you're here, chances are you're on a mission to integrate Google Sign-In into your newest Flutter project but prefer not to rely on Firebase for this feature. Been there, done that, and I get it. Even though, there are plenty of articles out there on implementing Google Sign-In with Firebase, there are not so many guides for our situation. Worry no more, I've got your back! In this guide, I'm going to walk you through every step of the way, ensuring a Firebase-free integration of Google Sign-In into your Flutter app. Ready to offer your users a fresh Sign-In experience? Let's dive in!

Step 1: Google Cloud Console

Before we write any code, we need to establish a connection between our Flutter project and the Google Cloud Console. So, let's start by setting up the Google Cloud Console.

  • Navigate to Google Cloud Console: Head over to Google Cloud Console, and sign in with your Google account if you haven't already.
  • Create a project: If you haven't created one yet, head over to the project dropdown at the top of the page, and select "NEW PROJECT", give it a name and click "CREATE". New Project Create Project
  • Configure OAuth consent screen: Navigate to the OAuth consent screen by searching it on the search bar or from the menu bar in the section APIs & Services. Choose the "External" option and click "CREATE". Now, in this screen you have to fill in the necessary details like the application name and user support email, and at the same time you can customize the pop up screen that will appear whenever the users try to Sign-In. Consent Screen

Now, let's take a brief pause from the Google Cloud Console. We're heading into the app to collect essential data needed to finalize the implementation.

Step 2: Application Set Up based on the Device

There are different paths to follow based on the device you're using. Whether you're developing for Android or iOS, the steps for application setup may vary. Let's explore the specific instructions tailored to each platform.

Android Set Up

Our first task is to create an upload keystore, which works as a device-specific signature. Head over to Flutter's Android Deployment Documentation and follow the steps outlined in the Create an upload keystore section. I'll guide you through each step to ensure a seamless understanding of the process:

Generate and Store Keystore

  • Use the provided commands or instructions to generate a keystore file. This file is crucial for signing your Android app, so you need to be very careful because it is something you will need later when you want to upload your application.
  • Move the keystore file in the '/android/app' folder of your project. Then follow the steps under the Configure signing in gradle section.

Get SHA-1

  • To obtain your SHA-1 code, navigate to the 'android' directory in your project and run the command ./gradlew signingReport.
cd android
./gradlew signingReport

After executing this command, a bunch of information will appear in your terminal. Look for the SHA-1 key in the section labeled "Variant: debug" and "Config: debug".
SHA-1 IMPORTANT NOTE: When you are ready to upload the app, it's crucial to use the SHA-1 key from the "Variant: release" and "Config: release" sections.

Android Client Id

Now we can jump back to Google Cloud Console and complete the setup.

  • OAuth Client ID: Head back to APIs & Services and select the "Credentials" option. Click on "CREATE CREDENTIALS" at the top of the screen and choose "OAuth Client ID." Now, it's time to specify the system for which we're enabling the Google Sign-In serviceโ€”in our case, Android. Complete all the required fields, including the package name of your project and the SHA-1 key that we learned how to obtain earlier.

Android Client Id In case you don't know where to find the package name, all you have to do is go to 'android/app/build.grandle' and the name of your project is the value of applicationId

iOS Set Up

Setting up for iOS is relatively simpler. Let's begin with the Google Cloud Console and create an OAuth Client ID.

  • OAuth Client ID: Follow the previous steps, and when you reach the "OAuth Client ID" screen, choose iOS as the target system. All you have to do to complete the form, is to fill the Bundle ID text field.
  • Bundle ID: The id we are looking for, is located inside the ios folder. Navigate to 'ios/Runner/Info.plist' and find the <string> value from the <key>CFBundleIdentifier</key>
    iOS Client Id IMPORTANT NOTE: When your app is published in App Store, you have to jump back in iOS Client form, and fill the App Store ID field, otherwise the feature wont work.

When you create the iOS Client, a pop up message will appear in your screen. Pop up Screen Here, you need to download the .plist file by clicking the "DOWNLOAD PLIST" button. Then, rename the downloaded file to GoogleService-Info.plist and place it inside 'ios/Runner' folder. To ensure the 'ios' folder incorporates these changes, open the terminal and run the following commands:

cd ios
pod install

Executing these commands will ensure that the app absorbs the new files, making the new feature operational. Now that our setup is complete, let's dive into the code to integrate Google Sign-In into your Flutter app.

Step 3: Code Implementation

The toughest part is behind us. With everything set up, the code implementation is as easy as it gets.

Package

The only package we need, is the google_sign_in. Navigate to your pubspec.yaml file, and add the latest version of this package.

Dart code

void googleSignIn() async {
    // Initialize GoogleSignIn with the scopes you want:
    final GoogleSignIn googleSignIn = GoogleSignIn(
        scopes: <String>[
            'email',
        ],
    );
    
    // Get the user after successful sign in
    var googleUser = await googleSignIn.signIn();
}    

The variable googleUser will look like this:

{
    displayName: username, 
    email: example@gmail.com, 
    id: 73459345371102349, 
    photoUrl: https://lh3.googleusercontent.com/a/xxxxxxxxxxxxxxxxx, 
    serverAuthCode: null
}

This way, you can create a User Model and use whatever you want based on your application needs.

Step 4: Web Client IdToken

Step 4 is specifically for those who require the Web Client IdToken in their project. If you find the need for this, here's how to include it in your project.

  • OAuth Client ID: Go back to Google Cloud Console, navigate to APIs & Services and select the "Credentials" option. Click on "CREATE CREDENTIALS", choose "OAuth Client ID." This time, we have to choose the Web Client and create a new key.
  • strings.xml: Go to your root of your project, and navigate to 'android/app/src/main/res/values'. Then, create a new file strings.xml which should look like this:
<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <string name="default_web_client_id">{YOUR CLIENT ID}</string>
</resources>

And there you go

Conclusion

And there you go! You've successfully set up Google Sign-In in your Flutter project without relying on Firebase. With only few adjustments based on the device, you've empowered your users with a significant and secure method to sign in to your application. Well done on this achievement in elevating your app's user experience!

If you enjoyed this article and want to stay connected, feel free to connect with me on LinkedIn.

If you'd like to dive deeper into the code and contribute to the project, visit the repository on GitHub.

Was this guide helpful? Consider buying me a coffee!โ˜•๏ธ Your contribution goes a long way in fuelling future content and projects. Buy Me a Coffee.

Feel free to reach out if you have any questions or need further guidance. Cheers to your future Flutter projects!

Affiliate Links

Check out what Thanasis Traitsis suggests for Flutter Google Sign In Without Firebase!

  • OXO Good Grips Sweep & Swipe Laptop Cleaner affiliate image
    Office Gadgets

    OXO Good Grips Sweep & Swipe Laptop Cleaner

    Double-sided tool for deep cleaning your tech gadgets.

  • Anker Wireless Charger affiliate image
    Office Gadgets

    Anker Wireless Charger

    Elevate your charging experience and bid farewell to all those annoying cables with this wireless charger

  • Lenovo Laptop Bag 14" affiliate image
    Office Gadgets

    Lenovo Laptop Bag 14"

    Protect your laptop with this sleek laptop bag, that fits inside every bag.

  • Laptop Backpack, 15.6-Inch affiliate image
    Office Gadgets

    Laptop Backpack, 15.6-Inch

    The most value for money laptop backpack. Experience comfort, style, and optimal organization on the go.

  • Single Monitor Stand affiliate image
    Office Gadgets

    Single Monitor Stand

    Single monitor stand from steel. Fully adjustable for height, tilt, and more. Solid construction suitable for heavy monitors.

Ready to Forge an Alliance
๐Ÿค

Join our alliance and play a pivotal role in the evolution of our digital realm! By aligning with our pricing model, you're not just accessing premium features; you're becoming an integral part of our journey. As an ally, your support propels us forward, ensuring we continue to innovate and thrive.

Lifetime membership

As valued allies, exclusive content awaits you ๐Ÿ‘€. Unlock a suite of premium features and gain early access to ally-only enhancements in our realm. With our month-by-month commitment, you're always privy to our most coveted updates!

What's included

  • Premium Content Access
  • Ally resources + Unique Ally Badge
  • Access to Affiliate store front ๐Ÿค‘ (๐Ÿ”ฎ)
  • More to come...

It's like buying a pint ๐Ÿบ. But less!

โ‚ฌ1.99 EUR

Forge Alliance

Invoices and receipts available for easy company reimbursement

Subscribe to our newsletter.

๐Ÿ‘‹ Hey there, Realmer! Fancy getting a byte of nerdy knowledge straight to your inbox? Subscribe to our Sudorealm newsletter and don't miss a single trick from our growing community of curious minds! Ready to level up your knowledge game? Join us in the Realm today!

Be one of the privileged few
Think of it as your VIP pass into the Realm where you'll get first dibs on new features, insider updates, and more.
No spam
And, worry not, we promise not to spam โ€“ just top-tier, brain-tickling content.