Firebase Authentication — Flutter💙💛

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:

login.dart

Output:

You can try out the example from GitHub Repository!

Hope you enjoyed this article!

If you loved it, you can Buy Me A Coffee!

Don’t forget to connect with me on:

Don’t stop, until you are breathing!💙
- Abhishek Doshi

--

--

--

Experts on various Google products talking tech.

Recommended from Medium

Points to remember to write tree shakable node module

Getting to know about Node.JS

DS & A Series - Singly & Doubly Linked Lists: Implementation & Insights

How to add custom font in react native easily in 4 steps | Android

Best Node.js Frameworks for App Development in 2022

The Koa.js Framework: An Overview

Jest — Filenames without test or spec

Summon the JSON 3rd Top Trending Card Game

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
Abhishek Doshi

Abhishek Doshi

Google Developer Expert — Dart, Flutter & Firebase 💙💛

More from Medium

Firestore Database — Flutter💙💛

Exploring Inherited Widget in Flutter

Building a Calorie Tracker App in Flutter!

Flutter : Widget and its lifecycle