Flutter: Email verification and password reset

When it comes to user experience in mobile application development, it is important to consider email verification. This concept allows for creation of a relationship between a company and its users. Messages can be sent to actual people and this can be helpful for marketing purposes and the overall affirmation of users as they use the app. The concept of password reset is self-explanatory; users often forget passwords. Therefore, we cannot overemphasize the importance of a password reset feature.

This idea can seem difficult to implement at first, especially when working with a new framework like Flutter. However, we can leverage the Firebase API that exposes functions that trivialize email verification (assuming you are using Firebase as the back-end authentication). In fact, it is as easy as a few lines of code. With no further ado, let’s get into it!

Email verification

To help with centralizing authentication workflow, I typically dedicate one class to handle signing up, signing in and out, and email verification/password resets.

import 'dart:async';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
abstract class BaseAuth {
Future<String> signIn(String email, String password);
Future<String> signUp(String username, String email, String password);
Future<void> signOut();
}
class Auth implements BaseAuth {
final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
@override
Future<String> signUp(String username, String email, String password) async {
FirebaseUser user = await _firebaseAuth.createUserWithEmailAndPassword(email: email, password: password);
try {
await user.sendEmailVerification();
return user.uid;
} catch (e) {
print("An error occured while trying to send email verification");
print(e.message);
}
}
}

The signUp function takes in the username, email and password as parameters and creates a new user with the details. You can already see how easy this is — Firebase takes care of hashing and salting the users’ passwords. We then send the new user an email verification. It will usually look like this:

noreply@[PROJECT-NAME].firebaseapp.com

Sat, Mar 9, 1:03 PM (8 days ago)

to [USERNAME]

Hello,

Follow this link to verify your email address.

[URL LINK]

If you didn’t ask to verify this address, you can ignore this email.

Thanks,

Your [PROJECT] team

Once the user has followed the link, their email will be verified. At this point, the user can now sign in to your app, therefore you should always check if the current user’s email is verified or not before signing them in. How do we do that in Flutter? Simple! The user object has a isEmailVerified boolean member that we can check to see if a user’s email is verified as shown below.

@override
Future<String> signIn(String email, String password) async {
FirebaseUser user = await _firebaseAuth.signInWithEmailAndPassword(email: email, password:password);
if (user.isEmailVerified) return user.uid;
return null;
}

I’m loving how easy this is as much as you are!

Password reset

Lastly, password reset is the easiest part of it all as shown below.

@override
Future<void> resetPassword(String email) async {
await _firebaseAuth.sendPasswordResetEmail(email: email);
}

That’s it, a one-liner! The user should then receive an email with instructions on how to reset their password.

Conclusion

Email verification and password resets are important aspects in user experience design. For a simple application, Flutter makes it easy to implement these features as Firebase handles the complex details behind these operations. Of course it’s possible to customize the emails sent to users directly from the Firebase console with no sweat.

If you liked this article, hit the clap button and leave a comment below for any questions.

Written by

Desktop & Mobile Software Engineer and Machine Learning developer

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