DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Firebase Authentication with GetX in Flutter
Imran Sefat
Imran Sefat

Posted on • Updated on

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 won

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.



I won

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



I won

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.



Firebase Console

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



Sign In Method

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.



Sign In Method

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!

Top comments (11)

Collapse
 
shah000 profile image
HUSSAIN SHAH

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

Collapse
 
cris96174560 profile image
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

Collapse
 
imransefat profile image
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

Collapse
 
cris96174560 profile image
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');
}

Collapse
 
ankita_tripathi_5cdae815b profile image
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/

Collapse
 
imransefat profile image
Imran Sefat

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

Collapse
 
idaudk profile image
Daud K

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

Collapse
 
imransefat profile image
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.

Collapse
 
dbestech profile image
Info Comment hidden by post author - thread only accessible via permalink
dbestech

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

Collapse
 
whoadityanawandar profile image
Aditya B Nawandar

How do you make this role based?

Collapse
 
mdusaama0 profile image
mdusaama0

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

Some comments have been hidden by the post's author - find out more

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.