Flutter Firebase Authentication with Email and Password (part - I)

Introduction:

Authentication is a major and required function not only in mobile applications but also on websites as well as desktop applications. Thanks to firebase, we can easily implement the authentication with email and password, as well as other social media platforms.

Here, I would explain, how to Login and Signup with an email Id and Password in the flutter application with firebase authentication. Before starting, I must recommend configuring the Firebase project with your Flutter application.

Enable Firebase Authentication :

Firstly, to enable Email/Password authentication on Firebase, we need to open the online firebase console and navigate to the “Authentication” tab. From there, you need to enable the provider you want to use.

(Here, we discuss Email/Password provider)

Setup Authentication Package :

Before starting, firstly install a firebase authentication package in pubsec.yaml file:

for the web application, we have to add a line in web/index.html file:

Describe a flow of application:

In brief, a particular data is a stream from the authChecker() , it returns the screen. Furthermore, I describe it in the proper format.

Dive into the code:

Firstly, create some folders and files like this.

Further, create auth service in lib/Service/authService.dart the file:

stream<User> get userStatus => _initFirebaseAuth.authStateChanges(); It streams the user auth state from the authentication checker. The authentication checker is to know, the user is already logged in to an application or not.

Now, for the authentication checker write a code inlib/main.dart the file:

Here is the explanation for theAuthChecker class. The StreamBuilder helps us to stream data at some point, and here we stream data from FirebaseAuth.instance.authStateChanges(); . The connection state is used to check internet connection, as well as snapshot.data?.uid == null this condition check in the snapshot, userId has value or null.

Now, write a function for signinUser() ,signupUser() , and signoutUser()in lib/Service/authService.dart file:

In signinUser() function, define String email, String password as required. _initFirebaseAuth is, early initialized variable, and signInWithEmailAndPassword(email:email, password:password) It is a firebase pre-defined function for authentication.

Note : .then((value) => value.user.uid) property is not required. If you don't want to write, it’s still working. This function only returns userId after user Login.

The signupUser() function’s signature is the same as signupUser() function, However in the function body part, must change .createUserWithEmailAndPassword() function.

The signoutUser() a function used to log out current users.

Design Application:

So far, we have discussed and written firebase functions. Now, we design the user interface. In the first place, we design a basic structure for the login Screen in lib/authScreen.dart file:

The AuthScreen() widget displays a simple text field without validation, as well as the Login and Signup button for the call function. while the user clicks on a button, onTap function call method from AuthService class. After signIn or SignUp the user status change and AuthChecker redirect HomeScreen widget. For the HomeScreen() widget write a code in lib/authScreen.dart file:

In the HomeScreen() widget show a simple text in the center of the screen, and a floating action button for the call signoutUser() function from AuthService class. After signout, AuthChecker returns another screen.

Conclusion:

In this article, I have explained a User Authentication with Firebase Auth with the demo, you can modify and experiment according to your own, this little introduction was about the User Authentication with Firebase Auth from my side. In the next article, we learned about Email verification, Password reset and changing an email address.

♥️️♥Thank you for reading this article. If you like it don't forget to hit on 👏🏻 clap.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Zinzuvadiya Meet

Zinzuvadiya Meet

Hey there! I’m a mobile app developer who passionate about creating websites & applications through flutter as well as provides firebase services to clients.