Implementing Google Sign in with Flutter

In this blog, I will be showing how to set up and implement Google Sign in with Flutter. Flutter is a multi-platform, open-source, and free framework for creating mobile applications, created by Google. Flutter is the only mobile SDK that provides reactive views without requiring a JavaScript bridge. Apps developed with Flutter look and feel great. Make a change in the app and see them in the blink of an eye. All thanks to Hot-Reload.

Nowadays, Google sign-in is one of the main options for login in most of the mobile apps. Google Sign-In allows you to get users into your apps quickly and securely with little development work required. So in this article, I will be showing how to set up the Flutter app and implement a Google sign-in using Firebase authentication.

For a better understanding, let’s create a new flutter project. For creating the project, open a Terminal, or use the terminal in your code editor. Run the following command by using your project name.

flutter create <project-name>

Below plugins are used in the implementation. Plugin documentation is available here.

• firebase_auth (for using Firebase Authentication)
• google_sign_in (for the implementation of Google Sign In)

Importing plugins

First of all, add the plugins in pubspec.yaml file and save it to run flutter packages get or we can use the command flutter pub get.

Now, let’s dive into the coding part, I will just explain the important parts of the code that needed to be added. Create a new dart file in the lib folder, where we will set up the firebase authentication and a google sign in with Flutter. In that dart file import the two following packages:

• firebase_auth
• google_sign_in

After adding the dart file, create an instance for firebase_auth and google_sign_in

Then create two methods for sign-in and sign-out for google, there are built-in methods for sign-in and sign-out, add them in the method created.

After the coding part we need to set up firebase account for the project:

For setting up the project, We need to create a new Firebase project you will need to go https://console.firebase.google.com/ and follow the steps below.

• Click on “Add project” to create a new project.
• Now, you have to enter a “Project name” and check the two checkboxes below. Then, click on “Create project”.
• This will lead you to the “Project Overview”. From here you will be able to add Firebase to your Flutter project.

We need to set up the firebase for this project in Android and as well as IOS separately.

Android setup steps:

• Click on the Android icon. A form will be opened.
• In this form, you have to first enter the “Android Package name”. You can get the android package name from your project directory → android → app → src → main→ AndroidManifest.xml. On the second line, there will be your package name (eg: com.example.sampleproject). Just copy & paste into the form.
• Then you have to enter an “App nickname” which is optional (if you do not enter then an auto-generated app name would be used).
• Now, you have to enter the “SHA-1 hash”. We can get SHA-1 hash by following commands.

Linux

Windows

The Keytool utility prompts you to enter a password for the Keystore. The default password for the debug KeyStore is android.

• Click on Register App.
• This will take you to the second step from where you can download the “google-services.json” file and just drag & drop it in your project directory → android → app. Then, click on Next.
• In the third step just follow the instructions and add the code snippets accordingly to the desired position. Then, click on Next.
• Finally, to complete the fourth step just run the app on your device and attempt a google sign in from the device for the first time.

iOS setup steps:

• Go to the settings → general tab in firebase console.
• Scroll down, click on the Add App button, select IOS. A form will display.
• You can find bundle Id from the following path ios→Runner.xcodeproj→project.pbxproj, and search for the ‘PRODUCT_BUNDLE_IDENTIFIER’.
• Download the file given in the second step.
• Now open the ios folder in the XCODE.
• Place or drag the downloaded file in the Runner sub-folder and a dialog box will open click on “Add to targets”. Then finish.
• Add following code in the ios→Runner→Info.plist file

• Complete the todo given in the above lines code.
• Then you can ignore the third and fourth steps.
• Finally, to complete the fifth step just runs the app on your device and attempt a google sign in from the device for the first time.

Errors:

But you will find that the app has paused and you will see in your IDE that an Exception has occurred. Don’t worry, this exception occurred because we have not enabled Google as a sign-in provider in our Firebase console.

Unhandled Exception: MissingPluginException(No implementation found for method init on channel plugins.flutter.io/google_sign_in)

The above issue commonly occurs for most of the developers, for solving the following steps below which will solve the issues.

• In the Firebase console, Go to the Authentication Page → Users tab and click on the “Set up sign-in method”.
• In the “sign-in providers” page, edit Google sign-in.
• Here, you have to enter the project name and support email. And “Enable” this by clicking the toggle on the top-right corner. Then, click on Save.
• Then go to https://console.developers.google.com
• Make sure you are signed in with the same account with which you have created the Firebase project.
• Also, make sure that on the top-left corner, your project is selected for which you are filling this consent.
• Go to the OAuth consent screen tab and start filling the form.
• Enter “Application name”, “Application logo” & “Support email”.
• At the bottom of the form, you will see the following fields “Application Homepage link”, “Application Privacy Policy link” and “Application Terms of Services link”. Fill them by adding the HTTP:// at the starting of the domain which is present in the Authorized domain field.
• Then click Save

It will solve the above exception. That’s how we can set up the google sign in with flutter. If you want to how to achieve state management in Flutter, you can find it here.