Flutter Google Sign In Without Firebase but only using google_sign_in plugin

Hello guys, today in this guide I will be sharing how to implement google sign in to the flutter application easily with very few steps without needs firebase. You might wonder why I am not implementing firebase authentication, well in this use case my client wants a custom backend with laravel with our db managment and business Logic level in between the app and the databases, as a result the solution proposed to me was a laravel API layer and the flutter app should still do have Google, Apple, Email sign in functionality still. So after some R&D time I was able to find that this flutter plugin google_sign_in can also be used to sign in to google and get the id token and send backend to my backend API endpoint and in the laravel use google client and using the ID token verify and get user data.

Ok then Let's get started, I will seperate this guide to steps so that it's easy to follow 

 Step 1. ( Create Client Credentials in Google Client Id from Google Cloud Console)

go this link google console create project and click on configure a project, there is will a drop down to select an already created project or create new one. you can create a project first related to this project and then proceed with the client id creation or if there is a project already created then select it.

In my case I was trying to upload the test app for my google play console so I already have created the project using google cloud console visit here.

after clicking next you will be asked in the wizard from what source calling from, in this case it can be android or ios, I was using the mac simultor iphone so I selected IOS, but I need to go in this flow again when doing the android one aswell. for this guide I will select IOS.

when it selects IOS, the dialog box will ask for the bundle id of the app, it's just a unique indentifier in your flutter app so searching BUNDLE_ID in your code will show a something like com.example.yourappname . copy and paste it here and click create. Next you will be shown the client ID, you can copy it and paste it in a safe place for easy access. 

Further more you can visit this link and click credentials to view all.

Step 2. ( flutter code changes)

in your flutter code it's very easy, just go to your ios/Runner/Info.plist and paste below code sample inside the <dist>

<key>GIDClientID</key> 

<string>YOUR_IOS_CLIENT_ID</string>

replace the client id

---------

next in the same file below the above xml add this too

<key>CFBundleURLTypes</key>

<array>

    <dict>

        <key>CFBundleURLSchemes</key>

        <array>

            <string>com.googleusercontent.apps.YOUR_IOS_CLIENT_ID</string>

        </array>

    </dict>

</array>

the YOUR_CLIENT_ID should be replaced with the client_id number we generated here as well to look like this in reverse order com.googleusercontent.apps.1231231

Next in the ios/Runner/AppDelegate.swift 

on top import this :

import GoogleSignIn

then inside Bool { } brackets add this 

GIDSignIn.sharedInstance.configuration = GIDConfiguration(clientID: "YOUR_IOS_CLIENT_ID")

--------------------------------------

Step 3. ( let's add flutter google_sign_in plugin)

it's straight foward, run flutter pub add google_sign_in

then import this line in your login screen dart file 

import 'package:google_sign_in/google_sign_in.dart';

next write a function that can be attached to a function, this function will trigger the google account selected and when user select and sign in, you can get the idtoken and accesstoken for further use. I my case I pass that to my backend for the backend laravel validation and next access my resources and business layer.

 inside a function add this 

GoogleSignIn googleSignIn = GoogleSignIn();

GoogleSignInAccount? account = await googleSignIn.signIn(); 

 if (account != null) { 

         GoogleSignInAuthentication authentication = await account.authentication;

          String? idToken = authentication.idToken;

          String? accessToken = authentication.accessToken;

        // do whatever with those you like

 }

Step 4. ( add google sign in button to the UI )

it's super easy, just use this plugin visit here, and then bind the onpress to the function that calls the google sign in.

Thanks all guys, super easy to do and now your flutter application do have google sign in.

Thank you!!! cheers.............