Flutter Tutorial - Sign In & Logout | Firebase Authentication 🔥 1/4 Email And Password

how to use firebase authentication in flutter to log in a user via email and password and we will also log out the user again firstly make sure that you have set up a firebase project and then you can go to the authentication tab click on get started choose email and password enable email and password and click on save secondly on our page we create a login widget inside the login widget we create a column within the build method then we create two text fields and below it we create one button if we press on this button then we call a message sign in and lastly we call the method sign in with email and password from the firebase auth package whereas you need to supply an email and a password and we take the email and password from our text fields therefore i have created in my state an email and password controller and the email controller is attached to a text field as well as the password controller is also attached to a text field to make use of the sign in with email and password method therefore make sure that you also go to your pubspec yammer file and under your dependencies you need to include the firebase auth package let's also go to the main page where we have implemented our login widget and we want to wrap the login widget inside of a stream builder and then we use the firebase os package to get the auth state changes which means we can determine if the user was logged in and if the user was logged in then we want to display the home page and if the user is logged out again then we want to display the login widget and at the end we go back to our firebase project to the authentication tab and here to the users and now we create a new user therefore we click on add user give it an email and also let's put here a password inside and click on add user let's try it out with our flutter app put the email and password in your text field and click on sign in and then we go to the home page so after a successful login the stream builder will rebuild this widget and therefore it displays the home page and inside of the home page you can access the user information and we can also display it inside of our scaffold so we access the user email and display it inside of our ui also we can create a logout button below and if we click on the sign out button then we want to log out again from firebase and therefore you can call on firebaseos the sign out method before we click on the sign out button let's also close this application and let's start it again and you see the user is still locked into the application as long as he hasn't signed out yet therefore let's click on sign out and then we go back to the sign in form so to sum everything again up the stream builder always takes care that if the user is signed in then we display the home page and otherwise we display the login form that we are currently displaying and here inside you can also add some other cases so for example if you are currently waiting then you can add a loading indicator or if during the login goes something wrong then you can also add here some error message at the end we want to do some minor improvements therefore let's go to the login widget and here we go down to the sign in method and we want to make sure that we wrap the sign in logic inside of a try catch so in case something goes wrong then we want to catch this arrow also before we call the sign in method we want to show some loading indicator to the user therefore we create a dialog and we display a loading indicator inside after the login to firebase we want to hide this loading dialog again and therefore we call on our navigator the pop until method to hide this dialog to make this work you cannot use the navigator of context instead you need to use a navigator key simply go to the main file to your material app and inside of it we want to add a navigator key that we define here at the top and with this if i click this time on the sign in button then we have a loading indicator until we are locked in [Music]

Channel: HeyFlutter․com

Views: 38,816

Keywords: firebase, firebase auth flutter, firebase authentication, flutter, flutter authentication, flutter firebase, flutter firebase auth, flutter firebase auth email password, flutter firebase auth logout, flutter firebase auth pro, flutter firebase auth tutorial, flutter firebase auth ui, flutter firebase authentication, flutter firebase login, flutter firebase login example, flutter firebase sign in, flutter firebase tutorial

Id: zpbyJ7GVMVU

Length: 4min 25sec (265 seconds)

Published: Fri Jan 07 2022