Flutter Google Sign In: Step by Step Guide for Beginners | Android & IOS
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- This step-by-step tutorial will show you how to integrate Google Sign-In into your Flutter app on iOS and Android platforms.
No prior knowledge of Firebase authentication is required; everything will be covered in detail. You'll discover how to configure Google Sign-In, set up Firebase, and create Flutter code to integrate this feature into your app.
I've left in frequent errors you might run across since we want to simplify complicated topics, and we'll troubleshoot them together.
Don't forget to like, like, and subscribe for more Flutter tutorials suitable for beginners that will help you become a skilled app developer!
Resources
1. Firebase CLI: firebase.google.com/docs/cli
2. FlutterFire CLI: firebase.google.com/docs/flut...
3. Google Sign-In Package: pub.dev/packages/google_sign_in
4. SHA COMMAND: developers.google.com/android...
5. Project Repo: github.com/jeronasiedu/google...
Possible Errors
1. Flutterfire command not found: Make sure you add flutterfire to your environment variables.stackoverflow.com/questions/7...
2. Multidesk support: Set your min SDK version to at least 20 in android/build.gradle
3. Make sure to update your cocoa pods if you're on a Mac.
Table of Contents:
00:00 Introduction
00:52 Creating Firebase Project
02:30 Setting up FlutterFire CLI
06:15 Connecting Flutter App with Firebase Project
08:25 Adding SHA Certificate Fingerprints for Android
11:20 Installing dependencies
13:40 Upgrading Google Services dependency
14:45 Increase Min SDK version
16:00 Google Sign In Logic
28:30 Display currently logged in user
33:00 iOS setup
37:00 Conclusion - แนวปฏิบัติและการใช้ชีวิต
You just saved my life. You saved my gpa. I will forever be greatfull to you. The least i can do is subscribe and like. Thank you so much, Hope you have a blessed happy life.
I'm happy to hear this.
@@JeronDev can you also do a video on how to do flutter calendar
@@getrekt9880 What type of calendar do you want? If you want a quick calendar you can customise, try calendar_date_picker2
Thank you so much. Best tutorial!
Thank you so much for your incredibly helpful tutorial! I've been pulling my hair out for a week trying to figure it out, and your clear explanations finally made everything click. You're a lifesaver! Keep up the amazing content!
дякую тобі друже) чуть голову над цим собі не поломав
Thank you, this video helped me👍
You helped me bro :) Thank you
thank you , the ios config part was missing in the recent documentation of google_sign_in , your video saved me search time
You helped me a lot.. thank you bro for share your knowledge with us!
Thanks for watching
Thank you
Thanks Bro.
Thanks for watching
Thank you, this helped me a lot. I love how you addressed a lot of the issues that generally tend to pop up when trying to implement this. Is it possible to catch if the user has pressed "back" and cancelled the sign in process?
When the user closes the sign-in modal without selecting an account, the Google sign-in account will return null, which means no account was selected, you can then handle that accordingly.
Let me know if you meant something else
@@JeronDev Thanks, but if there was some other issue and they didn't cancel, it would also be null right? So I'd like to show/display an error msg if the user is null UNLESS it was because they cancelled.
@@GaneshH It depends on the errors you want to handle, what I mostly do is, I make sure the user has internet connection before proceeding with any auth operation. Also I catch all firebase exceptions and use the error code to retrieve the appropriate error message from a list of predefined error codes and messages. Most of the time, this works best for me, I haven't encountered any edge case with this approach
@@JeronDev Thank you very much for your help, I really appreciate it
Great Video.
Please can you do a video how you did the GitHub copilot set up
I use codeium instead of Github copilot. You can get it for free at codeium.com
@@JeronDev thank you so much.
I will try it out right now
When i successfully authorize the user, should i call my rest apis from my server normally? Also do I need to keep checking for user auth status during the app life cycle? do you know if google has expiration time for logged in users or token refresh?
1. You can your APIs normally, to implement authorization on your backend, you can use the Firebase admin SDK to verify requests. You first attach the currently logged-in user’s token (JWT) to every request and then you verify it on your server.
2. There are so many ways to implement auth with Firebase and Flutter. You don't need to check if a user is authenticated all the time, at the start of your app, you can check the auth state and navigate to either the login page or the ”home” page. Since this is a mobile app users can only navigate using the UI elements you provide so if a user happens to be on a protected page then it means they are authenticated and you also allowed them to navigate.
You can also use a widget that acts like an authWrapper and with the help of a stream builder, you listen for the Firebase auth state change and return the appropriate page.
3. Firebase authentication sessions are long-lived but ID tokens normally last an hour.
ID tokens are like JWT that you can use to verify the user making the request on your server. They are short-lived so you may need to refresh them from time to time when they expire else your server will refuse them if you are using the Firebase Admin SDK for authorization
Hi, Thank you so much for the video! This was really useful! I was wondering whether you could please suggest why this is happening: after I press logout, it returns to the home screen, but when I press login again, it doesn't load the inside contents of the app. Not sure if Im doing something wrong. The pages and structure are ofc different, but still should work imo. Maybe this is a common issue and you have a suggestion? Thank you!
Not really sure what you mean by “it doesn't load the inside contents of the app” but can you confirm if you are logging the user out successfully? Also, when you login the 2nd time, trying printing information about the auth state to confirm if the authentication was successful.
Hi, can I ask you how to activate those lines to better understand the size of the widgets? Thanks a lot!!
In vscode, go to settings and search for flutter Ui Guides. Enable Flutter Ui Guides as well as Ui Guides Custom Tracking
@@JeronDev Thanks a lot!
In the signout page it is saying that mounted is undefined name
How to solve this?
Convert to a stateful widget. Mounted is only available in stateful widgets
can this be doable using mongodb instead of firebase?
Yes please
Hi, so, is not mandatory to use the google cloud console for this?
No, do you have any issues regarding the process?
@@JeronDev yes, i tried past days with firebase + cloud console, then i have followed your video steps, but when select account, i have the api exception 10 error. Now i cloned your repository to try it and i had same result :(
now it works 🙏
@@juanddjaramillo Can you tell me how you fixed that error?
Jeron, random question, are you a Ghanaian?
Yes
@@JeronDev Hehe, I knew it from your voice :) Is there anyway we could link up for flutter Dev stuff? I'm Ghanaian too
@@OystaFX You can send me an email via norejudeisa@gmail.com Let's pick it up from there.
@@JeronDev Alright sure
I am having this issue, and I have done the above but still not able to fix it. I am using flavours and so I have a folder with all the flavours - google-services. Any ideas how to do this with flavours? Can't get this right?
Not sure what issue you have, I will also check on flavors and get back to you when I find anything. You can explain your issue.
@@JeronDev I use a script in xcode and all flavours - google-services for ios are in a config folder. However when I try google sso it complains with this issue -'Your app is missing support for the following URL schemes: urlScheme - Which when I add it its for web and still does not work. Without it crashes the app. So I really cannot understand what am I doing wrong. x.x