Unique sign in form built with Lit Firebase Auth and Flutter

Tutorial video demonstrating how to create a custom sign in form using the Lit Firebase Auth package in Flutter.
---
Go check out the Amateur Coder KZbin channel for more great content and to see how to add Google, Apple and Twitter authentication to this sign in flow.
Amateur Coder: / @tadaspetra
Add third party auth: • Google, Apple, Twitter...
---
Ready to learn more? The full animation course can be accessed at:
bit.ly/funwithcourse
---
Chapters:
0:00 Overview
2:01 How to use a Custom Painter
16:13 Animating the paint
27:45 Lit and Firebase Initialization
31:09 Sign in form UI
45:55 Auth handlers
50:00 Creating multiple sign in pages
57:53 Animation Package and transitions
1:05:25 Authentication state
1:07:29 Add Page Transitions
1:14:09 Custom Notifications
The UI was greatly inspired by this design by Giga Tamarashvili
dribbble.com/shots/6371155-Si...
---
Source code: github.com/funwithflutter/lit...
--
More about bezier curves:
stackoverflow.com/questions/7...

[@JosueChamorro]

The lit_firebase_auth package is a banger!!! thanks for creating it 😍

[@yatendrakumarofficial]

Thanks man, creators like you make our life easy. Keep creating

[@subhajitgorai7414]

I subscribed the moment I saw that animation

[@FunwithFlutter]

Quite proud of this animation. Thanks

[@tadaspetra]

Fun with Flutter is definitely the best Flutter channel out there!!

[@FunwithFlutter]

Stoooooooppppp (shy face)

[@ruchirrai]

@Treena Jobe Is it on flutter?

[@ruchirrai]

How did I miss you? I have been following many flutter channels for the past few months, but you are unique. Regards and best wishes.

[@FunwithFlutter]

Glad you found me! :)

[@nirliptgaur]

Liked your video so purchased your animation course. Thanks bud!

[@FunwithFlutter]

Thanks man. Appreciate it :)

[@mohamednajari7727]

Wonderful Tuto. tnx a lot !

[@dev.faizan]

Wow lovely style Keep it up...

[@4liexplains486]

beautifully done mate

[@FunwithFlutter]

Thanks!

[@shawngameplayss]

thank for your time it means a lot to us

[@FunwithFlutter]

It's a pleasure ☺️

[@saucey3564]

You are amazing!

wow incredible, this is best channel flutter. +1

[@FunwithFlutter]

Thank you 😊

[@kartikeyraghav4477]

Awesome code and explanation.

[@FunwithFlutter]

Thank you!

[@isaackumbula3202]

So helpful 👍

[@r-techs1068]

That was 'lit'🔥🔥

[@pavan0p]

thank you sir for making this type of video and i love your video and your animation style Love from india

[@FunwithFlutter]

Thank you so much 😀

[@cyberneticscore41]

holy moly dude, this is amazing... i have designed some UI with complicated animations but i can't implement it on my apps :(( . but thanks for you vids. its help me soo much.

[@FunwithFlutter]

Thanks!

[@MostermindTech]

Thank you for the great tutorial! I'm running into an interesting issue where rather than getting a notification in Android when trying to register with a previously used email address, I'm just getting an error about it in the console. Is there something you would suggest I look for to help fix that?

[@mesubhradas]

when press back button after signout its go back to Home Screen with Signout button. Signout should take to Login screen and double tap of back button should confirm exit app with a dialogue box.

[@noamyafim]

thanks for this video. did you update the version?

[@jaggyjut]

Is there a part 2 extending the Sign-In to use Firebase authentication?

Great video, I will probably use your package. However I would like to see more examples of the next step how to build the home screen and get the user, user.id and in the google, apple, twitter case even retrieve pictures, names, etc. Do you have that in some other or planned tutorial? Both Fun with Flutter and Tadas's video is excellent. Both of you also have a very nice way of presenting your material, and of course, the package itself is impressive. Really good job. I am considering buying your animation training course. Looks good too.

[@gkmkumar]

Hi Anders did you achieve this by anyway "how to build the home screen and get the user, user.id and in the google, apple, twitter case even retrieve pictures, names, etc. " ?

[@ayooji6684]

Hi. Thank you for this, I changed the email field to the phone number field,, however, I can't get it to sign in or signup after changing the field. Can you please help with this? thank you

[@juanpablorey7960]

Hey!! what are the extensions that you are susing?

[@SpellOdyssey]

Thanks for this content I appreciate your videos, one thing I wanna ask, is it possible to work with Firebase and not the Lit_firebase , am a newbie honestly and I wanna know , thank you again

[@FunwithFlutter]

Of course!

[@ahsrafmahmud2707]

masallah

[@domnicmoses7396]

Nice Video! really helped me out...but Is there anyway we can make a forgot password functionality and email verification?

[@FunwithFlutter]

Yes, as soon as I become less lazy :)

[@hemdee3087]

pls how can i use cloud firebase

[@Lexp2008]

So what happens when you run the app in an actual phone and the keyboard covers one lower third of the screen?

[@mongezikhumalo4967]

Awe bro, firstly I just wanna say thanks for dope content bro I’m in joburg. So I’m having a problem in the build method of the splash screen, when I try to apply an animation transition to say the AuthScreen it opens the AuthScreen twice. Please help.🙏🏾

[@FunwithFlutter]

Sorry for the late reply man. Hope you managed?

[@doacademy2224]

Thank you very much, Would like to use firebase_core 5.0 and cloud_firestore 0.14+, Do you have plan to update to both pub version?

[@FunwithFlutter]

Yes, someone made a pull request and the code is up on Github, I just need to publish the new version to Pub. But there's a couple of things I want to test before then.

[@doacademy2224]

@@FunwithFlutter Many thanks

[@kwok8943]

Hi. Do you have a video on how to store the user's uID created in the Authentication table into the firestore? Thanks a million!

[@FunwithFlutter]

No unfortunately not. Good idea though. I suggest looking into Firebase functions to do this. Write to Firestore as soon as a new user is created

[@bykenvisions]

Bro i swear if you were not there my college project would have been so novice and trash. You deserve to be supported.....I'll share this with my college developers!!! The only issue is that i am not able to link my project with firebase as i have no prior knowledge of firebase. It always shows me errors and i have no clue how to proceed. If someone could lend a hand in resolving the issue please help as soon as possible because i have to develop that application before this month end!!!!

[@FunwithFlutter]

Hope you've managed?

[@arpitsahu4384]

Hey, Let me know if you still need help in working with Firebase.

[@bykenvisions]

@@FunwithFlutter nope

[@bykenvisions]

@@arpitsahu4384 yeah Arpit I need your help bro

[@arpitsahu4384]

@@bykenvisions Let's connect on instagram? Also tell me more about the error you're getting, and how much have you done already, and in what you need help.

[@saransundaresanmadhavan810]

How to create widgets with the name of the logged-in user & photo of the logged -in user, in the subsequent pages after the login using lit_firebase_auth?

[@KiranVishwak]

Is it possible to create this animation with firebase auth today without the package since u cant use it now?

[@saucey3564]

Would you be willing to show how to save custom user data such as a username in relation to this tutorial? Also, you are awesome for sharing this knowledge thanks.

[@FunwithFlutter]

I really should make more tuts on this. Will do once I have time!

[@saucey3564]

@@FunwithFlutter Wow can't believe I commented on this 2 months ago. Just want to thank you for starting me off on my flutter journey and now 2 months later I'm about to pitch my first flutter app to a friend's company.

[@FunwithFlutter]

@@saucey3564 Sick! That's amazing!

[@qazikhalidamin6804]

the argument type 'double?' can't be assigned to the parameter type 'double'.dartargument_type_not_assignable pls help me i am facing this error while doing Anomation lerpDouble(0, size.height, blueAnim.value) please help

[@nic7993]

Hi. did you figure this out? facing the same issue

[@shanbond007]

I am facing little problem, not regarding this video, this working perfectly with me, and thanks for uploading such a informative video. The Problem I ma facing might be easy with you, but it tool my 4 days. I have images for Facebook + twitter + instagram. OnTap it should ope Facebook App installed in mobile and get the page link which I coded.... I dont want any FB login screen or web view or open in browser, just open it in App. If you or any one can help me, I indeed....Thanks

[@gauravrijal9163]

Hello, lit_firebase_auth: path: /Users/gordon/Documents/Fun with Flutter/projects/lit_firebase_auth what do we need to do for this path....as we don't have this path in our pc...

[@pedrocampos4662]

Wonderful Tuto. where you changed the password message too short

[@brunoneuman6153]

Is it possible change the Error Message in Error Notification Widget? I need translate the message but I didn't found no ways to change it :(

[@FunwithFlutter]

No, but at some point I'll add internationalisation. Then you can define your own messages for everything

[@brunoneuman6153]

@@FunwithFlutter Thanks!!

[@dev.faizan]

can i use it in my app

[@FunwithFlutter]

Sure!

[@joellejoster3298]

Where did you make the login page painter? I can't find the code anywhere.

[@joellejoster3298]

I would like to know the code for the blue and gray pointers on the sign-in page. It was not listed in Link to the Code.

[@FunwithFlutter]

Hmm all the code should be on that Github project

[@VishwatSen]

Getting error in firebase auth. lit_firebase_auth supports old version of firebase widgets.

[@FunwithFlutter]

Will update soon!

[@hemdee3087]

nice video but please i want to add firebase cloud dependencies but i keep having error

[@FunwithFlutter]

These are probably because of the new Firebase packages. They've been updated, and I still need to add support for the newer versions. Technically it's on Github already, but I need to push the new version of the package to pub. Will do it in the next couple of days.

[@philb9313]

@@FunwithFlutter Did you already were able to sort out and test your code? I also would like to use firebase_cloud. But anyhow, brilliant package you have build.

[@Trilzer]

21:15 in liquid anim, parent: animation, says cant assign

[@shogi23]

because you haven't structured Lit you can't use Google Font. Anyway, thank you very much for a good movie

[@helixdynamics9578]

Can I use the source code for my production app???

[@FunwithFlutter]

Not at this stage, hey

[@helixdynamics9578]

@@FunwithFlutter what does that mean ?

[@raymondmichael4987]

This is embarrassing, I get the "Server error" every time I try to signin aor register; and the terminal says can find firebase [DEFAULT], what is going wrong? any help

[@FunwithFlutter]

Did you make sure to initialize Firebase? You need to provide certain configurations and files that point to your Firebase project, and then call initialize

[@raymondmichael4987]

Fun with Flutter 🙆🏾‍♂️🙆🏾‍♂️, Please any hints where to start looking because I have been following your wonderful tutorial

[@ahmedibrahim-a9312]

hi is this package still useable ? I think its very helpful

[@FunwithFlutter]

I need to update it

[@ahmedibrahim-a9312]

@@FunwithFlutter good luck ♡

[@alihassancheema6661]

Respected sir, is it possible to send custom message on phone number? . i want to say just avoid auto-generated message. if yes then please guide me about it.

[@FunwithFlutter]

This package does not yet support phone number Auth. But in Firebase you can customise the messages you send to your users. So I'm sure this is possible

[@johnjamesflashman6856]

I watched the video to the end but found it too difficult to extract the animation code.

[@FunwithFlutter]

Sorry for that. You can get the code from GitHub and take a look at it yourself. It's only two kind of animations. One is the paint, and the other is the Animations package (page transition). Which one did you struggle with?

[@johnjamesflashman6856]

@@FunwithFlutter It was not a complaint, I really enjoy your videos and find them very helpful. I was just being lazy, sorry.

[@FunwithFlutter]

:)

[@pinkbluered7481]

can you update the package?

[@FunwithFlutter]

Gimme more time in the day and I'll do it!!!

[@pinkbluered7481]

@@FunwithFlutter don't stress yourself .. only if you have the time, life is strange at the moment :)

[@ferdinandsteenkamp1333]

Where are you from? You sound South African? :D

[@FunwithFlutter]

Yeeeeee!

[@harshjain4256]

Why didnt you used a lottie animation in the background and controlled it using controller

[@FunwithFlutter]

This would be adaptive to any screen size 😋

[@inchy9401]

Are any of you experiencing issues with android? iOS works perfectly.

[@FunwithFlutter]

What kind of issues?

[@inchy9401]

I am able to create users and login via iOS but not on Android. I created another fresh project and followed steps closely but there seems to be connectivity issues. Can you please confirm it works on Android on your end? I really want to get this working. Looks amazing.

[@FunwithFlutter]

I'll take a look at this! I just released a new version. Make sure to follow the new setups, there have been a lot of changes with Flutter Firebase

[@flavioravier812]

@@FunwithFlutter i have the same problens with flutter web and android. Where i can find those new setups? here? pub.dev/packages/lit_firebase_auth

[@andrewparris5372]

Lit Firebase Auth no longer works, null safety. Animations neat though! Shame I couldn't finish following along.

[@FunwithFlutter]

Yeah I need to give this package some love when I get time.

[@FunwithFlutter]

I like the image you're using :)

[@shanewhite352]

Bullshit without the onscreen keyboard show up, FLUTTER has a major overflow errors which have not been solved, may be that's why you just disabled the onscreen keyboard so the viewers won't notice that there is an error.

[@FunwithFlutter]

Just wrap the content in a SingleChildScrollView. Don’t be rude when you struggle to fix a problem. And Flutter doesn’t have overflow issues. The overflows are warnings which indicate that you should handle layout differently. And the reason the keyboard doesn’t show up is because I was using a Simulator. I suggest you take a look at the Flutter layout docs for further help

[@himanshukandwal3203]

Is this responsive? 🙄

[@FunwithFlutter]

Probably not, but you can definitely make it responsive.