Flutter Firebase Authentication - The Clean Way

[@RobertBrunhage]

Hope you enjoyed the video! I didn't cover showing the error messages as depending on your implementation you may want to do it differently. But this should get you up and running quickly with Firebase Authentication!

[@techwithdenis]

Having issues trying to show error message

[@kelvinwuko]

Thanks for your clean and useful tutorial, but how can I show the error message when the class is stateless? thanks

[@techwithdenis]

@@kelvinwuko The way I did mine (might not be good but might help you)... I created a new class that extends ChangeNotifier class, then I created 2 private fields called String _error ... i den created setters and getters to use and access the private fields from outside the class. Inside the catch block of the try catch in the authenticationservice class, I call the setter for the _error and set e.message.tostring() to the _error then I return "error" In my login.dart file, I do a check to see if the return from the authenticationservice == "error" I use the _error getter to display the error message Looks like a long process but it worked for me, if u don't understand I can send u a snippet of what I did

[@sylvesterasiedu]

@@techwithdenis Hello Denis, I am interested in your solution, please. Kindly share it with me. My email is: s l y t e t e y [at] g m a i l [dot] c o m

[@techwithdenis]

@@sylvesterasiedu How should i share it with you cause i integrated it directly in a private project. I can have a short online meeting with you via google meet if you don't mind. Just give me a time i will send you a link, then i can share my screen with you and show you what i did.

[@massimuccio007]

MOST UP-TO-DATE-COMPREHENSIVE-ALL-INCLUSIVE-FIREBASE-TUTORIAL, EVER!.... Thanx!!!!!!!

[@RobertBrunhage]

Wooo awesome! Thanks I really appreciate it and glad it is helpful! 🎉

[@massimuccio007]

@@RobertBrunhage DEFINITELY!... there are tons of tutorials out there that explain authentication but none of them seems to include the Initialization part (specially since last firebase update).... and for a NOVICE like me it was crucial..... thanx again!

[@abrarahmeda8989]

bro does this tutorial have token auth or need to login every time

[@phen2841]

Bro I cannot tell you how many pages I've looked at to find such an elegant solution. You've got not just a new subscriber but a fan!!

[@RobertBrunhage]

Awesome glad to hear it helped!

[@Zizo1st]

In new version of Stream providers you should declare the "initialData" parameter, you can set it to null. StreamProvider( create: (context) => context.read().authStateChanges, initialData: null),

[@mikewski4410]

I try but it said it can not be null

[@zhzh724]

Thank you bro

[@Zizo1st]

@@zhzh724 welcome :)

[@chipekowasa6571]

Life saver

[@marcosantos9071]

@@mikewski4410 did you solve it? i have the same problem

[@acarvey]

That was to the point, no BS, 100% clear and very helpful. Thank you for this. (:

[@HMR422]

Wow, I'm speechless, you did in 8 minutes what other people can't in 1 hour. Thanks!

[@ianhilliard2578]

An excellent video! As have many developers I recently migrated to Dart and Flutter and the knowledge you have shared is invaluable. This is the ONLY video or blog post I have found that gives a good foundation to start building a complete authentication service. Thank you.

[@abrarahmeda8989]

bro does this tutorial have token auth or need to login every time

[@1140hopeful]

Wow your content is getting so much better over time. Keep it up!

[@ephysio7357]

Been waiting for this since two weeks and haven't been disapointed ! Thank you :D !

[@georgeansong9348]

I keet getting Error: Could not find the correct Provider above this Authenticate Widget, any help

[@rcholding5383]

Coming across same error. Please help

[@rcholding5383]

Raised a question - stackoverflow.com/questions/67247513/could-not-find-the-correct-provideruser-above-this-authenticationwrapper-widge

[@raghav042]

Provider

[@tadaspetra]

Really great video! I really love the new style 😊

[@RobertBrunhage]

Thanks man, already working on the next!

[@BrendenBishop]

Any chance you can provide an update to this? After Flutter 2.0, for some reason I always get the following...Error: Could not find the correct Provider above this AuthenticationWrapper Widget

[@rcholding5383]

Hello Brenden, did you find an answer to this? Thanks! I raised a question in StackOverflow as well stackoverflow.com/questions/61168675/providernotfoundexception-error-could-not-find-the-correct-providerlayoutdata

[@BrendenBishop]

@@rcholding5383 Yes, the types are very specific so in null safety 2.0 world, the type is no longer its doing that allowed me to find the provider.

[@sahilkancherla2890]

@@BrendenBishop I am still getting the "Could not find the correct Provider above this AuthenticationWrapper Widget" error. Could you go into further detail about how you resolved it?

[@sajidAli-sz4kn]

@@BrendenBishop hello, I'm having this problem except I get could not found the correct Provider(AunthenticationService) I'm following this tutorial. Can you help me out please, I have added ? Sign where I can but still showing the same error. One more thing when I hot reload I get this error one time but when I hot restart I get this error 2 times. Please help me out, it will be very kind of you

[@mohamedhussein5080]

To the point finally. Thanks man!

[@ashrafahamed4027]

Great road to 100k subs

[@chipekowasa6571]

This is the one you're looking for! Best Firebase Auth Setup for flutter! Awesome!

[@thisisjaymehta]

Need a null safety version of this please.

[@deepseadiver971]

I 2nd that!!! Hope to see an updated video coming soon. I keep getting hella errors..

[@abelsajigeorge8553]

@@deepseadiver971 we definitely need one i third that

[@marcosantos9071]

i forth that... could anybody do it?

[@joyanngitau6682]

ikrr...we need a new one

[@learnwitharslan1049]

congrats you earned a subscriber

[@behzodfayziev7804]

Thanks a lot for UPDATES!!! I have been waiting for a long time)))

[@RobertBrunhage]

🙂

[@arthurlage8662]

Thank you from Brazil man

[@idirtalem3146]

I have been looking for this for a long time, thank you sir.

[@margeo20]

Hello mate. As a signed in user, when reloading the page, for a sec before loading the HomePage() the SignInPage() appears and then it goes to the HomePage. Is there a way to prevent showing the SignInPage in that case?

[@william_chidube]

Maybe set a default state that shows first no matter what. Something like a busy state will do. Neither sign in nor signup should be accessed until login state is ascertained. Just a suggestion. I'm sure you've solved this by now

[@nehrydedoro]

one of the best concise and clear tutorial of firebase auth double thumbs up ! 👍👍

[@silas_wolf]

This content is absolutely amazing! Thank you so much!

[@RobertBrunhage]

Glad you enjoy it!

[@burakbirer]

Hi @Robert Brunhage thank you for amazing videos. How can we add a circular progress indicator or a loading state this clean architecture? Do we need a future builder in the ui or is there a better way for this one?

[@arnabbiswas8414]

Clean explanation

[@vijayprajapati7484]

Thank you for Easy Explanation

[@haripriyabaskaran5498]

Nice editing.. Want to see more such videos

[@RobertBrunhage]

More coming!

[@schmoogen]

Would it be recommended to rely on this multiprovider method for most Firebase services? I imagine managing Firestore data calls this way would also be relatively seamless.

[@nsiddiqi7997]

The name 'AuthenticationService' isn't a type so it can't be used as a type argument. This is what I got. Can you please recommend a way to resolve this problem.

[@someguy007]

Great vid thanks. At 2:20, u have SignIn(email, password) and same with SignUp. Where do the full details usually go for Signup? Like names, nicknames, dob etc? would u just extend the parameters of SignUp to include those Strings? and if so, what is the method from the firebaseAuth.class?

[@veyselaksin]

Did you find any answer? I'm wondering about that too

[@RajeshPachaikani]

Can you make a null-safe version? Thanks a lot for this one.

[@Hari-mt8xo]

In main.dart first line Add //@dart=2.9

[@kuba01251]

Hi. Have you ever had problem like this 'Ignoring header X-Firebase-Locale because its value was null.'?

[@codehermano8002]

have same problem

[@kuba01251]

​@@gabrielchenbr Try to turn on wi-fi connection in your smartphon if you run it on your phone. I know it's stupid but it worked for me.

[@GhostMe6]

Did someone fix the issue? I'm stucked with this problem and is not cause about my Wi-Fi connection, because i'm debugging on my physical cell phone, also i tried running the release version but stills not working.

[@princesanjivy9701]

This what I've been looking for 😍

[@SAURABHGUPTA_DINOSAUR]

what if i want to display my onboarding page first rather than wrapper?? LOGIN doesn't works that way.....why???

[@bigmouthstrks]

Amazing video!! very short and precise. But I'm having trouble with this line of code: // Button for loggin in // onPressed: () { context.read().signIn(); } The word READ is underlined in red, and that is the only error. I checked the code and it's exactly like yours, any idea? Thanks a lot!!

[@bigmouthstrks]

UPDATE: In order for 'read' method to work you only need to import 'package:provider/provider.dart' which also has to be on your .yaml file

@@bigmouthstrks Gracias!!!

[@cnorse]

Thanks!

[@kithusshandraveendran6981]

@@bigmouthstrks how to solve it?

[@bigmouthstrks]

@@kithusshandraveendran6981 importing provider in the view where you are using the user login and algo add provider dependency on your pubspec.yaml file

[@cinehaus9109]

Really nice, thank you for this update tutorial. I just wish you would also cover how to show the error messages. Currently it just throws Platform Exception and crashes the app with 'Extension host terminated unexpectedly'. Also it would be really nice if you could add to this tutorial and demonstrate how to change state to a signup screen (perhaps via a FlatButton next to the current RaisedButton), making this into a more complete and useful minimal starter code for Firebase Auth.

[@RobertBrunhage]

Do you have the latest Firebase auth version? As the Platform Exception should not happen and in the code we catch the FirebaseAuthException and returns its message. To handle that you would just await the call and display the message. About the signUp I didn't cover as it's more or less the same as signIn but just a matter of calling the signUp method instead. Thanks for the feedback and taking it all in to consideration! Next time I will do a more complete one!

[@sadhlife]

Damn, nice video, really wanted something like this. Quick question though: how would you replace the initial load with a splash screen instead of showing the login page by default?

[@techwithdenis]

You can create a splash screen then load it by default but set a timer say 5-10 seconds depends on what u want the when the timer is over redirect to the login page

[@sadhlife]

@@techwithdenis that's a bad idea

[@techwithdenis]

@@sadhlife are u trying to show a splash screen or u want to customize your initialization screen (the white loading screen that comes up once you start the app)?

[@nimas7840]

Thanks, man. Helpful.

[@kanogl]

Great video! thanks for this content. I had a few problems figuring out how to import provider, but afte googling a bit and boxing with the warning 'paramenter initialData is required' it worked. Thanks again.

[@vedantbalachandra1304]

I didnt understand that step when u used Provider can from where u got that dependency

[@jorgewandersantanaurena422]

Awesome content. Thanks.

[@AwesomeasimJunaid]

Thanks a lot for helping !

[@adamthedev]

Epic stuff man. Thanks

[@antonygush2425]

Hi Robert. Thanks for the video. I am new to Flutter. May i know what is the purpose of adding widgetflutterbinding at the top. Documentation is bit confusing me... :( some flutter examples don't have that code at all, so i am confused what is that code exactly doing.

[@RobertBrunhage]

It's a way to set the glue between the widgets and the Flutter engine before it has been done itself. This happens automatically a bit after the main method is called. But as we want to initialize a class async then before that is done we need to say: "Hey, can we do the initialization now and after that we initialize the class" My understanding is that the binding is required to call native code, but if anyone has a better explaination be sure to jump in!

[@antonygush2425]

@@RobertBrunhage Awesome. Its clear now :) Thanks again.

[@Tom-um8mr]

Very nice tutorial!

[@MaxS1988]

Great tutorial, thank you! I did struggle a lot with the check if the user email is already verified upon login, combined with the rerouting to a verification screen to trigger the resend of the confirmation mail, in case the user is not verified. Any chance you could add that or give a hint on what would be the cleanest way in your opinion? Many thanks - keep up the great work!

[@vishaldrajpara5343]

Which extension you're using for the special symbols....

[@klutch4198]

great job!

[@saimonsaimon6205]

Very clear and very useful for me as a beginer.thanks sir.post phone otp login in clean way.

[@kunalbhalgat4004]

i am getting error in this line create: (_) => AuthenticationService(FirebaseAuth.instance), my error is The named parameter 'create' isn't defined.

[@koredebello6785]

Same here man

[@nsiddiqi7997]

Thank you for sharing such valuable information. However, Firebase code for adding a new User and Sign-in authentication methods are constantly changing. This deprecation can be seen in so many online Videos on this subject. I tried your code and there is deprecation where certain lines are not recognized, for example, "context.read()" is not recognized. Can you please suggest a fix for this?

[@gayanlakmal2469]

Super Cool Thanks a lot :)

[@92blckt]

Hey, just a doubt... if you initalize flutter at the main() you dont need to do it anymore, right? in other screens where will be using storage and fiurestore too...

[@RobertBrunhage]

Nope, only once :)

[@92blckt]

@@RobertBrunhage Thank you Robert, great content =)

[@polberus100]

When i use your fonction "Future signIn" , I got null problem. Why ?

[@vyshnavsasidharan1084]

this really helped me.. Thank you bro

[@areejalazzani6186]

THANK YOU

[@aonerd]

Thank you very much, very clear

[@kaivalpatel3990]

hey robert, can u please tell which font you use in vscode?

[@RobertBrunhage]

JetBrains Mono

[@mansour.o2652]

Thanks a lot !!! you're doing hight quality content

[@DavidHust]

Why does _firebaseAuth need to be passed as a parameter to the AuthenticationService constructor? Can't firebaseAuth just be initialized inside the AuthenticationService class?

[@calvin32897]

Thank you Robert. Im an noob in flutter. This tutorial is really helpful. how would u make a register form base on this tutorial?

[@RobertBrunhage]

About the same as the sign in but instead call the signUp method :)

[@calvin32897]

@@RobertBrunhage would you make a video one. day? Cause I'm confused that how to store the user data after registration. I made one by myself, but it pops a bunch of errors lol

[@jonbikaku6133]

woow such a Fireship vibe but good content!

[@Krupupakku]

When using StreamProvider (inside the MultiProvider), it requires an initialData. Do you know what can I use? At the moment I put a null and seems working, but I don't know if it's the best.

[@MisterDibitybopty]

I'm in the same boat, I'm getting an error with null.

[@tomicriedel5005]

Hey! Nice video, but from 6:10 to 6:40 you are working with context.read When I use context.read, then I have an error at .read in my IDE That's the following one: The method 'read' isn't defined for the type 'BuildContext'. Do anyone know how to fix that?

[@Krupupakku]

Just import manually the provider package.

[@tomicriedel5005]

@@Krupupakku OMG I am so stupid xD I'm sitting in front of my laptop right now and I'm like why are you so stupid xD Anyway, thanks a lot, it runs.

[@MatheusCabraldosSantos]

@@Krupupakku Thank you, I had the same problem

[@hrishabhkumar1954]

Which version are you using

[@malun22]

Any idea on how to get this to work with a custom user model? I mean mapping the firebaseuser like this is not the problem: Stream get authStateChanges => _firebaseAuth.authStateChanges().map(_mapFirebaseUser); But how to create a Stream not listening to the _firebaseAuth.authStateChanges but to the changes made in the custom user model?

[@dennycad7859]

Awesome.

[@АнуарТабылдыулы]

I have user side app, and I wanna learn how to make admin side app. It would be very helpful if you make tutorial 😇

[@jankenzimasangkay1504]

in the authentication wrapper what is the best method for bottomnavigationbar? i want to change the bottom navbar item LoginPage to UserProfile. im stuck in the authenticationwrapper.

[@jawadahmed6190]

The tutorial is really good but there is one small issue if we go from Home page to the another Page A using Navigator the top level Authentication Wrapper will be replaced and this will effect the sign-out functionality. The sign out functionality will not going to work on page A. Kindly clarify this also :)

[@RobertBrunhage]

True, but that can be added easily by doing something like: Navigator.of(context).pushNamedAndRemoveUntil('/', (Route route) => false); Missed that so thanks for pointing it out!

[@quicksketch1617]

@@RobertBrunhage I will try to follow, where is that navigation in the code?

[@mexirican316]

@Jawad Ahmed can you post a link where you used his Navigator solution?

[@sylvesterasiedu]

@@RobertBrunhage Hello, I tried this but didn't work. Any other recommendation?

[@thegorilla8395]

same issue

[@alitaylan4267]

Would it be better to add async-await to signout function, like "await context.read().signOut()" which is located at "7:33" of the video? @RobertBrunhage

[@aventura1266]

Hey mate thanks for your great video, made it through with some workarounds. Is there an easy way I can apply *just* the email textfield, use the signInWithCredential (or similar methods) and *then* get the password textfield to appear afterwards? If email is verified, sign-in pages ensues, and similarly the sign-up page on unverified email. This will probably be pretty clunky if I have to make three separate pages for all of these actions.

[@basspalace2920]

How do I handle authentication if the user decides to add a parameter to the url on a web app? Right now I have auth and navigation set up, but if the user types the right words after the ‘#’ in the url it navigates them to the page they typed.

[@richpo9814]

Do you know how to schedule meetings and send invitations to the people you want to have a meeting with in flutter? Similar to Zoom meetings.

[@whoIsDeck]

Nice mate

[@yogpanjarale]

Fireship style thumbnail

[@joaovitoralvesalmeida8867]

I'm getting this error now: Error: Cannot run with sound null safety, because the following dependencies don't support null safety: - package:provider is there something wrong with the package?

[@sidmadkaikar1216]

Great video, I have followed everything you showed but getting firebase core intialization error..please help🙏🏻

[@pulscare6272]

you r gem bro. love you.

[@pointercodebot8936]

Any idea why the Stream is alerting of the user on refresh for web after following this guide? End symptom is that for web on browser refresh, the User is still logged in but the UI responds like the user is not logged in. Great video, thanks

[@poisonels8023]

More videos please

[@zulqadarabbas7567]

Question, what if I want the user to be directed to a welcome screen before the Login screen? If I change the Login Screen to another module the user gets logged it but the home screen doesnt show

[@afranmuzammil]

Tried to call Provider.of. This is likely a mistake and is therefore unsupported. If you want to expose a variable that can be anything, consider changing `dynamic` to `Object` instead. 'package:provider/src/provider.dart': Failed assertion: line 304 pos 7: 'T != dynamic' please can anyone help me out with this provider error?

[@pierreschaeffer3023]

same ! nobody have an issue ?

[@danielestebanvalerogaleano3130]

delete this => context.read()().signIn( email: emailController.text.trim(), password: passwordController.text.trim()); for this => final provider = Provider.of(context, listen: false); provider.signIn( email: emailController.text.trim(), password: passwordController.text.trim());

[@imchoks5527]

So very fast dude!. Can i see where did you save the code?

[@doulaeiiminc7430]

Idk if anyone can help me abeg. I want admin login to go to separate page

[@ricard458]

@Robert Brunhage If you tap back button of the smartphone the app closes. Is this expected?

[@The0nlySplash]

Just surround your Home page with a WillPopScope then the user wont be able to navigate back

[@noelcovarrubias7490]

Thank you, you saved me! :)

[@donk0g]

Can you make a video how to do the validator in this form or just send me a example , and thankes for this video

[@quicksketch1617]

Thank you. But I have a question, in the other tutorial you use GlobalKey and in that just have a controller. What it's the difference? I don't know nothing about that, if I use controller I didn't need GlobalKey? I was trying to use the validation, but the method of Authentication it's not static. I can't use something like this? RaisedButton( onPressed: signIn(), //that didn't work child: Text('Sign in'), ) Future signIn() async { final formState = _formKey.currentState; if (formState.validate()) { formState.save(); AuthenticationService.signIn(email: _email, password: _password);//error static method } }

[@testerhuawei7946]

Why to use a stream on the authenticationService class??

[@wahyualfandi611]

can you make updated version of this please?

[@haidernakara5787]

how do we do it if we are using routes instead of return widget every time

[@sivamaniv9579]

Instead of Widget?. Return a widget with a function that will always call. i.e return Text("Signed In ${ (){ Navigator or page[target_index]}");

[@sivamaniv9579]

Returning a widget with a string and page_navigation_function is useless until it have certain animation delay.

[@amansingh.h716]

can u please tell the difference btw read,watch and select method

[@thegorilla8395]

i love it

[@OGIMxGaMeR]

How would you implement A Sign up button? The problem is that if you go to another page from this, and then in the Signup page call "Signup" using the AuthState, you won't be redirected to the HomePage because you have changed the page in between. How do you approach this?

[@Moneybefehl]

i have the same problem, did you find a solution?

[@rolo1632]

Can you make an updated one?

[@ToddDenmar]

do you have update for multiprovider builder

[@franciscopalacios3799]

Does anyone know why it marks me as error "read" in "context.read ..." '?

[@visionl.3754]

@Francisco Palacious, you must include the provider in the dart file. Hope this solves the issue.

[@robertpietraru1939]

What theme is that?

[@nimas7840]

Your problem will be fixed with this: Convert: final firebaseUser = context.watch(); into this: final firebaseUser = context.watch();