Flutter Firebase Authentication Tutorial For Beginners [2023] - ALL Signup/Login Methods Included!
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Learn about Firebase Authentication with Flutter that includes Email/Password Signup & Login, Google Sign In, Facebook Sign In, Phone Verification, FlutterFire CLI & State Management using Provider which works on Android, iOS and Web!
Discord: / discord
Source Code: github.com/RivaanRanawat/flut...
Firebase Auth Version: 3.3.14
Timestamps:
(00:00:00) Introduction
(00:00:33) Starter Project
(00:03:25) Connecting to Firebase
(00:12:07) Email Password Signup
(00:20:37) Email Verification
(00:23:00) Email Password Login
(00:28:12) Phone Sign In
(00:46:13) Google Sign In
(01:02:08) Facebook Sign In
(01:20:23) Anonymous Sign In
(01:21:34) State Management
(01:29:17) Displaying User Details
(01:32:03) Sign out
(01:33:10) Delete Account
(01:34:25) Conclusion
Special Thanks:
@RobertBrunhage - • Flutter Firebase Authe...
@MarcusNg - • Flutter Firebase Setup...
Resources:
Facebook Developer: developers.facebook.com
Google Cloud: cloud.google.com/
More About Auth: firebase.flutter.dev/docs/aut...
Connect With Me Here:
Instagram: / optimalcoding
GitHub: github.com/rivaanranawat
Linkedin: / rivaan-ra. .
Facebook: / rivaan.ranawat
Mail: namanrivaan@gmail.com
Medium: / namanrivaan
Twitter: / ranawatrivaan
#flutter #firebase #auth #flutterfire
![Flutter Firebase Authentication [2024] The Cleanest Way](/img/n.gif)
Would love to have you in our community! Join using this link: discord.com/invite/Q8Rx8YWFVF
It would've been better if you also taught us apple sign in
You dropped your crown 👑. You deserve more. Keep going , you're doing great
Thank you so much🙌
man, I can't help you enough, you literally just saved my entire project!!!
Happy to know it helped 🙂
This is awesome! Thank you for making this super detailed video.
My Pleasure Rod!
You literally saved my graduation project, thank you A LOTTTTTTTTTT ❤❤❤❤ wish you the best in your life because of this huge help you saved me with
Thank you so much Omar!
absolutely love this. Entertaining and bloody useful
Thanks!!
Amazing Tutorial, really love this explanation!
Thanks bro😘
Most Welcome!
Best Video for authentication, Thank you for making this video for us
You're welcome! Glad you found it helpful.
Great Flutter Firebase Auth Course!
Thank you!
Really helpful Rivaan👏
Glad it was helpful, Jibin!
Very useful video sir i was just looking for that ❤️❤️
Happy to help!
Learning with fun ,Great work Sir Thank you
Happy to hear that!
best flutter firebase tutorial ever! tnx man!
Glad you think so!
Great work!
Thanks!
Very nice Tutorial
Glad you like it!
Super Sir hats off to you!
Thank you!
Thank you, sir . You help me a lot
Welcome!
Amazing Tutorial !!!!
Thanks!
Let's go!!!
You are the best!
Thanks!
really cool!!
Thank you!
Thanks for the combine knowledge sir
Pleasure!
Thanks champ ✅👍
You're welcome!
Hey for ios it says confirmed on meta for developers site but for android it shows error like this:
Error(s) found while validating app-ads.txt. Please select Confirm ownership for more details.
And login to fb page is not showing in app... kindly help me in this.
coooool!!
🔥🤩🙌
Thanks
Thanks you bro..❤️🙏
Welcome!
THANK YOU BRO 😎
Most Welcome!
Good job bro....👍👌💐
Thank you!
@@RivaanRanawat ❤️🙏
hats off king 👑🥺, love from Pakistan ✨
Thank you so much Rahim!
I coudn´t use the Facebook login 'cause sends me this message "We can’t find your developer website URL in your App Store post." and I don't have it, currently I'm a student
When I tried this facebook kept complaining can't find my app on the playstore and the app has standard access to public_profile and to use Facebook Login I have to switch public_profile to advanced access.
Awesome. Your tutorial is very useful.
Please make a video on app check in flutter app (android, iOS, Web).
Thank you :)
Thank you, noted!
Hello sir how i send idToken and accessToken to nodejs if token or accessToken is valid check by nodejs then it return some data
what it's showing platform Exception when i trying to google sign?
A very good tutorial! Can you please show a tutorial on how to combine 2 streams together? I'm working on a show user that check-in at the same place but is struggling hard to do it :"(
I didn't understand the question, can you please elaborate?
what's the xcode for windows user? I don't have that option visible
i got error on context.read -The method 'read' isn't defined for the type 'BuildContext'
Best video
Thank you!
Best Video
Thank you!
Pub installs executables into C:\Users\dell\AppData\Local\Pub\Cache\bin, which is not on your path. You can fix that by adding that directory to your system's "Path" environment variable. A web search for "configure windows path" will show you how.
Which path should i add??
Add "C:\Users\dell\AppData\Local\Pub\Cache\bin" to your environment variables
Long Live Rivaan
Thanks!!
thank u so much ,love from pak
Thank you🙂🙌
Why do i keep getting "given string null or empty" upon signup Authentication
have you ever thought of building a flutter AI Vs Code extension?
can we add details like name during the sign up
🤣 Loved the error moments at phone auth!
🤣🤣
where can i find the starter code template
What can you say about the warning "Don't use 'BuildContext's across async gaps.
Try rewriting the code to not reference the 'BuildContext'."? thanks again
You can solve it like this, not sure if it's correct way - adding statement like: context.mounted ? (show snack bar function) : null;
I guess I'll leave it here for future ppl
Flutter design patterns MVVM MVC MVP
Thanks for the tuto ! Very useful :) I've got only one problem, I have to restart my app to access the homescreen after tap on button login. Any ideas ?
Try using Navigator.of(context).pushNamedAndRemoveUntil('/home-screen', (Route route) => false);
@@RivaanRanawatThis tuto was very useful but i've almost the same problem, i tried to clone the code but there was no access to the homescreen so i had one but they told me i was using a check operator on a null value(uid). Do u have any ideas to resolv that ? Tks
So does sign out method signs out from any authentication from where the user has logged in like either google, fb or phone?
Yes
Please make another video for Firebase authentication with yahoo
I have a qüestion: How can I solve the problem that a phone number is misspelled and therefore a OTP SMS is sent to a stranger? I cant use firestore rules for check the database, because wrong user is not auhenticated. I need that my app users send the correct phone number (self), and if he write bad, don't send anybody. And the another problem is that, if you say check the SIM card, is only available on Android, but not on Ios.
Help, please
I'm not sure how we can fetch user's own number. All the packages I know have been deprecated or are discontinued.
can you do a video on full Api integration of a project like Api made with node or python
Already in work! Coming very soon!
hello, thank you for this video, i keep getting an exception 'unable to establish connection on channel' when I click the signup button, I've tried basically everything I've seen online and nothing is working
hi! I am also facing the same issue. Have you found a fix?
@ashishsam26 hi, yes I've fixed it. My issues was that I was passing "emailController so when i changed it to emailController.value.text, it worked. The same for password
I hope it works for you.
Please update me if you can
Thank a lot Rivaan, It helped me lot. I am facing one bug , As I navigate from Login page(First Screen to display) to signinpage I dont get migrated to the homescreen, When I refresh again it gets migrated to the homescreen, please tell me what i am doing wrong.
Try popping off all the routes using this: Navigator.of(context).pushNamedAndRemoveUntil('/', (Route route) => false);
Let me know if it works!
@@RivaanRanawat I have tried it but it first redirects me to firstscreen and then to homescreen, I have tried printing the User credntials but when do hot refresh in logged in state it first prints null and then User credentials,I dont understand why.
Sir it shows error = firebase_auth/channel-error Unable to establish connection on channel
sir please help me . I got stucked into it from evening, But I cant solved it
did you resolved it?
How can I change the name and the logo of google_sign_in with flutter?
Sorry, I didn't understand your question...
Ignoring header X-Firebase-Locale because its value was null. I got this problem. Can anyone help me??
Let me know if this helps: stackoverflow.com/questions/64727665/w-system-ignoring-header-x-firebase-locale-because-its-value-was-null
I have some ideas in my head, but i would like to ask, how we may redirect user after successfull sign in using number. As the phone entering screen is on the separate page and AuthWrapper won't redirect user automatically.
by just using Navigator.pushReplacementUntil?
@@RivaanRanawat already done that, thx now it works
Custom field authentication hasn't been covered in the vedio i think. Actually i wanted to use it in a project...
What do you mean by Custom Field Authentication? Any links about what it is?
When I add the icon to the button, it gives an error, and when I add a picture to the custom button, it gives an error, I can't figure it out.
I'm not sure I understand...
i am struggling in getting sha1 key 😑
Hey rivaan please make a video on the appointment booking app.
What would you like to see in it?
@@RivaanRanawat Consumer can book an appointment to doctor or etc!! Like home page shows the list of doctors with their locations and I prefer the nearest and book appointment for 5.00PM.
How would you implement sign in for different types of users i.e bussinesses and customer
I would use Firestore for that, not Firebase Auth. In Firestore user collection, add a property named 'type' where I will store what type of user it is- normal, admin, customer etc. Then, when retrieving the data from firestore and saving data to user provider, check if the type = user. if that's the case, then render the user based screen otherwise, admin screen.
@@RivaanRanawat Wow thanks so much your content is amazing. I am very greatfull
npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and try again.
why is this error occured ?
The error occurs because the location of the npm files is not set. You can fix this by adding the npm file path to the PATH environment variable
System Properties > Advanced > Environment Variables > System variables > edit Path >add npm path > apply > restart terminal
This should resolve the issue.
have any solution without google auth provider, remove others firebase auth provider credentials on same gmail
Not sure I understand..
By Android, I get the error that my phone has no Google Services? Whats wrong
Arr you using Android Emulator?
Is it necessary to use node as we are using npm
To use nam, you need to install node - if that's what youre asking
Hi Rivaan
I am getting error "Ignoring header X-Firebase-Locale because its value was null."
Please help to resolve this error
same here, do you have solution now?
Let me know if this helps y'all: stackoverflow.com/questions/64727665/w-system-ignoring-header-x-firebase-locale-because-its-value-was-null
Firebase login is not working but registration is going pretty well. Sir do you have idea how to resolve that?
Would like to see the code you've implemented. Can you please share your GitHub repository?
Bro is this tutorial applied Link auth provider credentials to a user account
Nope, but Firebase auth documentation is pretty clear about it.
Thank you riwaan please add firebase storage
Short tutorial coming on that soon!
Hello! I followed all the steps for the Google Sign in method but no user is added on my Firebase, can you help me please?
The user is not added to Firebase Firestore Or Firebase Auth?
@@RivaanRanawat the authentification section
please make a separate video for CRUD Operations
Noted!
❤️
🤩🙌🔥
does anyone have starting code for this project
Hey Prashant! These are just a bunch of buttons in a column. Point of this video is to help you integrate auth to your app quickly
please make Firebase CRUD with Riverpod☺
We've got a few projects with Firebase & Riverpod on the channel - WhatsApp, Reddit
Security implementation in fluttter app
Hi,
Can you help me to do some change in my Flutter App. Actually it's not made by me, It is the Instagram App which you created.
Sure.
@@RivaanRanawat How to contact you?
got error while installing firebase tools, as Skipping optional dependency puppeter, looks likenthat, is that package mandatory?
ERROR: Failed to set up Chromium r869685! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.
[Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/firebase-tools/node_modules/puppeteer/.local-chromium'] {
errno: -13,
code: 'EACCES',
syscall: 'mkdir',
path: '/usr/local/lib/node_modules/firebase-tools/node_modules/puppeteer/.local-chromium'
}
please make one for Quora clone please
please make video on background services
Noted!
when I enter wrong sms code it turns out error
Yep, it goes to the catch block and follows the logic written there.
Please add
Firebase email verification redirect 🙏
This tutorial includes Email Verification!
Please make a seperate course for flutter firebase CRUD with image and other files upload
Noted, thanks for the request!
Why are you not importing facebook sdk in your app?
I didn't get you..
@@RivaanRanawat You did not download the facebook sdk and import it into your project files. why?
Great tutorial , It would have more better if you have included forgot password too!
It would have been! Not sure how I forgot that🥲
maza a gya Blur wale topic pr or OTP pr😂😂😂😂
🤣🤣 Happy you had fun!
can you do apple signing also
Oh, I missed it in this one! Will do:)
@@RivaanRanawat thank you 😊
Bro can you give me the source code please?? the given link is not working.. thank you.
Can you please try again? I had forgotten to make the repository public😅
@@RivaanRanawat thank you bro..You are too good..🙏❤️
@@somnathdas8922 Thank you!
❤️
Why not with getx
Coming with GetX very soon!
Flutter stripe payment gateway, invoice generate
Including that in one of the clone videos!
@@RivaanRanawat It will be interesting! I will watch it :)
Bro tried so hard to hide his number , still its visible at timestamp 42:42 😅🤫
Btw great video 😁
i pray that your next video would be whatsapp clone
WhatsApp Clone is coming pretty soon with multiple features but it's not the next one. Have great ones too in line 🙂
@@RivaanRanawat I would love it 😀 😍
You forget to blur your number at 43:00
Oh no, thanks for sharing!
sir make videos in hindi also
Have a lot on my plate currently, won't be possible as of now. I'll try to do it in mid 2023.
Flutter multivendor ecommerce app
Ecommerce app coming sooner than you'd expect!
42:38 i got ur phone number but luckily there is no whatsapp on ur number 😅😅😅😅