Flutter Firebase Authentication [2023] The Beginner's Way | Login & SignUp using Firebase

ah okay guys uh for flutterbus login or fertility Authentication today I am showing you the how to login or sign up your account just you sign up your ID email and password and then login with this information so first of all Firebase connection go to the console.fire ways dot google.com add a project project name is your choice list flutter connect anything you want continue enabled Firebase account or you can click another okay great project so wait for some time let's take time okay after project is ready now go continue okay for Authentication go for Android if you are using iOS then go for OS but I am showing you Android so first of all you have to register app so why is this trap so how to find app ID so go to your project here is Android and there is app which is build griddle see Android app Google go down uh yeah my application ID is com dot example dot Firebase connect copy then paste here and nickname is optional no need history now listen carefully download the Json file okay see I'll download this file Json file so let's drag to the app okay okay so now go to the browser again and go for next and this is the most important part to connect this so so it says project build model so go to my project where is my project is Android and then that's pilgridel see before use that is app build Catalyst but it is under the Android okay we'll go so the browser which is it the whole code to copy but we have already this line and this layer so if you know line of this code you have to copy and paste here but I think you will get a line default so just copy the class path copier go to this and paste here okay simple now go for and some Java workout link just stay there what is this project app module Bitcoin let's go app module then this build griddle okay see okay now go to the browser again just copy the com.google.com GMS copy now go to the browser find the class path so sorry find the apply plugin option I see just update and then paste it just so you have to copy only the cursor option and then apply plugin then this comment option now for next two line is implementation platform and implementation so copy the first line go to the project again and go at the last says dependencies see there is a dependencies then this length so paste the implementation line then copy the next line paste it there done now go to the so our copy is done copy paste and now next so here is the con Harris it is connected to the Firebase with this flutter connect project so now import our package which is the Firebase auth copy it go to the popsico ml paste it right paste it package wait for the package is important okay done now our connection part is done so let's there is Helper but let's create some UI like login and email password box then login button then sign up button so cut all of these Library folder create another page which is called plug it page simple stateless widget is stateful which is again page okay so let's scaffold only save area child there is column children text field but before text build we have to call our home a login page turn on it okay let's set integration I'm just creating text box which is email uh before I talking about this he I have to mention you that for flutter connect Firebase you have to edit in Android app and Bill griddle file which is mean SDK version previously it will be like this product dot mean but Direction but with this application will failed run failed so you have to make sure minimum is 19 okay and it's all working fine now go to our UI so I created a bar a Firebase and now in the I have been create a column which is crosses and many cc Center then a center widget which is a container and container is a border like then under in the container I use the text field which is from stressed out in color black and something decoration input decoration email style or something and input border is done so so you should take this and I have to create the same text box like from the center copy it and paste here see there is a size box right 20. [Music] so what second column is slot okay so we have password and then we have to create another button which is created and the column Shield is elevated button pressed just text login and create another which is sign up okay I'm just coloring the login phone is green and sign up is red now on on press and do is doing nothing just wait for it so you have to create a controller so I have to create a controller which is place to your ring controller for his email controller equal to sorry why now text reading controller same for password controller so so for the text box go to text box and find the email okay this is controller it is email so we will use in your controller and to delete the const then foreign controller [Music] so basically controller is like what I am typing here it will pass to this password controller what this is the controller work so under the controller I have to create override function sorry the word function will be here so basically we have created this pose where this was after typing anything on login button it will clear the text for this box so obviously text box and you can control here also no problem so our UI is done and now the final part is authentication so go to your product card project here build Authentication we are using email and password so select the email and password just mark this one and Save so our email password is enabled now for the user we have no user I don't need to add user from here we will add user from our application so go to the application so before work anything go to the main put main function go for widget splatter winding Dot and share ensure initialized then then here is assign and have it Firebase Dot all right Firebase Dot so basically for Firebase connect we need another which is Firebase cool copy where we score package and go for the project perhaps the camera pocket now go to the main page set Firebase Dot initialist at and then so cut the login page place the steam Builder so what we will use the testing Builder which is user then I have to import it okay input then what is this steam Builder is below which is like email is sdsd and password you also sdsd if this is match then go for home page okay but you know already not created home page so we will create it and if password is wrong or anything just stay in login page so this is the login page and home page we have to create another page like home page we will use it later so government import it okay so when the log information is okay it will be go to our next page otherwise it will stay logging piece okay so there is the important thing is dim which is this team Builder property so stream which is you have to call it firebase.in all these State genes so when the status States is change so log information is messed I will go to the home page and if so if this snapshot is done just use this now go for the login page we have to go for the on prescription we need assigned so go for Firebase hot dot instance Dot create for what is the login so for sign in with email and password which has email and password so what is the email is in the email controller so email controller dot text Dot frame for the password is password controller dot text Dot so and for sign up you have similar action like where we got dot instance Dot create username and password which is similar controller and copy the same line so our work is done now run the application so for testing our app I have some email email is at m.com or anything so if you use email and you have to write it and then something.com and password is six digit like one two three four five six you can hide the password in the text box option just create a sign up it will create our accounts I'll go for same information so we have no user let's reload the page let's see Network m.com and sign up then it is all automatically login so our home page is here so basically uh problem is go sorry so I close the app now go for our project is so it will login every time we restart the app so in the home page create a button like scaffold body save video child [Music] is column these two children now copy or copy our login button okay just copy yours login or sign up button create all code of this lock okay so this is log out and then let's see restart the rap so for logout we have to write a simple code so this is the login button so Firebase stance the driver is odd eight steps not sign out just refresh log out three Outlook pages and log information notice our englishness m.com password is one two three four five six login just do it see our Pages locked in so our create and log login is done so we want to display our username in here so write is text before data so we want to view here our username I mean current login username so sizes so for the reason name I have to call that variable um final not final it's okay final user equal Firebase or dot instance current user so this user variable holds the current user information so for display or username call the variable users question mark dot what you want to display it's email sorry dot email users email so refresh it see let's start and let's set app.com

Channel: Flutter With NAS

Views: 13,362

Keywords: flutter, nastech, nastech org, google, android, android studio, flutter programming, dart, dart language, flutter with dart, flutter with android studio, beginners, flutter for begginers, flutter tutorial, tutorial, widget, Flutter Firebase Authentication, firebase, firebase login, flutter firebase, flutter auth, flutter signup, flutter login, login firebase auth, flutter core, flitter auth package

Id: IQ1cBz66BQU

Length: 23min 42sec (1422 seconds)

Published: Wed Feb 01 2023