#7: Back-End with Firebase Authentication

I started off by creating the interface for the login, register, as well as the main functionality of the web application.

Here's how the prototypes look like:

register page

To register, users have to provide their full name, email address and password.

login page

Users have to provide their email address and password to login to their accounts.

What I had to do was to allow user sign in, sign out, as well as handle account creation. Firebase automatically has a method to allow creation of user by email and password, so I made use of this function to create and write into the database.

sign up

I also tried to send email verification and password reset when the user clicks on "Forget password?".

email verification, password reset

Allowed sign in by email and password.

sign in

To sign out, I made use of the authentication sign out function that Firebase already has and did some error handling.

sign out

Once the user has signed into the application, they will be redirected to "home.html". The image below shows how it looks like:

This page shows all available recipes that the user can add to their favourites list. Since the main purpose of the web application is to allow them to view recipes on a larger screen, we decided to focus on this feature for now.

When a recipe is added, they will appear in the favourites page of the user.

Wan Ning