Angular & Firebase Authentication: Complete Login System

This lecture will start off the course by building our first Login form using Reactive Forms API

For any real app, client side validations are a must. Here we add the necessary validations for the Login Form

Let's make the login flow work by integrating the form with Firebase Authentication!

Any real app also has a Logout button - let's add that using the awesome Material Menu component

For better UX for our sign up, we need to show loaders to the user while the app is working. Let's do that here by using the Angular Material Progress Spinner Component!

It's nice to receive messages when some operation has completed in the app. So we'll use the Material Snackbars to show notifications after logging in and errors (if there are any)

The Firebase Authentication API sends error messages when something doesn't work - we need to handle for those in a graceful way and display it to the user. Let's do that now

How does Firebase store the data in your browser to remember the login state? Let's investigate that so we can clear it out when we need to!

Our app also needs to have a sign up process to add new users. Let's create the form for that here.

The sign up form is more complex than the login form and needs more validations such as confirm password. Let's add those now!

This lecture integrates the Firebase Authentication API with the Sign up form - so we can create new users through the app!

Till now, all of our routes can be easily accessed. But we need to restrict the main app routes for only logged in users. Let's do that in this lecture using AngularFire's built in guards.

This lecture shows you how to enable the Firestore No SQL Database in the Firebase Console

Here we create the profile page form - so that the user can modify their information

We need to modify the sign up flow a bit, to accommodate storing of the user data in Firestore. I show you how to do that here

Let's see how we can get the current user profile data from Firebase using RxJS + Signals and then populate the Profile form!

Let's add the Save functionality to the Profile form - and update the profile data in the Firestore DB

It would be nice to add a profile photo for the user as well. Let's see how we can do that by using Firebase Storage API

Firebase provides an easy to use interface for adding security rules to their backend API. Let's see how we can configure it for our app so we can make our app more secure!

What is any of our user forgets his password? Let's add a way for such users to reset the password using Firebase Authentication's built in functionality

Google Sign In is now used widely in almost all web applications and makes it really convenient for users to sign up quickly. Let's see how we can do that with Firebase Authentication

For new users, we need to add a bit of an extra functionality to the Google Sign In process. Let's add that here

What good is your app if your users can't access it? Let's deploy our finished Sign Up app to the web using Firebase Hosting in simple steps!