In any authentication system, to verify the email addresses coming through your system are legit, very often, developers will want to send a verification email to the email on file, then a confirmation link will be used to verify the email address is viable.
Updated Aug 21, 2016. 13:48: Added a repository to help you get started easily, thanks to a comment. Here we go: https://github.com/seanmavley/Firebase-Email-Verification
If you’re familiar with Firebase, you’ve probably come to love how authentication is made seamless and easy to implement with rich APIs.
Well, one of the features that were missing happened to be the option of sending verification email after local account signups.
You can customize your email templates that are sent out in Firebase relation to email verification and more. See here: https://console.firebase.google.com/project/your-project-name/authentication/emails
If a user signs up with a social authentication, either from Facebook or Google, there’s a high chance the email is a legit one you’re putting onto the file. However, a user signing up using your local account system, you better verify.
In Firebase 3.0 SDK, email verification is baked in and pretty beautiful to implement.
Sending Verifications
$scope.sendVerifyEmail = function() {
toastr.info('Sending email verification message to your email. Check inbox now!', 'Email Verification');
currentAuth.sendEmailVerification();
}
A function to send a verification email. currentAuth is a controller like this, from my ui-router:
resolve: {
currentAuth:['Auth', function(Auth) {
return Auth.$requireSignIn()
}]
}
Then you just inject into your controller, wherever you want it!
After sending the verification, you’ll have to accept the link sent and chew it to verify your user email.
So, it can be done this way:
.state('emailVerify', {
url: '/verify-email?mode&oobCode',
templateUrl: 'auth/verify-email.html',
controller: 'emailVerifyController',
resolve: {
currentAuth:['Auth', function(Auth) {
return Auth.$requireSignIn()
}]
}
})
We consume the params using the ?mode&oobCode . If you’re wondering what the oobCode is, check out the docs to learn more.
You could use url: '/verify-email/:mode/:oobCodeequally, and it’ll function accordingly, as long as you intercept the params the ui-router way.
We did mention the emailVerifyController, so let’s bring it into perspective:
angular.module('myApp')
.controller('emailVerifyController', ['$scope', '$stateParams', 'currentAuth', 'DatabaseRef',
function($scope, $stateParams, currentAuth, DatabaseRef) {
$scope.doVerify = function() {
firebase.auth()
//https://firebase.google.com/docs/reference/js/firebase.auth.Auth#applyActionCode
.applyActionCode($stateParams.oobCode)
.then(function(data) {
console.log(currentAuth.uid)
// DatabaseRef is just a service
// that returns the root of my database url
DatabaseRef.child('users')
.child(currentAuth.uid)
.update({ emailVerified: true });
// the above is assuming you have root/users/uid/
toastr.success('Verification happened', 'Success!');
})
.catch(function(error) {
$scope.error = error.message;
toastr.error(error.message, error.reason, { timeOut: 0 });
})
};
}
])
Why are we using firebase.auth? Well, AngularFire hasn’t come around to implementing or wrapping around all the new cool kid’s functions and features available with the 3.0 SDK of Firebase. However, dropping down to vanilla Javascript Firebase still works, besides, why not!
You may decide to checkCode as in check the oobCodeif you want to, before processing it. It’s up to you.
Hope you enjoyed this short one. Will see you in the next one.
