Angular 6 FireBase Gallery <ServerLess> — WITH Authentication.
Hello Friends.
This tutorial is an extension to the FireBase Gallery application tutorial. This tutorial aims at including various authentication mechanisms to our gallery application. This includes:
1. Email and password based authentication
2. Federated identity provider integration ( Google, Facebook, GitHub )
3. SignUp
4. Send Password Reset Email.
Tutorial Prerequisites: You have to go through FireBase Gallery application tutorial to follow this tutorial.
The only change when compared to my previous tutorial is the inclusion of authentication. Did you notice my image from Facebook in the screenshot below ? ;)
Lets start by making changes in our Firebase console for our application. Under ‘Authentication’, enable status for providers ‘Email / Password’, ‘Gmail’, ‘Facebook’, ‘GitHub’. Please feel free to enable other providers if you like to.
You will need to provide App Id, Secret and other details of the application which you are planning to set up for OAuth. An example ( for Facebook ) is provided below. Check out this link for more details.
You can also set your email templates for password reset or sign up emails.
Coming to coding part, we will start by creating new component “Login” and new service “auth.service.ts”.
Lets understand the code now. The file ‘auth.service.ts’ has code related to authentication which uses Oauth login with various federated identities. For instance, consider the function ‘loginWithGoogle()’ which ultimately gets called when user tries to login passing on his/her gmail credentials.
Note that, in the code, we are setting the persistence to ‘LOCAL’ which means the authentication holds good until I sign out. In the background, the session variables are stored on the browser and will not get cleared unless I explicitly sign out (or clear cache of-course). The other two values for persistence are
1) ‘SESSION’ which keeps the state in the current session or tab, and will be cleared when the tab or window in which the user authenticated is closed.
2) ‘NONE’ which indicates that the state will only be stored in memory and will be cleared when the window or activity is refreshed.
More on persistence here.
Now lets check how we are handling login asynchronously. In login.html file, there is a code which gets triggered asynchronously when the user object is available. The ‘authServ.user’ gets user details upon logging successfully.
Here is the login page when gets loaded upon accessing the application URL.
Please note that, a user entry is created as Firebase Authorized users with corresponding providers (Google/FB/GitHub etc), when the user logs in using OAuth or Signs Up.
If you notice login.ts, the majority of the code is for custom login. The OAth login on the other hand is a one liner.
One other important code snippet is below. This function gets triggered as an observable from ngInit() as soon as the user login is successful. You can get all sorts of information from the firebase user object. In the code snippet below, I am toggling various DOM elements on the html (login.html) page to display appropriate buttons on successful login. When the user logs out, I would just toggle back the DOM elements.
For password reset functionality, I am using below code gist. Firebase gives us with all these api functions which we just need to call to get the job done. We do not need to worry about writing all these on our own. Note that I am using notifications service just like my other tutorials for nice look and feel of the alerts instead of alerts which come out of the box.
The sendPasswordResetEmail api triggers an email ( as per the template set up in the console )
Clicking on the link from the email will give a popup to enter the new password to be updated. All this functionality is part of the api and we did not code it explicitly.
This completes the tutorial. Please keep in mind that the application which you are going to develop, if you are going to make it public, chances are that your Firebase storage gets flooded by unwanted images from public even with this level of authentication. One method to address this is by disabling the user account upon creation and manually enable the email address by logging into the console. You may also use “SendEmailverification” api for more security.
admin.auth().updateUser(uid, {
disabled: true
});The full repository is present in my GitHub.
Please follow me if you liked this tutorial. Please give suggestions (if any) in the comments below. Show you support with your claps :). Cheers!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
