Feature: Log in with Google in Flutter App

[nelsonic]

The starting point for people using the @dwyl Native App is Login. We are using Sign in with Google for the Web App and people will expect it for the Native Mobile app.

Todo

• [x] Research how to add basic Google Login to a Flutter App This looks like a good starting point:
  • [ ] https://pub.dev/packages/google_sign_in
  • [ ] https://medium.com/flutter-community/flutter-implementing-google-sign-in-71888bca24ed
• [ ] Create a Google App in order to get the API Credentials. see: https://github.com/dwyl/elixir-auth-google/blob/master/create-google-app-guide.md
• [x] Display the Sign in with Google button in the Flutter App
• [x] Once the person has successfully authenticated with Google, display their details as shown in the image above ⬆️
• [x] Dwyl logo: https://avatars1.githubusercontent.com/u/11708465?s=200&v=4
• [ ] Document ALL the Steps so that anyone else can follow.
  • [ ] Follow the example in https://github.com/dwyl/elixir-auth-google and https://github.com/dwyl/elixir-auth-google-demo
  • [ ] Create a new file in this repository called google-login-flutter.md to capture your notes.

Try and make the appearance as similar to the Web App as possible. (if you need any help with colors or logos, please leave comments below with your questions)

[nelsonic]

@miguelmartins17 the Medium post above uses Firebase Authentication. That's fine for testing to see how it works on a Flutter/Native app, however we want to avoid using Firebase Authentication because we aren't going to use Firebase for storing application data. (_Firebase stores data in US and we have no control over how it is stored. We want to use strong encryption for all personal data so the people using our App know their data is secure. see: https://github.com/dwyl/technology-stack/issues/16 ..._).

If you are able to use Firebase Authentication without storing any personal information on Firebase, then this could be an option. But if it is not possible to use Firebase without storing data on Firebase, then we may need to write some custom authentication code to ensure that personal data is only stored on the device and the session is created on the Phoenix Application server. We can work together to create the Phoenix endpoint.

Please write up the steps you have taken so far so that anyone else can follow along. Thanks!

[miguelmartins17]

@nelsonic I think it's impossible to use the firebase without keeping personal information. I've been doing some research and it's one of the ways we can try to use the MySQL approach because it will only save what the user enters if it's the email and password. But that way I don't know how we're going to do about Google, because with MySQL you'll be saving Google's email.

[nelsonic]

@miguelmartins17 let's look at it together tomorrow morning. 👍

[miguelmartins17]

@nelsonic I think I found a solution. So you don't have to use firebase to login with google.

[nelsonic]

@miguelmartins17 cool. Please share links and as much details as you can here. 👍

[miguelmartins17]

I think I found the solution for how to login with google without using Firebase I leave here the link:

https://www.youtube.com/watch?v=8o-DJDi2bmQ

[nelsonic]

@miguelmartins17 looks promising. 👍 @deep98shah created a good demo: https://github.com/deep98shah/PeopleAPIdemo 🔍 Keep sharing your progress. 📝

[miguelmartins17]

Even without using Firebase one of the steps to login with Google is to register the application on the Google console which includes registering the application in Firebase.

[deep98shah]

@miguelmartins17 looks promising. @deep98shah created a good demo: https://github.com/deep98shah/PeopleAPIdemo Keep sharing your progress. Thanks for acknowledging.👍

[miguelmartins17]

First we need to register the app so we have to enable the Google People API. Here is the link to enable: https://developers.google.com/people/

From my research I think we can do that from this link. Then we have to install google_Sign_In plugin.

It's done at pubspec.yaml just adding it to the dependencies: google_Sign_In: "3.0.4"

And then if we go through this link: https://developers.google.com/people/v1/getting-started

We were able to register our application.

So far it's the only way I've found that it can work and take us to the next stage.

[nelsonic]

@miguelmartins17 please take a look at the WebView SPIKE https://github.com/dwyl/learn-flutter/issues/5 Once you are able to display a basic web page in a Flutter WebView, we can explore the option of displaying the Elixir Google Auth https://elixir-auth-google-demo.herokuapp.com in a WebView and what implications that has.

[SimonLab]

Thanks for the research/links above :arrow_up: I'm having a look at how to do authentication with Google and then authorization request from a mobile application to a serve using a REST API.

I'm going to have a look first a the google signin package: https://pub.dev/packages/google_sign_in I think this should allow us to retrieve a Google token.

The next step is to find a way to create a unique token for each user, this should be done on the API server. Once this token is created we need to find a way to save it on the application.

Finally for each new API requests from the application we can use the Authorization header containing the token. The server will validate the request and allow or block the response: https://flutter.dev/docs/cookbook/networking/authenticated-requests

I've also find the following link: https://www.didierboelens.com/2018/05/token-based-communication-with-server---part-1/

Flutter with Python: https://www.youtube.com/watch?v=Nikdbz6gBek&list=PL5tVJtjoxKzrC1dRdj9AsRKcYO33pK76P&index=1

[SimonLab]

A quick schema, on how to signin with Google and using a backend API. The API should also allow signin with email/password, only the steps before creating the auth token will be different.

[SimonLab]

The following issue: https://github.com/flutter/flutter/issues/36673 suggests that we can bypass Firebase by setting the configuration values directly into Google cloud platform.

I've created a new application, and added the sha-1 key however I still have an issue:

It seems that the oauth consent screen fields need to be all set with a values which in my case are. I'm not sure if my Flutter application needs more setups to work :thinking:

I continue to investigate...

[nelsonic]

@SimonLab this still implies that we are forced to use GCP for our App. 💭 Keep going with your research. We can figure out how to do this without GCP later. 👍

[SimonLab]

I think GCP is used as the same way as Google Console Developer in this case. It is to create a new application and OAuth Credentials.

From the flutter issue above it looks like Firebase is used as a way to automatically create the application with all the required configuration for a Flutter app:

[SimonLab]

This morning I have tried again to use the https://pub.dev/packages/google_sign_in package. I still have the error describe on the previous comment: https://github.com/dwyl/learn-flutter/issues/4#issuecomment-578122210 I've used Firebase to set up the application and indeed it creates automatically a new application on the google console developer and defined all the necessary fields in the oauth consent screen.

I'm going to try one last time to create a new application (without the Firebase setup) and I'll add the steps I've done in the following comment.

[miguelmartins17]

@SimonLab Hello, this video can be used as a help/reference if you want to login with Google without using Firebase. 💭

https://www.youtube.com/watch?v=8o-DJDi2bmQ&t=268s

[SimonLab]

• Create a new Flutter project with VScode and define the name of the poject (ex: google_signin):

• Replace default main.dart by the signin example code: https://github.com/flutter/plugins/blob/master/packages/google_sign_in/google_sign_in/example/lib/main.dart

• Install google_signin and http package in pubspec.yml file. When the file is saved VScode will automatically install the packages:

  dependencies:
  flutter:
  sdk: flutter
  google_sign_in: ^4.1.1
  http: ^0.12.0+4

  

• Sign the application by following https://flutter.dev/docs/deployment/android#signing-the-app

• Create a oauth client id. You will need to add the sha-1 key created on the step when signin the flutter application. Add also the name of the application from AndroidManifest.yml

• At this stage you should be able to run the application. However I still have the following error:

I'm guessing the error is due to the sha-1 key not matching the google application, however as the debug error are not useful it is difficult to debug.

@miguelmartins17 have you tried/managed to use the google_singnin package on your machine?

[miguelmartins17]

@SimonLab Yes, and I didn't get any error, so it will be difficult to identify what the solution will be. Besides because when I did it I was still using Windows and now I'm not.

[miguelmartins17]

@SimonLab I'm going back to Windows (for a few minutes) because that's where I was able to run the application. I'm sure I used Google_Sign_in package and had no errors.

[miguelmartins17]

@SimonLab Are you using Firebase? 🤔 I f you're using this link, it might help.

https://github.com/flutter/flutter/issues/25640

[SimonLab]

Thanks for the links @miguelmartins17 which editor/IDE are you using, Android Studio? I'm currently working with VScode.

• https://github.com/dwyl/learn-flutter/issues/4#issuecomment-578732420 is still using Firebase to setup the Google project.

My goal while trying the google signin package is to determine how quickly it is to setup and how easy it is to use. At the moment there are two main blockers:

• Firebase is everywhere It seems that Google/Flutter is forcing the use of Firebase. As I mentioned above https://github.com/dwyl/learn-flutter/issues/4#issuecomment-578723928 in our case Firebase is just creating a new Google oauth project and pre-filled the consent screen fields. Why can't we do this manually as we've done before with web application, I'm not sure what is the value of Firebase here? Firebase has some nice features but I also wish that our own backend server would be easier to link to our flutter application

• Documentation The documentation for the package is very succinct I was also hoping being able to find a specific repository for the plugin. However it seems that all the packages are hosted on the flutter project which makes searching for any issues linked to the package more difficult.

  I'm sure I'm still missing some steps or don't understand some points/flutter concepts to be able to make it work yet.

[iteles]

@SimonLab Have you opened any issues explaining this situation (we're trying to do something that should be relatively simple and not require firebase) on the flutter repo or stack overflow that we could upvote?