Flutter and Firebase login in depth

Using Firebase login with Flutter is pretty easy, i can’t see what do you want to talk about, you might think! well, that’s true, even social login is very easy to implement. But what if i want a user to be able to login with Google, Facebook or Apple and that each and everyone of them are linked to the same user account? What if i want a user of my application to be able to navigate and do stuff in my app without having to login, and not loosing anything he has done after registering?

For this last point, i know there are many solutions for that, but the one offered by Firebase is really an elegant solution and it will work on every platforms.

1. Anonymous login

Yes, that’s right, you should use anonymous login on the first launch of the app so the user can use every features of the application without having to register.

So first of all, activate to anonymous login in your Firebase console, for that, just select Authentication in the left menu, and then select the tab “Sign in method” and activate the Anonymous sign-in provider

Now, to implement this sign-in method, it’s quite easy, and the only error you have to handle is the “operation-not-allowed” error which will only happen if the anonymous login has not been activated. Here is how i am doing it, i am personally using Dartz package and the Either class to handle errors in my repositories:

Be aware that if the user signed out from anonymous login, he won’t be able to get the same account back!

If you have an observer registered in the authStateChanges() method, it will triggered with a User object and the getter currentUser will also return a User object:

So now, this anonymous user can work with data protected by security rules without having to register.

So this is our repository so far:

2. Link the anonymous account and convert it to a permanent account

Ok, so the user has been able to test (almost?) fully the application and he thinks it’s really a great app, so it’s time to register and the question is, how do i link this anonymous account to a permanent account?

Well, FirebaseAuth gives to the currentUser getter the link method linkWithCredentials().

So let’s start with the method createUserWithEmailAndPassword(), if you think about it, maybe signed-in user will just want to logout and register with a new user, so you need to pass a flag to your repository to know if you have to link the new account or not, here is how i am doing it:

When using the createUserWithEmailAndPassword() method, you may also want the user to verify his email once logged in, well, for this just call the sendVerificationEmail() method on the User object.

auth.User user = _firebaseAuth.currentUser;
if (!user.emailVerified) {
await user.sendEmailVerification();
}

For the Social login, just follow the same concept, use the correct provider (GoogleAuthProvider, FacebookAuthProvider ,OAuthProvider,…) and link the accounts under the same Firebase User Uuid.

Here is the code for Google Sign in:

for Apple Sign in:

and for Facebook:

https://gist.github.com/arnaudelub/73e6d4ddb1670469ff94a009fd2a5d4a

3. Changing password

You may also want the user to be able to update its password inside the application or resetting it if he doesn’t remember it. For this you can call updatePassword() on the User object and sendPasswordResetEmail(String email).

the reset password is quite simple:

@override
Future<void> resetPassword({@required EmailAddress email}) =>
_firebaseAuth.sendPasswordResetEmail(email: email.getOrCrash());

Updating the password is more tricky. For instance, if the user is logged in since quite some time, it may be necessary to ask for a re-authentication for security, so you may want to ask the user to enter the actual password if needed in the UI.

Add the logout Method to you repository and that’s pretty much it. Facebook login, Twitter Login, github login and more are also available, just follow the documentation for each and you’ll be fine.

Here is the repository with all that we covered today:

https://gist.github.com/arnaudelub/562982601fd7be6aa6866a10137577f2

If you want to dig deeper, there are also Phone sign in and Email Link Authentication.

Now you can link all the user social account to your app and you can allow any new user to navigate through your app and register without loosing any data he may have generated.

And that’s it for today folks!

Happy coding to everyone