Authentication sucks, we have to code on the client and on the server side, handle tokens, sessions, handle password resets, send the emails through an SMTP server and so much more.
Well … not anymore, Firebase comes to the rescue!
The previous tutorial was just the tip of the iceberg, Firebase allows us to be lazy and have our authentication system done with 100 lines of code.
As usual we need to prepare Firebase first, it starts here.
And a new project:
I’m just going to re-use the one from the previous tutorial on Firebase RealTime Database.
Then activating the service in the Authentication section:
Linking the Firebase Account
Let’s create our Ionic application, install Firebase and AngularFire:
AngularFire needs a configuration file to connect to Firebase, our file will be located in src/environments/environment.ts:
This information is available in the Authentication section:
We can now modify the app.module.ts file:
The AngularFire Module is initialized here by using the configuration file that we previously created alongside the AngularFireAuth Module and the declaration of the AngularFireAuth Provider.
The home.html file will be very simple:
Two properties: email and password.
The registration and login will be handled by two methods: register and login. Both of them require the email and password to act.
The home.ts is then built:
Nothing fancy here, we grab the AngularFireAuth Service and stock it in the angularFireAuth property.
Ok, so now we need the register and login methods, but also the sendEmailVerification so the user can legitimately activate its account, remember, you don’t want to register users without verification, generally one account is linked to an email which could lead to identity thief.
The method is as follow:
It does get tricky here.
The first thing that came to my mind was using an email address to directly send the email, however that’s not how it works.
The user must be connected first in order to use the sendEmailVerification method.
We get this information by subscribing to the authState method in the angularFireAuth Service.
So if the user is already logged it’s not logic no?
Nop, although the user is already logged in, there is a field that notifies us about the user status:
This one will only become true once the user clicks on the link in the email:
Great so the security is now built.
We can move to the register method:
Just like before using the angularFireAuth property, this time we use the auth property which contains most authentication related methods like createUserWithEmailAndPassword (that can’t be more explicit), just use the email and password that we received from the form.
If everything is correct, we send the verification email. If not we can show the error to the user (ex: weak password, email already used, etc.).
The login method is simpler:
This time we just use the signInWithEmailAndPassword method and receive the user information.
At this point, we can let the user in if the email is already verified or show a new button to use the email verification:
One last feature that you might need in case the user has lost its password … using the sendPasswordResetEmail method:
Four years ago creating an Authentication System was a one or two day task, now it only takes one or two hours thanks to services like Firebase (who knows maybe in 5 or 10 years it will take two minutes with voice command 😀).
All we need is setting up Firebase in the browser, importing AngularFire and AngularFireAuth Modules, then using the AngularFireAuth Service. On the other side, setting up OAuth with Ionic is a bit more complex, but that’s for another day.
Tomorrow’s tutorial will be about creating custom API with Firebase Cloud Functions, so stay tuned for more.