Flutter Web | Add Firebase Authentication and Google Sign in

In this tutorial we will add Firebase Authentication and Google Sign in to a Flutter web application. Beginner friendly.
Written Tutorial: levelup.gitconnected.com/usin...
Relevant Links:
Source code: github.com/funwithflutter/tut...
Firebase Auth package: pub.dev/packages/firebase_auth
Google Sing in package: pub.dev/packages/google_sign_in
Firebase: firebase.google.com/

[@Ruhan885]

Wow. The attention to detail in this video is phenomenal and exactly what you need if you are if you are like me and get stuck on these little errors. Great video.

[@FunwithFlutter]

Awesome, thank you!

[@Salehalanazi-7]

Absolutely love your content and your work. You're very knowledgeable and an excellent teacher. You're very inspiring sir.

[@FunwithFlutter]

Thanks for always being so nice! I really appreciate all of the feedback you give on the videos. It's great motivation for me.

[@rreid2605]

Thanks for this, I've been trying to get this running for several weeks and following this video it now works. It's a great first step but what I really need (and I expect many others also) to is to authenticate using Microsoft, so if you could do that that would be even more great.

[@rajayogan8884]

Great content as always. Thanks man !!

[@FunwithFlutter]

Thanks Raja! We should maybe do a collab at some point if you want!

[@thebaconbreadful]

This Video really helped me and even though the video is a bit log, the structure is great and it's really easy to follow you. Maybe it's because you seem like a happy person :D I would really appreciate a video about providers, especially since I've struggled in the past using data from the User Provider to access data from another provider (using the uid to get access to user data and provide it globally).

[@FunwithFlutter]

Thanks! And I'm glad it helped. I recently made a short video on Provider, and I'll be releasing another in the next couple of days that shows some more advanced usage (StreamProvider as well). After that I'll make more videos on general architecture, maybe do an example app that will help with your use case

[@drewmartin2705]

Thank you so much for this video! I learned a ton.

[@FunwithFlutter]

It's a pleasure!. Thanks for the message, I appreciate it.

[@sachinmirji1098]

Thank you so much for this. Loved the way you showed us.

[@FunwithFlutter]

Thanks for leaving a comment. I'm glad you you enjoyed it.

[@simson9847]

instagram: flutter_video

[@nasuhikeskin]

Thanks for the video, it is very helpful

[@Just_JasonZA]

I had my htm calls in the wrong place took me 3 hours to find your video to find out why I could my web app was failing. dankie MR

[@FunwithFlutter]

Jy is welkom

[@christopherh7918]

Great video. How would you also add a manual sign-in with email address and password, and a registration that syncs with firestore?

[@francodagostino2143]

Thanks for the clear example👍

[@FunwithFlutter]

You’re welcome!

[@yaseraslan6160]

thank you for this , this is a graet

[@jasonetherington6278]

This was a very helpful video. I would like to learn more about provider.

[@FunwithFlutter]

Just released a video on the basics of provider. More to come

[@aliakkawi4759]

Hello Sir and thanks for the great tutorials. When i run my Web app on the computer chrome browser it works great, but when i run it on my Mobile chrome browser and perform Google Sign in, it is stuck on the Google Sign in screen and i have to dismiss it manually to return back to my App. How can i fix that? Thanks

[@chrisodonnell86]

Awesome vid!

[@FunwithFlutter]

Thanks mate

[@aq6601]

Great Video. Please do make a video on provider! Would love to learn it in a bit more detail as well.

[@FunwithFlutter]

I already did! Check out my videos on the channel. I did three new videos on provider after uploading this video

[@bdthombre]

Sorry for out of topic question. Video is great, full of info. But can you please tell which camera and mic setup you used for recording, clarity and voice is so clear...?

[@FunwithFlutter]

Sure! I use a Blue Yeti microphone. Record the audio and screen capture in OBS - getting the perfect audio is not easy, you'll need to play around with a lot of the settings to get it where you want it, also depends on how noisy your recording environment is. You don't need an expensive microphone, though, a cheaper Lavier will do the job great and will probably be better at keeping unwanted noise out. The Blue Yeti picks up EVERYTHING. This video was the first video I used a camera, so I don't really know what I'm doing, but if you care, I'm using a Canon M5.

[@arnoldpretorius]

Are you from South Africa? Your accent sounds South African? Great video! Thanks!

[@FunwithFlutter]

I am !! 😀

[@ahmadkhanahmadzkn]

Yes, I would like to learn more about provider architecture and different ways to use it.

[@FunwithFlutter]

Will do!

[@lucianoricardo598]

I know I'm kinda off topic but does anybody know a good place to stream newly released movies online?

[@jettanderson9828]

@Luciano Ricardo i watch on flixzone. You can find it by googling :)

[@alejandroezequiel265]

@Jett Anderson Yea, have been watching on flixzone for since march myself :)

[@lucianoricardo598]

@Jett Anderson thank you, I signed up and it seems like they got a lot of movies there :D Appreciate it !

[@RRits57]

Good video, thanks

[@FunwithFlutter]

You're welcome

[@robertwagner3780]

I know this video is old, but have you tried to actually run this hosted on firebase? I am having issue with missing plugin exceptions like Auth#registerIdTokenListener and Auth#signInWIthEamilAndPasswrod. I am struggling with this.

[@TheStroker986]

Where did you get the logic at 5:59? Was that provided by firebase or did you make it?

[@FunwithFlutter]

I made that. You can find it in the GitHub repo

[@taufiqtab77]

Thanks

[@FunwithFlutter]

No problem

[@ajinkyax]

subscribed :) you saved my ass

[@dani0ble]

thank you, but i have problem if I open chrome and try login to google there is a message " This browser or application may not be secure"

[@FunwithFlutter]

Is this happening on Localhost? Or on your domain

[@dani0ble]

@@FunwithFlutter on localhost:5000

[@aeggeska1]

I get the following when using Google Sign In: "Couldn't sign you in This browser or app may not be secure. Try using a different browser. If you’re already using a supported browser, you can refresh your screen and try again to sign in. " What is the solution?

[@FunwithFlutter]

Is this on Localhost, or on your domain. You need to configure Firebase to allow certain domains. Same with Google Sign in. By default it only allows Localhost 5000 if I remember correctly. I talk about it in the video (close to the end of the video)

[@FunwithFlutter]

I made a new package called Lit Firebase Auth to make Firebase sign in easier. If you want to check that out

[@shahariarkabir4148]

This video is really helpful. Can you please Please show us facebook sing in for flutter web, android, and ios.

[@vedantyogesh8519]

Whenever I try to enable auth in firebase and run the webapp, it says TypeError: Cannot read property 'app' of undefined. Can someone help?

[@FunwithFlutter]

I think the video shows that error. But it also shows what you should do. Make sure to include the Firebase JS SDK. Add the following to the top of the tag in the web/index.html file:

[@FunwithFlutter]

You're getting that error because the SDK is not initialized. Also make sure to initialize firebase in the index.html file. Take a look at the blog post for this video (link in the description), if you struggle.

[@vedantyogesh8519]

@@FunwithFlutter Thank you so much mate. Love your videos.

[@saagilkhan5854]

For Flutter web should we know HTML,CSS and JavaScript??

[@FunwithFlutter]

Only if you want to make your own plugins, or if you want to do something that is not supported by Flutter web. But under most circumstances, no. Only setup that you might need to do is in the index.html to include other scripts or whatever.

[@robertom7577]

Can you make a video about how to create App Check token on flutter firebase app .Thanks Sir.

[@prashantpandya5397]

hello great work!!! will this work same for android app ?if not can you suggest me?

[@FunwithFlutter]

Thanks man. All of the code will work the same, but you need to do the initialization for Android/iOS - which is different than for web. For example, in this video I modified the index.html to initialize the Firebase app. On Android/iOs you need to do other initializations. There are good instructions on the Firebase website - firebase.google.com/docs/android/setup

[@prashantpandya5397]

@@FunwithFlutter thanks man for help ❤️ and keep growing!!

[@anasghazi6130]

😢nothing is the same in firebase anymore

[@waqasjavaid9274]

28:30 so you are the last American there after Vietnam war?

[@tutankmon7]

Gracias, estuvo muy bien , pero fue una odisea seguirte porque yo hablo español hahah pero muy buen video tuve que usar traductor

[@raven9965]

provider , provider, provider please?

[@FunwithFlutter]

Yes, yes, yes.

[@eightrice]

In the firebase_auth_service file you have the type User, which is defined in both /models/user.dart and firebase_auth.dart Furthermore, no one gives a fuck that the microphone is covering your keyboard.

[@FunwithFlutter]

Take note that recently the FlutterFire plugins have had a lot of breaking changes. A lot of what is said in this video is based off of previous releases. If you want to follow this exactly then use the firebase versions I use in the vid. Otherwise I suggest you read the new documentation that the Flutter team has made for the new versions. Also please be mindful that I'm not obligated to you or anyone else to provide these resources. I'm doing it because I want to, and if I want to mention the fact that the microphone is blocking my keyboard then that's what I will do.

[@eightrice]

@@FunwithFlutter Thanks for the effort and don't let the worst of me get the best of you.