Angular Firebase Authentication - Implement Auth in Minutes

Learn how to do Angular Firebase authentication really fast. We will configure Firebase, bind it to Angular and implement registration, login, logout and getting a user for our Angular application
TIMESTAMPS
0:00 Introduction
0:14 What is Firebase?
1:07 Creating a project in Firebase
3:28 The project
4:29 Configuring Firebase
6:42 Registering a user
11:43 Adding validation
13:13 Adding user login
15:21 Persisting a user
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Javascript interview questions - monsterlessons-academy.com/co...
► Typescript interview questions - monsterlessons-academy.com/co...
► React interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@firato]

Thank you brother. Im at my first angular project clone turning it to an e commerce page and I cant stress enough that you experienced people are helping us rookies so much with such videos. Programming is Tough
Everyone I appreciate your work!

[@MonsterlessonsAcademy]

Glad I could help!

[@dinysanchez]

Wow, another banger lesson from Monsterlesson Academy! 🤩 with the quality content as always! 🔥

[@MonsterlessonsAcademy]

Thank you!

[@bellhugo7852]

Than you so much! I was struggling for so long with this until I found your video. Greatly appreciated

[@MonsterlessonsAcademy]

Glad it helped!

[@hamza201183]

Many many thanks Oleksandr! 😀

[@MonsterlessonsAcademy]

Thank you too!

[@pinkusmx]

Thank you so much, you literally saved me, I was stuck for 8 hours with the firebase auth and this tutorial helped me a lot

[@MonsterlessonsAcademy]

You're welcome!

[@mohammedcementwala5657]

This is more valuable than 24k gold.
Thank you! This was a life saver!
Subscribed!

[@MonsterlessonsAcademy]

Thanks for the sub!

[@muthiulhaqhaq3835]

Simple and clear, thank you Sir. (like)

[@MonsterlessonsAcademy]

You are welcome!

[@bonzer111]

Great tutorial, thank you

[@MonsterlessonsAcademy]

You are welcome!

[@iantuts5030]

This video is very helpful! Please make more videos related to angular and firebase. I hope you do include Ionic with those two sooner!

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@damianpietka92]

Great job! With new update of angular/fire (17.1.0) we should remember to move all provideXXX functions outside of the importProvidersFrom array, probably a bug

[@mohammedcementwala5657]

Yes it is indeed a bug, I found it in their github discussion panel

[@princecodes5875]

Thank you very much!

[@MonsterlessonsAcademy]

You are welcome!

[@patrickkabuga4945]

Thank you!

[@MonsterlessonsAcademy]

You're welcome!

[@jonasbeltoft]

Great video!
Can you show a version that uses Firestore to expand the user object and still do live update (using the signal) based on both firebase auth and firestore data?

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@ujangaripin7630]

I really like your video, it is very simple and easy to understand. I would give a suggestion. It would be better if when explaining the project structure, start from the very beginning, starting from 'ng new' so that the audience knows what has been changed in the code.

[@MonsterlessonsAcademy]

I appreciate your feedback but this video is not about basics of Angular. Starting each video from ng new is not interesting for students and make videos 15-20 mins longer.

[@ujangaripin7630]

@MonsterlessonsAcademy Thank you for your reply and I am grateful for making a very helpful video for me that is not taught at my campus. I request for a video about Angular and Firebase so that people like me can learn more diligently, maybe you can make a video about Angular and Firebase (Login CRUD File upload) for the next Angular tutorial.
Thank you very much 😇😇😇

[@tom.wallis]

Great video - thanks! I'm using Angular 15 and noticed Angular 17 introduced signals for state management. Is there a similar approach for managing and filtering user state in Angular 15, particularly for controlling the exposure of Firebase user details? Thanks!

[@MonsterlessonsAcademy]

Just you RxJS then

[@tom.wallis]

@@MonsterlessonsAcademy thank you! Great videos, I’m finding your Angular & Auth videos really helpful.

[@obiwan007]

Do you have the complete code in your repository?
In the provided link there is basically just the starter angular app without any fir stuff added.

[@MonsterlessonsAcademy]

It looks like I accidently overrode all files. So no I don't have the complete code anymore.

[@husseinali1199]

Thank you for the valuable lesson. My question is, why do you not prefer promise in angular? and What is the advantage of using Observable?

[@MonsterlessonsAcademy]

I already covered that
th-cam.com/video/LT8pyUwZQhI/w-d-xo.htmlsi=g4wvJjFQlT0HLsR2
Additionally in Angular everything returns an observable so using promises is not an Angular way and you limits yourself with possibilities of combining streams.

[@rynbot1972]

When i register the user the logout option appears it Is supposed to appear when I log in Not when I registered the user

[@exkoo]

Very good video. My current problem is how to implement guards. E. g. to protect the login page when a user is already logged in. Would be nice if you could make a video about that topic.

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@danielpacheco2520]

Hello, thanks for the video, I have a question, how do you handle uploading this firebase configuration to github? In case of deploying it let's say vercel, how could I handle this? thank you

[@MonsterlessonsAcademy]

I don't have experience on uploading it on vercel so can't say anything

[@danielpacheco2520]

@MonsterlessonsAcademy Hello, I figured it out, thanks anyway

[@manikandand2541]

thanks

[@MonsterlessonsAcademy]

Welcome

[@VforVanish]

Very interesting but im wondering what is the point of Observable

[@MonsterlessonsAcademy]

It's an observable which doesn't return any data. In our case we want to redirect a user on success but we don't care about data

[@Yarinmimon]

How do you ask such questions? Learn TS first before rushing into angular framework

[@strangerthingop]

​@@Yarinmimonshut up

[@MattSouzaDev]

Great video!
It would be even more helpful if you showed how to prevent user from accessing pages when the user is not authenticated.

[@MonsterlessonsAcademy]

I have a separate video about Angular guards
th-cam.com/video/Yc93IvrouxY/w-d-xo.htmlsi=WLImXRV24wGgHrnF

[@melanocetjohnsonii3173]

how to add more data on registration for example age

[@MonsterlessonsAcademy]

You can check official documentation for that.

[@ayushpandit443]

Can you create a video on getting and setting data with firebase realtime database with angular as there is no proper video about same

[@MonsterlessonsAcademy]

I will add it to the list of the ideas

[@yassineanceur7070]

this is roobt ??

[@andreaparoli756]

how can i check if a user is logged or not?

[@MonsterlessonsAcademy]

I show that in the video on 15:11 th-cam.com/video/586O934xrhQ/w-d-xo.htmlsi=GKXsSPtoMzE4eFLa&t=921

[@andreaparoli756]

@@MonsterlessonsAcademy thanks a lot

[@NinjaTylerBlevins]

I love you

[@MonsterlessonsAcademy]

Thanks

[@nullepartcom]

[@empty_peace]

i don't understand the app.config.ts file i didn't see that before what does it do and what is it 🫥

[@MonsterlessonsAcademy]

It's just a config that we use in main.ts. Angular generates it by default.

[@empty_peace]

@@MonsterlessonsAcademy actually the provider thing it's very confusing how to do it more easily ? where the provider thing I want to handle it to the main app module cause here its very confusing