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)
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:
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.
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.
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”.
- 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.