Angular Firebase Authentication: Step-by-Step Guide

Подписаться 44 тыс.

Просмотров 10 тыс.

50% 1

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...

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 71

@firato 24 дня назад

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 23 дня назад

Glad I could help!

@drzewko3871 6 дней назад

Thank you so much! Please never stop recording, I can count good angular based channels, with only my one hand

@MonsterlessonsAcademy 5 дней назад

More to come!

@dinysanchez 5 месяцев назад

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

@MonsterlessonsAcademy 5 месяцев назад

Thank you!

@Froppindroppin 7 дней назад

Honestly fantastic content. The angular concepts broken down is amazing for people trying to learn it by doing. Angular seems like such a great framework. Excited to keep learning.

@MonsterlessonsAcademy 7 дней назад

Glad you like it!

@bellhugo7852 2 месяца назад

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

@MonsterlessonsAcademy 2 месяца назад

Glad it helped!

@damianpietka92 2 месяца назад

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 2 месяца назад

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

@pinkusmx 3 месяца назад

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 3 месяца назад

You're welcome!

@mohammedcementwala5657 2 месяца назад

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

@MonsterlessonsAcademy 2 месяца назад

Thanks for the sub!

@hamza201183 5 месяцев назад

Many many thanks Oleksandr! 😀

@MonsterlessonsAcademy 5 месяцев назад

Thank you too!

@iantuts5030 5 месяцев назад

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 5 месяцев назад

I will add it to the list of ideas

@muthiulhaqhaq3835 4 месяца назад

Simple and clear, thank you Sir. (like)

@MonsterlessonsAcademy 4 месяца назад

You are welcome!

@bonzer111 Месяц назад

Great tutorial, thank you

@MonsterlessonsAcademy Месяц назад

You are welcome!

@jonasbeltoft 4 месяца назад

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 4 месяца назад

I will add it to the list of ideas

@ujangaripin7630 4 месяца назад

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 4 месяца назад

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 4 месяца назад

@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 3 месяца назад

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 3 месяца назад

Just you RxJS then

@tom.wallis 3 месяца назад

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

@husseinali1199 3 месяца назад

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 3 месяца назад

I already covered that ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LT8pyUwZQhI.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.

@princecodes5875 4 месяца назад

Thank you very much!

@MonsterlessonsAcademy 4 месяца назад

You are welcome!

@obiwan007 4 месяца назад

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 4 месяца назад

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

@exkoo 3 месяца назад

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 3 месяца назад

I will add it to the list of ideas

@danielpacheco2520 2 месяца назад

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 2 месяца назад

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

@danielpacheco2520 2 месяца назад

@MonsterlessonsAcademy Hello, I figured it out, thanks anyway

@rynbot1972 3 месяца назад

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

@patrickkabuga4945 4 месяца назад

Thank you!

@MonsterlessonsAcademy 4 месяца назад

You're welcome!

@MattSouzaDev 3 месяца назад

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 3 месяца назад

I have a separate video about Angular guards ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Yc93IvrouxY.htmlsi=WLImXRV24wGgHrnF

@VforVanish 5 месяцев назад

Very interesting but im wondering what is the point of Observable

@MonsterlessonsAcademy 5 месяцев назад

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 4 месяца назад

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

@strangerthingop 3 месяца назад

@@Yarinmimonshut up

@melanocetjohnsonii3173 4 месяца назад

how to add more data on registration for example age

@MonsterlessonsAcademy 4 месяца назад

You can check official documentation for that.

@ayushpandit443 4 месяца назад

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 4 месяца назад

I will add it to the list of the ideas

@manikandand2541 4 месяца назад

thanks

@MonsterlessonsAcademy 4 месяца назад

Welcome

@andreaparoli756 Месяц назад

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

@MonsterlessonsAcademy Месяц назад

I show that in the video on 15:11 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-586O934xrhQ.htmlsi=GKXsSPtoMzE4eFLa&t=921

@andreaparoli756 Месяц назад

@@MonsterlessonsAcademy thanks a lot

@yassineanceur7070 2 месяца назад

this is roobt ??

@nullepartcom 3 месяца назад

@NinjaTylerBlevins 4 месяца назад

I love you

@MonsterlessonsAcademy 4 месяца назад

Thanks

@empty_peace 2 месяца назад

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

@MonsterlessonsAcademy 2 месяца назад

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

@empty_peace 2 месяца назад

@@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