Google Login

Setting up social login(facebook and google) with foodie.

Google Sign In

There are a few new steps you have to do in order to use Google Sign In in the foodie app. Without completing all these steps, if you try to use Google Sign In, the app will just crash. I will show you how to set up Google Sign In using Firebase from scratch.

Setup Firebase project

If you already have a firebase project setup, you can ignore this section but if you haven't I will take you through the process of setting up the firebase project for your your app. You need to have a firebase project for the foodie app.

To create a new Firebase project you will need to go here.

Click on “Add project” to create a new project.

2. Now, you have to enter a “Project name” and check the two checkboxes below. Then, click on “Create project”.

3. Now, wait for the creation to complete and click on “Continue”.

4. This will lead you to the “Project Overview”. From here you will be able to add Firebase to your Flutter project.

Firebase Project setup

We have already setup Firebase for you on the Foodie project, but you would need to change some of the configuration to your needly created firebase project.

Here is a link to the official firebase documentation on how to link firebase to both android and iOS

Android Link: https://firebase.google.com/docs/flutter/setup?platform=android

iOS Link: https://firebase.google.com/docs/flutter/setup?platform=ios

Firebase Authentication Setup

After you have successfully setup the project with firebase, you will need to enable authentication on firebase.

On the firebase console,

go to Authentication Page → Users tab and click on “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.
So, now the google sign in setup is complete. Run the app on the device again.

But to your surprise, you will again see that the same Exception occurs. Now, this gets interesting, this occurs because you have not filled up the OAuth consent form. This is the new change in Firebase that I was talking about from the beginning and it is just driving developers crazy because I have not found them properly documented anywhere.

Let’s see how to fix this issue.

First of all, go to this page here.
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 Credentials → OAuth consent screen tab and start filling the form.
Enter “Application name”, “Application logo” & “Support email”.
In the Application Logo, you can just enter any image if you are not making this for production, otherwise, enter the real app icon that you are using for your application.
Then, scroll down and fill the “Application Homepage link”, “Application Privacy Policy link” and “Application Terms of Services link”. In all these places, you have to enter the same link starting with http:// then your app domain name which I have marked with green below.
Click on Save.

So, this completes the whole setup process for “Sign in with Google” using Firebase for Android (iOS needs extra configuration). Now, again run the app on your device and attempt google sign in. You will find that it suddenly started working without any exception.

Firebase iOS Extra step

Open this google_sign_in flutter package page. Inside iOS integration you will find a code snippet. Just copy & paste it inside the Info.plist file and save it, like this:

Here, you will see that there is a TODO written to replace the value within the string tag with “REVERSED_CLIENT_ID”. You will find the REVERSED_CLIENT_ID in the file “GoogleService-Info.plist”.

So finally, this completes the whole setup process for “Sign in with Google” using Firebase for both Android and iOS. Just follow these above steps properly and you should get past the setup pretty quickly.