Firebase Authentication — Flutter💙💛

Published in

Google Developer Experts

4 min readMar 12, 2022

Authentication is one of the basic features that almost all apps now need. But, how can we implement it? Let’s check it out in this article!

Adding authentication to your app can be done through your backend. Now, if you have a custom backend, it becomes easy to do as you just need to pass the credentials and the backend will do the logic part. But, what if you don’t have a custom backend? You can add authentication with ease using Firebase!

Here are the steps to summarize the process:

Add a new project and app into Firebase.
Enable whichever authentication you want from the console. We will be covering simple email-password auth in this article.
Create a simple UI for registration and login.
Create the backend code to pass the credentials to your Firebase.
Call the functions from your UI.
Validate the response based on whether the credentials are correct or not.

So, let’s get started!!!

Step 1: Add a new project and app into Firebase.

Go to Firebase Console and create a new project. We won’t be covering the steps to add a new project into Firebase, but here’s a reference for your convenience.

Step 2: Enable Authentication.

On your console, first, go to the project that you created. Now, go to Authentication tab from the right panel and you will be able to see a button for Get Started .

Now, click on the button and then you will see a list of authentication providers which we can use in our application.

Now, click on Email/Password and enable it. Once you enable it, you will see Enabled besides Email/Password Provider.

You are all set to move with the next step!!

Step 3: Create a simple UI for registration and login

You can simply create 2 screens, one for login and another for registration which will have 2 fields — Email, Password; and a button to submit.

Here’s an example for the same:

login.dart:

create_account.dart:

So, these 2 screens are just simple ones with 2 text fields and a few buttons. We haven’t added any logic yet. Now, let’s add the logic then!

Step 4: Create the backend code to pass the credentials to your Firebase

First of all, you need to add firebase_coreand firebase_auth packages in your pubspec.yaml file. Now, you need to initialize the firebase app in your main function present inside main.dart.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

Now, let’s create a file to hold all our authentication-related functions and firebase calls. We can name it as auth_service.dart . Now add functions for login and register.

So, in the login method, we are taking email and password from the user and sending them to the signInWithEmailAndPassword function which is available in firebase_auth the package that we added. Same way, for registration, we have createUserWithEmailAndPassword which will create a user with provided email and password. Also, we have handled a few common errors of the firebase in our code. Now, let’s call these functions from our UI!

Step 5: Call the functions from your UI

It’s now time to call our functions from the UI!

create_account.dart

So, if we just check the onPressed of ElevatedButton :

onPressed: () async {
                final message = await AuthService().registration(
                  email: _emailController.text,
                  password: _passwordController.text,
                );
                if (message!.contains('Success')) {
                  Navigator.of(context).pushReplacement(
                      MaterialPageRoute(builder: (context) => const Home()));
                }
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(message),
                  ),
                );
              },

Here, we have called the registration method that we created. Now, based on the message we are showing the snack bar. And if the account is successfully created, we navigate to the home page. Here, the home page is just a simple class without any particular UI or logic!

Output: