Flutter Firebase Auth - The Cleanest & Fastest Way - IOS & Android

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 มิ.ย. 2024
  • This is how to authenticate IOS and Android Users with Flutter and Firebase. All the steps to connect your Flutter Firebase Auth App are in the description. This is the most simple, cleanest and fastest way to connect your Flutter App to Firebase Authentication. Make sure to follow every step correctly and at the end you will have an authentication with Firebase and Flutter for IOS and Android devices. Also, we don't use any state management for this example, because we want to use only Firebase packages. We start by installing the dependencies (Firebase auth and Firebase Core), then we connect the Flutter application to Firebase for IOS and Android. To finish, we code step by step the Flutter and Firebase Authentication app in 5 simples steps. Firebase authentication is one of the simplest way to authenticate users in your application. This video was create with the goal of explaining Firebase authentication with flutter in 10 minutes. If you would like a flutter tutorial about firebase authentication less in less than 10 minutes, comment down bellow.
    COURSES
    Flutter courses (Beginner & Advanced): fluttermapp.com/
    OVERVIEW
    0:00​ Flutter Firebase Auth
    0:10 Step 1. Add dependencies
    0:21 Step 2.1 Create a Firebase Project
    0:40 Step 2.2 Activate Email Sign In
    0:59 Step 2.3 Connect the Android App
    3:09 Step 2.4 Connect the IOS App
    3:50 Step 3 Let's Code (create files)
    4:05 Step 3.1 Auth
    4:58 Step 3.2 Home Page
    5:53 Step 3.3 Login and Register Page
    8:40 Step 3.4 Widget Tree
    9:18 Step 3.5 Main (You must add this*)
    MISSION
    Our mission at Flutter Mapp (Flutter Mobile App) is to help purpose driven Flutter developers go full-time doing what they love and making an impact through coding. We achieve this with useful Flutter tips and straight to the point Flutter videos.
    RECOMMENDED VIDEOS
    Playlist of more than 200 Flutter tips: • 35 Flutter Tips That W...
    Learn Flutter in 1 hour: • Flutter Tutorial For B...
    Zero to Hero Flutter Course (Beginners): • Video
    Hero to Pro Flutter Course (Advanced): • Video
    EDITOR
    Amaan Ansari: / amaan_0605
    SOCIAL MEDIA:
    Instagram : fluttermapp
    Twitter : FlutterMapp
    Website: www.fluttermapp.com
    Discord Invite: / discord
    CONTACT
    For business inquiries email me here: info@fluttermapp.com
    Website: fluttermapp.com
    #FlutterMapp
    #Flutter

ความคิดเห็น • 132

  • @zawar92
    @zawar92 ปีที่แล้ว +4

    Clean and fast steps. Easy to adapt this with a state management library.

  • @gloranger2001
    @gloranger2001 3 หลายเดือนก่อน +1

    Are you kidding me? Talk about straight to the point! I wish all instructions were this concise! Greta job my friend!!!

    • @FlutterMapp
      @FlutterMapp  3 หลายเดือนก่อน

      Thank you very much! It's the main reason why this channel was created in the first place. The worst is when they start like this: "Hi guys, my name is "who cares", subscribe, turn on the belt, bla bla bla" ... Glad you like it. 👍

  • @monkeygames1771
    @monkeygames1771 ปีที่แล้ว +1

    Absolutely killed it, clear and fast, love it! Forgot email confirmation

  • @dinoelef
    @dinoelef ปีที่แล้ว

    Thank you! for those trying, make sure Dependencies are on the latest versions

  • @belespritmkhatshwa3145
    @belespritmkhatshwa3145 8 หลายเดือนก่อน +2

    Thank you so much.
    Just a note for everyone trying this tutorial out in 2023. It may show an exception when you run the app - the exception points to "host" which is Firebase. This happens because the setup for dependencies and plugins in your build gradle are probably the latest versions. Use older versions and the code runs perfectly.

    • @FlutterMapp
      @FlutterMapp  8 หลายเดือนก่อน +1

      Thanks for the info! I will do an update at some point.

    • @techplanet001
      @techplanet001 หลายเดือนก่อน

      Please what version do you recommend

  • @vaibhavacharya7507
    @vaibhavacharya7507 ปีที่แล้ว +1

    The best way of explaining..
    & Thank you for putting source code link for reference

  • @darul-asar381
    @darul-asar381 ปีที่แล้ว

    As always 🔥🔥🔥

  • @SudipBhattacharyya
    @SudipBhattacharyya ปีที่แล้ว +2

    Phew!!! What a mind blowing video!!! Nobody taught me authentication in this way!!! THANKS! 🙂

  • @huynhucbui9849
    @huynhucbui9849 11 หลายเดือนก่อน

    Hi Sir, thank you for great tutorial.
    I have a question, should we declare Auth object outside of Build method to avoid creating multiple objects ?

  • @TechBuddy_
    @TechBuddy_ ปีที่แล้ว +18

    Amazing video as always, but I have three things that I'd have done differently
    1. I'd use actual forms to create forms and validation ( there is amazing documentation about this on flutter docs )
    2. Use the firebase CLI that is sooo much faster to setup and kinda easy to maintain as well
    3. Check for loading and error states in the stream builder along with the hasData check

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว +7

      Very valuable comment 👏🎉🎉 Thanks you for sharing! A video about CLI will come 👏. (With error states in the stream builder)

    • @tanthokg
      @tanthokg ปีที่แล้ว

      Can I ask what version you use? I download the standalone version but whenever I try to execute it, it keeps saying '' is not recognized as an internal or external command, operable program or batch file. But every tutorial I saw on youtube use the same standalone version and nothing goes wrong. Do I need to put that .exe file into any specific folder, or I can put it anywhere?

    • @monkeygames1771
      @monkeygames1771 ปีที่แล้ว

      flutter has shit documentation for begginers, dont go there

    • @codecret1
      @codecret1 ปีที่แล้ว

      do u have a code

    • @TechBuddy_
      @TechBuddy_ ปีที่แล้ว

      @@codecret1 for what ?

  • @captcha1337
    @captcha1337 ปีที่แล้ว

    Thank you for such video!
    Most helpful i found so far.

  • @vaibhavkhanna9412
    @vaibhavkhanna9412 ปีที่แล้ว +1

    This is a great video, and I am thankful for it, thank you very much

  • @gofry3023
    @gofry3023 ปีที่แล้ว +9

    This tutorial is more than a tutorial, we call it a masterpiece!

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      Thanks GoFry 🚀🚀🚀🚀 Flutter to the f***ing moooooon 😂

    • @Tegustamifrankfurt
      @Tegustamifrankfurt 5 หลายเดือนก่อน

      why?

  • @dhmsimons
    @dhmsimons ปีที่แล้ว +1

    please do a video about Flutter - Firebase Analytics. Thank you!

  • @nasserdiallo8636
    @nasserdiallo8636 ปีที่แล้ว +3

    man... this tutorial is super awesome !!

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      🔥🔥🔥🔥🔥🙏

  • @mohamedabdelrehem7698
    @mohamedabdelrehem7698 ปีที่แล้ว

    i was waiting for this video like forever ♥♥♥

  • @amaanansari5835
    @amaanansari5835 ปีที่แล้ว +1

    Awesome 🔥🔥🔥

  • @nunosilva2658
    @nunosilva2658 ปีที่แล้ว +1

    Great tutorial, however how could we do something similar but using Flutter's native routes (Navigator 2.0)?

  • @taneshasimeon2202
    @taneshasimeon2202 ปีที่แล้ว

    absolutely love and prefer your videos!

  • @RianY2K
    @RianY2K ปีที่แล้ว

    Hope more tutorial about this. especially with CRUD data and todo list app.

  • @MrCamdere
    @MrCamdere ปีที่แล้ว +1

    I love your Videos is so easy to understand

  • @chadj1797
    @chadj1797 ปีที่แล้ว

    Thank you, you're a life saver!

  • @ahmadxrizvi
    @ahmadxrizvi ปีที่แล้ว +1

    Thanks a lot brotha 🥺❤️

  • @jake4524
    @jake4524 ปีที่แล้ว +3

    I thought i followed the whole thing correctly, however when i press register, it tells me the email adress is badly formatted. Any idea what i did wrong?

  • @JeffPalmer42
    @JeffPalmer42 ปีที่แล้ว +14

    Finally, one that makes sense

    • @azmainjawad6771
      @azmainjawad6771 ปีที่แล้ว

      i KNOW right?

    • @rxtechandtrading
      @rxtechandtrading ปีที่แล้ว

      yeah to bad hes missing tons of stuff in his vid..People are getting alot of errors since his dependancies in the pubspec.yaml file are missing a few packages and he didnt show how to get the authentication keys when connecting the android and ios versions of the app to firebase..but i get ur to ignorant or dumb to realize this untill ur app crashes

    • @javachipjade
      @javachipjade ปีที่แล้ว

      @@rxtechandtrading what should we add? not a single tutorial works for me

    • @rxtechandtrading
      @rxtechandtrading ปีที่แล้ว

      @@javachipjade flutter cli

    • @javachipjade
      @javachipjade ปีที่แล้ว

      @@rxtechandtrading ok i get you now

  • @karolwisniewski8546
    @karolwisniewski8546 ปีที่แล้ว +1

    How to figure out error in xCode: Module 'firebase_auth' not found. It happen every time I create a new project and add this line of code:
    firebase_core: ^2.13.1
    firebase_auth: ^4.6.2
    to the pubspec.yaml
    the error shows even dont use firebase_auth in the code also if firebase_auth is in diffrent version

  • @m1kezulu
    @m1kezulu 26 วันที่ผ่านมา

    very nice auth

  • @k415hu7
    @k415hu7 ปีที่แล้ว +2

    Please make a video on how to use firebase database in flutter

  • @wanadi406
    @wanadi406 ปีที่แล้ว

    Thank you so much, it helped me alot

  • @fluttermakers
    @fluttermakers ปีที่แล้ว

    very good tutorial

  • @enemiduks
    @enemiduks ปีที่แล้ว

    Thanks, this really help

  • @sportsfever4116
    @sportsfever4116 11 หลายเดือนก่อน

    Sir please guide me. I used the same method and upon restart the logged in user i directed to homescreen but when i delete a user(not from in app but firebase portal) and then restart the app the user(deleted) still remained logged in evern he is deleted from authentication portion by me.what to do to redirect him after he is deleted. thanks

  • @dinhtiendat2611
    @dinhtiendat2611 ปีที่แล้ว

    This video teach me how i can make my code look more cleaner

  • @salahshakeel2778
    @salahshakeel2778 ปีที่แล้ว

    Make video on facebook authentication firebase. I know its NoSql Firebase but can we make relation database by our side and how to use aggregate functions!

  • @Andrew-px9fj
    @Andrew-px9fj ปีที่แล้ว

    Does anyone know if there is a recommended way of doing auth with a custum api with token bearer, Im doing in in provider and save the token in both shared prefs and the provider itself but it seems so scuffed to be... besides i need to get the token every time i want to make a request... isnt there something like Axios for requests? ive seen axios package but doesnt look very popular/trustworthy is there any comparable package that saves token to every request automatically?

  • @kennyevl1550
    @kennyevl1550 9 หลายเดือนก่อน +1

    i did everything and when i run the code the screen is just White

  • @khvlog14
    @khvlog14 ปีที่แล้ว

    Thanks Sir

  • @letmeflutter6644
    @letmeflutter6644 ปีที่แล้ว

    Thank you

  • @franciscojavier8968
    @franciscojavier8968 ปีที่แล้ว

    I hope you are not forgetting about firebase ui package and the pre build login page

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว +2

      We will do this one also 🔥🔥

  • @user-kt7xr2mh1n
    @user-kt7xr2mh1n 7 หลายเดือนก่อน

    And if i have Clean arhitecture in my app, how can i integrated?

  • @rohitpariyar1095
    @rohitpariyar1095 ปีที่แล้ว

    How to register user with user details such as names, address, phone number etc rather than just email and password

  • @emwagner
    @emwagner 8 หลายเดือนก่อน

    What if youre using Windows and VS Code to set up for iOS?

  • @lokabow1032
    @lokabow1032 ปีที่แล้ว +2

    If you could do a video of connecting asp.Net web api with flutter

  • @piffyization
    @piffyization ปีที่แล้ว

    Excellent! now with firebase messaging please! :(

  • @sanmedia405
    @sanmedia405 ปีที่แล้ว

    Can you do firebase auth with bloc patter with admin and user features...

  • @mohamedAli-cb3ep
    @mohamedAli-cb3ep ปีที่แล้ว +1

    Amazing and clear video🔥🔥 can you add google sign in and Google signup

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      We have already done Google sign in on this channel if you need it 🔥🔥🔥

  • @redd1491
    @redd1491 ปีที่แล้ว

    does the inputed email and password recorded into the firebase cloud?

  • @xavisean
    @xavisean ปีที่แล้ว

    best video

  • @itpeople1573
    @itpeople1573 ปีที่แล้ว

    amazing thanks

  • @ElectricBlanket1122
    @ElectricBlanket1122 11 หลายเดือนก่อน

    Is there a project folder containing this code that I can use? Please link

  • @harsha4048
    @harsha4048 ปีที่แล้ว

    It doesn't perform login when I clicked login button but after I restart ide, it is logged into the homepage Please help me to figure it out ❤

  • @xr.spedtech
    @xr.spedtech ปีที่แล้ว

    I more or less prefer back end stuff ...
    UI Fields and such ...
    I prioritize it last ...
    Bad Strategy ?

    • @TechBuddy_
      @TechBuddy_ ปีที่แล้ว +1

      Your app your rules

  • @farouk_bloncko
    @farouk_bloncko 6 หลายเดือนก่อน

    what version of firebase core works with firebase auth ^4.3.0?

  • @madesetiawan
    @madesetiawan ปีที่แล้ว

    Thanks for your tutorial, can you add a class for forget password ?.

  • @rushikesh_bagul
    @rushikesh_bagul ปีที่แล้ว +1

    source code link is not working can you please give me a github link

  • @krishnapra123
    @krishnapra123 ปีที่แล้ว

    Do we have a method in firebase to create a User ID without an email address or phone number? I mean super admin has the ability to assign a custom user ID and a default password to later reset it (e.g. user ID: ABCD1234 PWD: 12345).

  • @hemrajprajapati1877
    @hemrajprajapati1877 ปีที่แล้ว

    how same code work with flutter web .kindly explain

  • @user-cc3qf2mg8h
    @user-cc3qf2mg8h 2 หลายเดือนก่อน

    Easy 🎉 tnks

    • @FlutterMapp
      @FlutterMapp  2 หลายเดือนก่อน

      Welcome 😊

  • @amsihavibes
    @amsihavibes ปีที่แล้ว +1

    Source code is not available

  • @Way_Of_The_Light
    @Way_Of_The_Light ปีที่แล้ว

    I soo badly needed this tutorial 🙏, can you make a video for 'Apple Sign In' via firebase?

  • @ihsanalalawi4871
    @ihsanalalawi4871 11 หลายเดือนก่อน

    you should have added the main at the beginning not the end.
    i wasted so much time looking for these 2 lines of code before seeing it at the end of the video

  • @ABHISHEK-jc8kn
    @ABHISHEK-jc8kn ปีที่แล้ว +2

    How about using a simple flutterfire command instead of all that setup mess?

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      Agreed, we will do a video about it also pretty soon💪

    • @ABHISHEK-jc8kn
      @ABHISHEK-jc8kn ปีที่แล้ว

      @@FlutterMapp great. Watched your videos after a long time. They have been even better. Watching all the ones i had missed one by one xd

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      @@ABHISHEK-jc8kn 😂😂😂 The widgets series? or other videos?

    • @ABHISHEK-jc8kn
      @ABHISHEK-jc8kn ปีที่แล้ว

      @@FlutterMapp widget series just completed. Watching dart tips now

  • @dfnchx
    @dfnchx ปีที่แล้ว

    I can'tget this code runs in VSC Flutter, always get an error, am stuck 5 days already, I have tried everything that is available in internet but nothing works.

    • @alexisayalas
      @alexisayalas 11 หลายเดือนก่อน

      share your error and lets see

  • @amsihavibes
    @amsihavibes ปีที่แล้ว +2

    Can you send me source code link

  • @devsda1
    @devsda1 ปีที่แล้ว

    There is an option to connect Flutter, why did you do Android and iOS separately?

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว +1

      We will do the other option soon also 🔥🔥

  • @KamranKhan-jg1md
    @KamranKhan-jg1md ปีที่แล้ว +1

    flutterfire cli is best for connecting flutter app with firebase.

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      Its the next one on the list 🔥🔥🔥

  • @RahulNC-fo9lv
    @RahulNC-fo9lv ปีที่แล้ว

    I followed all the steps that you showed in the video, project is running, I tried to login with some random mail and password like you did in the video, but it is throwing an error. I'm running my project in chrome.

    • @rxtechandtrading
      @rxtechandtrading ปีที่แล้ว

      read my comment above and you will know why

    • @RahulNC-fo9lv
      @RahulNC-fo9lv ปีที่แล้ว

      @@rxtechandtrading which one?

  • @jayswalviraj4528
    @jayswalviraj4528 ปีที่แล้ว

    Have you any idea? How to run xcode without macOs?

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      You can rent a MacOS machine maybe on internet 🤨🤨 Im not sure how the authorization will work tho...

  • @zulfayhaji8535
    @zulfayhaji8535 2 หลายเดือนก่อน

    this one is better

  • @beedoner2106
    @beedoner2106 ปีที่แล้ว +1

    the code link is dead can you update it please ?

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว +1

      Well... I dont have it anymore lol, my bad, have a good day 🎉

    • @honkpillado
      @honkpillado ปีที่แล้ว

      @@FlutterMapp HAHAHAHAHA

  • @prod.goldenstar273
    @prod.goldenstar273 ปีที่แล้ว

    5:20

  • @mm-sf6qx
    @mm-sf6qx ปีที่แล้ว +1

    source code plz

  • @casbot71
    @casbot71 ปีที่แล้ว

    *ask "WTF is flutter and firebase?" as this pops up in my suggested …

  • @user-tm8eu1qm1t
    @user-tm8eu1qm1t ปีที่แล้ว

    9:05

  • @legendali2096
    @legendali2096 ปีที่แล้ว

    Plz give me source code the link hot working

  • @s-std
    @s-std ปีที่แล้ว

    U haven't tested the code !

    • @ndasss9563
      @ndasss9563 ปีที่แล้ว

      he did... its in 0:00 xd

    • @user-x649
      @user-x649 ปีที่แล้ว +2

      @@ndasss9563 I meant a good test but the one he did is fake ! A test means to test every functionality he showed in the video not execute the app that he has already tested before making the video. 1/ If you have some knowledge in IT you shouldn't have replied that way 2/ always put in your mind that new programmers or even students could see the video, so he has to make the life easy for them by testing every functionality separately

  • @kevink398
    @kevink398 9 หลายเดือนก่อน

    It worked but I'm not sure how to navigate to the next screen when the user logs in. I used the code below before implementing the Firebase Auth.
    Navigator.push(
    context,
    MaterialPageRoute(
    builder: (context) => const FrontPage()));

  • @Cube-lt8ih
    @Cube-lt8ih ปีที่แล้ว

    Where is the source code? I need it!

    • @DanFlorio
      @DanFlorio ปีที่แล้ว +1

      Try GitHub CoPilot. I only needed to type about 20% of the code to recreate this project.

  • @usertuserb7057
    @usertuserb7057 ปีที่แล้ว

    lease ,
    when I run flutterfire configure
    i get this error message
    Could not find bin\flutterfire.dart in package flutterfire_cli.
    any suggestion please?

  • @user-xm9hg8nm7b
    @user-xm9hg8nm7b 11 หลายเดือนก่อน +1

    the code on the addfirebase SDK is different now in the first step it says To make the google-services.json config values accessible to Firebase SDKs, you need the Google services Gradle plugin.
    Kotlin DSL (build.gradle.kts)
    Groovy (build.gradle) and I can't find that specific line inside the gradle folder any help would be really appreciated.Thanks in advance

  • @limkangwei6339
    @limkangwei6339 ปีที่แล้ว +1

    I kept on having this error. After typing the email and password, and when I click on the register button/log in button, nothing happens.
    W/System ( 9647): Ignoring header X-Firebase-Locale because its value was null.
    D/TrafficStats( 9647): tagSocket(137) with statsTag=0xffffffff, statsUid=-1

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว

      Sorry I have never see this before..

    • @usmanxsaeed
      @usmanxsaeed ปีที่แล้ว

      do you have any solution to fix this?

  • @abdorizak
    @abdorizak ปีที่แล้ว

    it's best practice to use com.example.project instead of that use com.your_name.your_project_name.

    • @FlutterMapp
      @FlutterMapp  ปีที่แล้ว +1

      com.example.project is just for an example. When you create your own project its 100% better to do com.your_name.your_project_name. 👏

  • @Hasinnnnn
    @Hasinnnnn ปีที่แล้ว

    You can use the signOut() method to log a user out. There is no need to create a separate method for signing out because it’s just a single line of code : FirebaseAuth.instance.signOut();

  • @vaibhavkhanna9412
    @vaibhavkhanna9412 ปีที่แล้ว

    plugins {
    id 'com.android.application'
    // Add the Google services Gradle plugin
    id 'com.google.gms.google-services'
    ...
    }
    please help its showing this in case of plugins how to fix it

  • @noeb4463
    @noeb4463 5 หลายเดือนก่อน

    Target of URI doesn't exist: 'package:firebase_auth_project/auth.dart'. Why ??? Tank's 🙏

    • @nah2341
      @nah2341 2 หลายเดือนก่อน

      quite late, replace firebase_auth_project with your project folder name.

  • @jemjemvermillion3309
    @jemjemvermillion3309 ปีที่แล้ว +1

    I got this Error
    Error: Member not found: 'FirebaseAppPlatform.verifyExtends'.
    firebase_app.dart:18
    FirebaseAppPlatform.verifyExtends(_delegate);
    ^^^^^^^^^^^^^
    Do u know what went wrong?

    • @4meters
      @4meters 10 หลายเดือนก่อน

      Execute in project main folder: flutter pub upgrade --major-versions
      It should fix it