Firebase Authentication with GetX in Flutter

Introduction 🎉

You know about GetX. It is an extra-light and robust solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically.

I’m going to be honest; I’m not that pro at using GetX. So one day, I wanted to use GetX to make a flutter app with firebase authentication to understand better, but I was confused. Then it took me some time to figure out how it was working, and eventually, I succeeded and fell in love with the world of GetX.

Let’s Get Started 🎯

I will assume that you have a starter template setup to enter email, password, or a button to login with Gmail. Let’s list the steps necessary to make the authentication process.

Steps 👣

1. Configuring the Flutter Project

2. Connect App to Firebase

3. Creating the Auth Controller

4. Inject the auth controller

5. Login or Signing up Users

6. Success

1. Configuring the Flutter project ⚙️

Let’s add the necessary packages that we’re going to use throughout the application.

Copy the dependencies to your Pubspec.yaml file. I am using the latest version available now at this moment.latest version available now at this moment.

2. Connect App to Firebase 🤝

Now we have to connect our app to firebase. First, go to the firebase console and create your project if you haven’t already. You will see an option to add an app to firebase. Depending on your preference and requirement, do that. The steps are pretty straightforward, and firebase will show you what to do and how.

Don’t forget to enable the Email/Password Sign in and Google Sign In methods.

3. Creating the Auth Controller 🎮

First, let’s make a constant file for the sake of simplicity and not to get confused or code duplications. Copy the below codes and paste them into your dart file inside the lib folder.

Suggestion: Make a folder inside of the lib folder titled Constants.

Now let’s create the Auth Controller where all of our business login related to Firebase Authentication will work. Just copy the below codes and paste them into your dart file inside of your lib folder.

Suggestion: Make a folder for titled Controller.

4. Inject the Auth Controller 💉

We have created the Auth Controller, but how are we going to use it? Let’s hop into the main.dart file and make some changes to our code.

Here, we are initializing the firebase and injecting the AuthController instance in the 4th line.

Our dependencies are completed and initialized. Now let’s sign up some users.

5. Login or Signing up Users 🙋‍♂️🙋‍♀️

I assume you have a basic or super beautiful Signup or login screen ready. If not, you can copy my code for the screen, but note that it’s a super simple screen.

The above code is pretty self-explanatory. There are just two (2) text fields for email and password, one button to login and one to Register / Signup. The last elevated button is for the google authentication popup.

6. Success 🎉

You just implemented Firebase Authentication in Flutter with GetX.

I have a Youtube Channel Named “Coding with Imran”

Do subscribe to my channel if you want to get future updates!

Comments

[bigbott]

Nice article.
Especially I like the part when controller decides where to go. Clever.
But I have a doubt about making navigation from controllers. It makes code much less readable.
Also, you don't need to clear stack from the beginning, since there is nothing in stack. But this is not important detail.
Thanks for sharing.

[Imran Sefat]

Hey thanks for your comment. It's been so long I worked with getx but I had a look at the code after reading your comment. I agree with the code not being readable about the navigation controller but it's probably because of handling all the state but I'm not too sure as I worked on it years ago.

Also, I cleared the navigation as the time I wrote this article, I thought of user credential issues like a token can be expired or something and that can be an issue with the navigation stack cause you don't want your user to be getting back to the Dashboard page after you navigated them from Dashboard to the Register page. This is just an assumption as I wrote this years ago and don't remember every details.

Cheers

[HUSSAIN SHAH]

thanks but one question for you ..
how do we execute two function in single(login/Register) button pressed in flutter?

[Cris]

Hello, I had a problem with the signOut method. It says it is not implemented. I'm using
firebase_auth: ^3.2.0
firebase_core: ^1.10.0

Would appreciate any help

[Imran Sefat]

Please check if you have imported the files correctly or check whether you have copied the signout function or not.

void signOut() async {
await auth.signOut();
}

Check if the above function is present in the auth_controller.dart file

[Cris]

Yes. Thanks for the reply
I traced the function all the way to
.../snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/firebase_auth_platform_interface-6.1.4/lib/src/platform_interface/platform_interface_firebase_auth.dart

this is its code:

Future signOut() async {
throw UnimplementedError('signOut() is not implemented');
}

[Daud K]

bro, can you provide guide for facebook and forget password feature.

[Imran Sefat]

It's mostly the same for the Facebook authentication. You will be needing the flutter_facebook_auth package which can be found here: pub.dev/packages/flutter_facebook_...

a sample sign in function is given below:

Future signInWithFacebook() async {
// Trigger the sign-in flow
final LoginResult loginResult = await FacebookAuth.instance.login();

// Create a credential from the access token
final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(loginResult.accessToken.token);

// Once signed in, return the UserCredential
return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
}

I will try to make a video or write an article for the auth process including the password reset functions.

[Ankita Tripathi]

This is by far the most sorted article on using GetX! Would you like to submit this article on Dev Library as well? devlibrary.withgoogle.com/

[Imran Sefat]

Thanks for being so kind.
Yes, I will be glad to submit there as well.

[dbestech]

Learn more about Getx here
dbestech.com/tutorials/flutter-get...

[mdusaama0]

when app is running sometime it navigates to home screen automatically.
Console Log:
D/FirebaseAuth( 2968): Notifying id token listeners about user ( mjnetiCUregDma3eBECG79vyU9p2 ).

[Aditya B Nawandar]

How do you make this role based?