How to implement Google sign-in on Flutter with Supabase on iOS, Android & Web

Поділитися
Вставка
  • Опубліковано 27 гру 2024

КОМЕНТАРІ • 74

  • @dshukertjr
    @dshukertjr 10 місяців тому +15

    Apple sign-in video will also come out soonish. In the mean while, what other Flutter content would you like to see on this channel?

    • @TheDevLogger
      @TheDevLogger 10 місяців тому +2

      Would love to see a tutorial for desktop with deep linking!

    • @xeooox
      @xeooox 10 місяців тому

      The guide and document are awesome. Thank you.
      1. How to handle refresh and access tokens in real app scenarios (Retrieving and revoking a session in real-world scenarios).
      2. Implementing pagination with infinite scroll using Supabase PostgreSQL.

    • @dmitrygutoryan2915
      @dmitrygutoryan2915 10 місяців тому

      The same video but when we deploy supabase on the local machine

    • @dshukertjr
      @dshukertjr 10 місяців тому +1

      @@TheDevLogger Great suggestion! Deep link deep dive is something I would like to work on. Added it to my list!

    • @dshukertjr
      @dshukertjr 10 місяців тому

      @@xeooox Thank you so much for the compliment. What exactly would you like to see about handling refresh and access tokens? Using Supabase, you shouldn't really have to worry about handling refresh or access tokens (unless you want to revoke it like you mention). Retrieving the tokens should happen automatically by the SDK, and you should never have to worry about or handle it yourself. Are you finding yourself to be in a position where you have to handle it by yourself?

  • @matthewrayes3694
    @matthewrayes3694 3 місяці тому +3

    At 3:21, you pasted the web client ID into the "Authorized Client IDs (for Android, One Tap, and Chrome extensions)" field of the Supabase Google Sign In dashboard and left the "Client ID (for OAuth)" field empty.
    At 11:03, the "Authorized Client IDs (for Android, One Tap, and Chrome extensions)" is empty and the "Client ID (for OAuth)" field has some client ID in it.
    What happened in between those two timestamps that caused the switch-a-roo?

  • @rara737
    @rara737 16 днів тому +1

    OAuth Consent Screen

  • @VerenaZaiser-i2u
    @VerenaZaiser-i2u 10 місяців тому +3

    Very helpful video, thank you!

  • @DhanubaDabhi
    @DhanubaDabhi Місяць тому

    OAuth done and i get id but all user data are null what can i do for getting response?

  • @gkumartube
    @gkumartube 10 місяців тому +2

    i see charge for MAU in pricing, why ?

    • @dshukertjr
      @dshukertjr 10 місяців тому +1

      We have a wide range of Auth features that we offer with it like MFA, SSO, OAuth with 19 different providers, and we need to sustain it. It comes with a pretty generous free tier though.

    • @gkumartube
      @gkumartube 9 місяців тому

      @@dshukertjrThanks

  • @nikitachernenko3774
    @nikitachernenko3774 7 місяців тому +2

    dude, you saved my day!! It was pretty non-obvious for me before where I need to use android service id vs web service id, and why it is web service id for android if I use native sign in...
    mobile dev is slightly confusing, but thanks a lot!!

  • @lordew9476
    @lordew9476 5 місяців тому +1

    dont work on web but in android is fine... who can display gmail not this numbers?

    • @Supabase
      @Supabase  5 місяців тому

      Are you calling the .signInWithOAuth() method on web? What numbers are you seeing instead of gmail accounts?

    • @lordew9476
      @lordew9476 5 місяців тому +1

      @@Supabase I did everything as in the video, after clicking the button the method works, but Google gave the following error: "401 invalid client", "flowName=GeneralOAuthFlow". I see this error only on the web when I open the application through a browser; in the Android emulator everything works fine. I will be glad for any hint! Thank you! this numbers is after Auth displayed in page, i don't know how display user Gmail.

  • @OviDB
    @OviDB 10 місяців тому +1

    Just a note, you're pointing to Google Singin with Flutter video, is that the video you're mentioning?

    • @dshukertjr
      @dshukertjr 10 місяців тому

      Sorry, are you talking about the video or somewhere in the docs?

  • @Kamal_sabki
    @Kamal_sabki 8 місяців тому

    thanks! i have an issue redirecting the users to the right page, i want to to redirect the user to continue the onborinf and completing the user information when they clic on sigup and if they clic on login with google they will be redirect to home. do you have anyidea on how to achieve this ?

  • @Dragon21434
    @Dragon21434 11 днів тому

    Where do i find the password for keytool generation in production mode?

  • @AlanGandy-j2k
    @AlanGandy-j2k Місяць тому

    I have this working for a web app. Is there a way to replace the supabse project URL with my actual web app's URL on the Google sign in page?

    • @nazar949
      @nazar949 День тому

      i did all the steps from this video, but still not working on flutter web app (localhost). Did you do extra steps with web tokenId?

  • @excellencemichel4875
    @excellencemichel4875 10 місяців тому +2

    Supabase have to add the crucial feature for all real word app like transaction native feature or batch on db. Otherwise we can't chose supabase to to make a good apps.

    • @Supabase
      @Supabase  10 місяців тому

      Actually, transaction is supported through Postgres functions. You can create a Postgres function and call it using the .rpc method from the client. Batched writes have been always possible using the standard insert or upsert method on the client libraries!

    • @excellencemichel4875
      @excellencemichel4875 10 місяців тому +1

      For a big project that need many transaction operations which take two or three table with many field is not easy. Maybe you have your reason but that lack of this features is a big issue.

  • @Shreyas-fs3dp
    @Shreyas-fs3dp 9 місяців тому

    Can we please get a compose multiplatform google + apple sign in tutorial?

  • @giaretz92
    @giaretz92 9 місяців тому +2

    The login on iOS works perfectly but the one on Android doesn't work. It keeps giving me the same error [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null, null)

    • @Supabase
      @Supabase  9 місяців тому +1

      That error most likely means that you are providing the wrong SHA1 certificate fingerprint to GCP. Double check that you are providing the correct one, and you should be good to go.

    • @tananga_studio
      @tananga_studio 3 місяці тому

      @giaretz92 Im getting the same error. Did you solved your problem?

    • @عبدالرحمنباوزير-ت3ب
      @عبدالرحمنباوزير-ت3ب 3 місяці тому

      @@Supabase i get the same thing

    • @datastory42
      @datastory42 3 місяці тому

      Previously my login on Android works perfectly, however, when I was forced to change my application name, everything failed to work and had the above error. Did anybody have the same issue?

    • @Dan-dd4ec
      @Dan-dd4ec 2 місяці тому

      Having the same issue, SHA1 fingerprint doesn’t seem to be the problem. What was your work around, I’ve tried creating new applications and projects a few times and get the same issue?

  • @littlehacker9605
    @littlehacker9605 3 місяці тому

    Is it possible without google cloud , Google Sign?

  • @wgolyoko
    @wgolyoko 8 місяців тому

    This does not work. I created a new Firebase project, enabled Google Sign In, but there cas no Google Cloud project created.

    • @Supabase
      @Supabase  7 місяців тому

      Creating a Firebase project always creates a GCP project in the background, so maybe you are looking into the wrong GCP org or something. Navigating through GCP console might not be easy if you are not used to it, but look around and you should find the corresponding GCP project!

  • @michaelrogers6935
    @michaelrogers6935 8 місяців тому

    This was quite clear for the most part, but there were 3 different client IDs, which one gets pasted into Supabase?

    • @Supabase
      @Supabase  8 місяців тому

      Three different client IDs all have different purposes, and they are all required if you want to support all web, iOS and Android. As shown in the video, the one you paste into the Supabase dashboard is the web Client ID.

    • @muratcan__22
      @muratcan__22 8 місяців тому

      ​@@Supabase why do we not paste it to Client ID (for OAuth) but to the authorized clientIds?

  • @もちもち-b4r
    @もちもち-b4r 6 місяців тому

    It seems I haven't found a tutorial for Sign in with Apple using Supabase and Flutter.
    By the way, how can I link multiple OAuth logins to the same account? I mean binding both Apple and Google to the same account.
    Of course, it should also work for Web and Android

    • @もちもち-b4r
      @もちもち-b4r 6 місяців тому

      I apologize first, I didn't see that you also wrote 'Apple sign-in video will also come out soonish.' Sorry.

  • @learnwithshash1475
    @learnwithshash1475 4 місяці тому

    does this work with flutter desktop?

  • @ValentinLAFFONT
    @ValentinLAFFONT 8 місяців тому

    The google_sign_in plugin `signIn` method is deprecated on the web, and will be removed in Q2 2024.

    • @Supabase
      @Supabase  8 місяців тому

      Google sign-in on the web with Flutter does not use the google_sign_in plugin, but rather uses supabase.auth.signInWithOAuth() method, so it will not be affected by the deprecation.

  • @devagarwal3250
    @devagarwal3250 9 місяців тому +1

    i am getting error cliend id not found

    • @dshukertjr
      @dshukertjr 9 місяців тому

      If you could precisely share the exact error message and the platform you are running it on, I might be able to assist you better, but it most likely is due to not configuring one of the configurations correctly. There are iOS, Android, and Web client ID that you need to handle in order to implement Google sign-in, which is quite confusing, so take you time, watch back the video, and make sure you have added all the correct configuration in the correct place.

    • @devagarwal3250
      @devagarwal3250 9 місяців тому

      ​@@dshukertjr I am only using an Android client, and I have done the exact same thing and copied the exact same code from the video.
      the one thing I excluded was web client and ios client

    • @dshukertjr
      @dshukertjr 9 місяців тому +1

      @@devagarwal3250 Okay, well creating a web client ID is a requirement for supporting Google sign-in on Android. At 03:19, you can see me adding the Web Client ID into the dashboard.

    • @devagarwal3250
      @devagarwal3250 9 місяців тому +1

      @@dshukertjr In the flutter code also it is necessary to put the web client ID?

    • @dshukertjr
      @dshukertjr 9 місяців тому

      @@devagarwal3250 Yes, you do.

  • @Supabase
    @Supabase  9 місяців тому

    Get the docs here: - Supabase Google sign-in docs → supabase.com/docs/guides/auth/social-login/auth-google?platform=flutter&Mg6fVmX0U

  • @eliuddyn
    @eliuddyn 10 місяців тому +2

    Amazing 🔥🔥

  • @NoPr0gress
    @NoPr0gress 5 місяців тому

    helped to fix web , i didnt know i have to set the port

    • @Supabase
      @Supabase  5 місяців тому

      Flutter web changes the port every single time you run it, so it's either specifying the port like in the video, or adjusting your code every single time you run it locally.

  • @tananga_studio
    @tananga_studio 3 місяці тому

    Next time please also show us how to logout correctly

  • @luis96xd
    @luis96xd 8 місяців тому

    Thanks for the tutorial!

  • @serenitytechtips
    @serenitytechtips 10 місяців тому +1

    Beautiful !!!

  • @hantuedan4541
    @hantuedan4541 9 місяців тому

    thankyou so much, I appreciate this a lot 🙏

  • @freddy9292
    @freddy9292 6 місяців тому

    thank you!!