Angular Authentication and Authorization - The Correct Way

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

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

50% 1

Learn Angular authentication and authorization in a single video. Here we will implement registration, login, obtaining a JWT token from the real API and authorization for our Angular application with Angular interceptor.
TIMESTAMPS
0:00 Introduction
0:40 Initial project
1:29 Real API
2:40 Registration
9:58 Angular authentication
11:56 Reading a user
14:57 Getting a user
16:08 Angular authorization
21:17 Logout
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions 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...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

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

8 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@sanjayms00 7 месяцев назад

i was waiting for this video, literally i will cry.. i am so happy, please make videos on angular. we have comparatively less good videos for angular in RU-vid, i am from India, and now I'm leaning mean stack, but my collogues changed to react and other domain because angular having less resources, so please make more videos on angular, its very helpful for new developers like us.

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

Angular authentication and all other real world features are covered in my full Angular NgRx course which is 8 hours long. monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch

@yusufakkurt2308 7 месяцев назад

Thank you for the lesson, I learned a lot of new information. 👍

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

Glad to hear that!

@NuanceWebsites 7 месяцев назад

Great video. Very helpful.

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

Glad it was helpful!

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

Awesome explanation

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

Thanks

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

Great work ❤

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

Thanks ✌️

@Ashish_Devi 7 месяцев назад

Very nice video please continue creating videos on different topics in angular 17 ❤

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

Will do

@pmsanthosh 7 месяцев назад

This is good. But for additional security I believe that we can use set-cookie in response and with-credentials header to store and pass token. (If we have control over the backend)

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

Sure. I just didn't want to overcomplicate beginner knowledge.

@MaheshKumar-bg5re 7 месяцев назад

@@MonsterlessonsAcademyBut in title, you have mentioned the "the correct way". is it not the right way then?

@MaheshKumar-bg5re 7 месяцев назад

Hi, do you have any tutorial regarding this? How to do securely?

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

@@MaheshKumar-bg5rewhy is that the correct way?

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

@@MaheshKumar-bg5re yeah this title is bullshit like the content itself. The title should be how to do it incomplete and by that the wrong way ;)

@Anand-fy8oo 7 месяцев назад

Since it is beginner course this is the simplest way one can implement auth. Along with this, there are conceps like angular guards, cookies, that is used on enterprise software.

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

Yes of course. This is a beginner introduction in authentication.

@sfspmusic 7 месяцев назад

Dear Olex, could you please explain if there is any specific point you use inject, not DI in a constructor? I'm just a beginner so it's better to develop good habits right from the start.

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

Hi, I already made a video about it ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SMFhsSQvsEc.htmlsi=EcLatp3-Li-A9ba3

@user-mw3qw1vt4c 5 месяцев назад

Thank youuuuuuuuuuuuuuuuuu , this is good.

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

You're welcome!!

@aksanalis607 6 месяцев назад

Thank you!

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

You're welcome!

@mohiburrahman5639 7 месяцев назад

its very good !!

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

Thank you!

@ultrawhiff 7 месяцев назад

Hi man, great video. Can you please make a video on new angular 17 project structure? To understand the new default behavior of standalone components throughout the project and also to understand the starting points and lazy loading of routes etc. Already a subscriber :))

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

I already have videos about these topics ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-v1omt9uVpXk.htmlsi=hDvlGuLqcebA63-- ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NFJbXP6Ci98.htmlsi=sgi4C2boPU_8k1Rq

@soberstudy160 6 месяцев назад

Nice vid thank you... I still get a 401 from the ngOnInit... also in your code from github... looks like the interceptor doesn't get triggert? I mean it works but the get still throws an error or is that like normal and ok?

@olegg650 6 месяцев назад

same error..

@dimitridovgan6364 7 месяцев назад

Great tutorial! Thank you 👍

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

Glad it was helpful!

@paweld.9542 3 месяца назад

Very good video but I wonder if we can create getUser function inside the AuthService ? Isn't this better ?

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

It's a matter of taste

@mrluckyuncle 22 дня назад

Great video. Why do you use inject() instead of providing the dependencies to a constructor?

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

I already covered it here

@MultiWarrr 7 месяцев назад

Thanks alot

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

Most welcome

@user-wo5um9ur1b 7 месяцев назад

Great video! But i don`t understand why You need 'undefined' state for signal? Looks like it can be only 'null | User' state. And in that case You avoid additional request to server. Only check for null or User. Can You explaine?

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

No. In order to know if the use is logged it we must do an API call. Before it is done we need a value and it's undefined.

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

what if i want to store more stuff from the user at the registration like for example their age. and retrieve that as well after login. is that api link good or allows only username,email,password,bio,image?

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

You can check official documentation for possible API calls and information that you can pass.

@cobyboy383 7 месяцев назад

Hi. I have a question. When you register, you get a token, what's the use of it? Cause when you log in you will get a new token and save it to localstorage

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

So you avoid loginning and can login a user right after registration.

@Piri8 7 месяцев назад

Hi I was wondering if I can request a video about Angular Elements, how they are created and used 😊 I was looking for a section about angular elements in your courses but I could not find any

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

I checked what it is first time in my life and the topic doesn't look that popular. I added it in the list of ideas but I doubt that I make a video about it.

@Piri8 7 месяцев назад

@@MonsterlessonsAcademy you are right, I guess is only a very niche group of people who have the need of this feature. This is very useful when trying to migrate gradually from an old framework or from no framework to angular. Or when trying to implement micro-frontends using different frameworks. Anyways… thanks for your reply.

@SurKobaiN 6 месяцев назад

Great video and thanks for your work! Why didn´t you use Guards?

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

Because they are not directly related to authentication process and it make a video even longer.

@SurKobaiN 6 месяцев назад

@@MonsterlessonsAcademy Perfect, thanks for the explanation!

@MultiWarrr 7 месяцев назад

Sorry the question is not related to the video, is there any way i make observable out of signal which is production ready

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

toObservable like I show in this video but it is still in dev preview. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WL7QEhdqh00.htmlsi=uvPCRCWsWOcAlJLi

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

This is a fantastic tutorial. Could you extend this tutorial with refresh (token) logic: use an interceptor to automatically get a new access token using the refresh token when the access token has expired? Anyway, I've subscribed and thanks for the tutorial.

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

I will add it to the list of ideas

@dragonstore6308 7 месяцев назад

I think the way you teach angular is amazing, the only reason I don't buy your courses is because I find it very difficult to understand your IDE and the way you move through files with the terminal, I'm used to VSC because of that most courses are done using it...

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

I understand that but I don't want to use an editor which is not comfortable for me and there I'm not productive.

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

I always follow your tutorials and courses. I have a question here. why not just save the user information on localstorage instead of making api call every time we reload.

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

You can do that but you can't be sure that it's a same user if it is a public computer. Your backend will check token anyway to know if you have access to the resource

@olegg650 6 месяцев назад

Could you make a video with firebase authorization ? There are many lessons but they all do not work with angular 17)

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

I will add it to the list of ideas for future videos

@vladazhyguliovtseva373 7 месяцев назад

What version of Angular is? why you don't use constractor?

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

17. Because inject is easier and modern way to do this

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

currently im having a problem when im in home page and i reload it the login page flashes for a moment, why is that? currently i implemented a guard that if the user is not logged in redirect the user to login page if trying to access home page.

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

Not really. If you have guard it won't flash the page. Probably problem in the guard values.

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

@@MonsterlessonsAcademy when i try to set the value of ssr and prerender to false in angular.json file it will not flash the login page. But doing so makes the app having some disadvantage. I don't know why its happening and maybe someone can answer my concern

@ShubhamMishra-uw9yi 10 дней назад

which editor you are using. it is clean

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

It's Vim

@giorgimindiashvili3810 7 месяцев назад

new angualar have but or my pc already dont know, When im writing code in SCSS and for example I write color: ; before I give property to this color angular goes on the error and if I will write after 1 second color: #fff; angular already eat my brain with error wich was one second ago and if I dont ctrl + c and ng serve again code isnot working and goes on the error, Its waste my time and I'm very tired already with it please people give me advice this is my pc problem or Angular have bug.

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

I sorry but I don't do consultations on debugging specific problems. You can find lots of beginner videos about Angular on my channel. Hope it helps.

@pmsanthosh 7 месяцев назад

This happened a lot to me. Hope the angular team fixes it soon

@user-wd1wc7ee3v 7 месяцев назад

is there a known issue about angular 17 I created my interceptor and added to config file. I have added some console.logs for test but its not intercepts my http calls. always returns 401 unauthorized after check headers there is no token information added. and of course api returns error : {status: 'error', message: 'missing authorization credentials'}

@user-wd1wc7ee3v 7 месяцев назад

it was because of component-based http calls. in angular 17 inject is not enough for http calls you have to provide it in to config file. but i imported every single component. that was blocked interceptor. because my http calls reach the destination through the component. if(someOneFacedWithSameProblem) {ResolveItEasly return Console.log("Thank You")}

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

I can't really help here. Interceptors are working for me in Angular 17

@rohangilbile8133 6 месяцев назад

@@user-wd1wc7ee3v could you please share more details on how you solve it? I'm facing similar issue

@aarondiaz2506 7 месяцев назад

Please put subtitle to the courses on your webpage, im hard of hearing and im not purchasing for that reason, also subtitles make it easier to understand to people who don't know english at high level, at least for me it does these two functions. I mean audio transcription is ok, im not asking for traduction, just subtitles. Thanks :)

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

Hi thank you for the feedback. I will put it in the list of things to improve.

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

thank you very much, but i was wishing to see handling the server validations errors

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

You can read them in error part of subscribe when server delivers 422 with an error and just render it on screen

@mohiburrahman5639 7 месяцев назад

could you make a solution for me please.i want to verify my token from angular side when user click one link for registration. Like i send a link with token from nodejs. when user click this link i want to verify from Frontend that token is valid. if valid registration will be successful else false. thanks

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

Unfortunately I don't solve custom problems in youtube comments.

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

@@MonsterlessonsAcademy I feel bad for you, all of these comments are ridiculous

@kocourekkocourek-pq2tm 7 месяцев назад

Dear Oleksandr, great content! so many thanks, please provide us Nestjs authentication and authorization with best peactice also would be nice to implenent it with cookies

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

You rolled jackpot. The video about Nest authentication comes on 21th of November and is already available for silver members. If you are interested on implementing authentication inside real project I have a full NestJS course which includes it. monsterlessons-academy.com/courses/nestjs-building-an-api-for-real-project-from-scratch

@kocourekkocourek-pq2tm 7 месяцев назад

i am looking forward to that! so nany thaks you are a senior dev with many experiences i love your style

@davebudah 7 месяцев назад

@@MonsterlessonsAcademy to anyone reading this comment just know this course is worth every cent, go for it.

@soeungsovanny9465 6 месяцев назад

Can u make it with the same form but using with firebase?

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

I will add it to the list of ideas.

@MaheshKumar-bg5re 7 месяцев назад

withInterceptors - after adding this, i am getting localhost is not defined error. why? I am using Angular17

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

No idea, you need to debug this

@MaheshKumar-bg5re 7 месяцев назад

@@MonsterlessonsAcademy It is because i dont have access to localStorage in server side. (not localhost. my mistake). Can you please make a video how to do auth in angular 17 with ssr enabled? It is very confusing. I think localStorage is accessible if i turn off ssr.

@soberstudy160 6 месяцев назад

@@MaheshKumar-bg5re in your interceptor inject platformid and use function isPlatformBrower(platformid) on the top of my head...

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

@@MaheshKumar-bg5re If SSR enabled, inside of auth.interceptors.ts. Write this: const platformId = inject(PLATFORM_ID); const token = isPlatformBrowser(platformId) ? localStorage.getItem('token') : '';

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

The correct way is use backend for frontend patteren, jwt should never be stored in storage accessible by javascript.

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

Sure but this is a beginners video of implementing authentication. It doesn't cover all production security cases.

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

insane

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

Thanks!

@RAHULCOC-x5f 14 дней назад

Could you please create a tutorial regarding authentication in angular SSR 😢

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

I will add it to the list of ideas

@Vasco.Castro 6 дней назад

Isn't it safer to use Guards?

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

Guards is just client route protection. It doesn't bring any real protection. It should always be on backend.

@Vasco.Castro 5 дней назад

@@MonsterlessonsAcademy well yeah, obviously! But guards have a part in frontend, don't you think it's better with them? I'm curious to know now 😉

@user-xf2di8gf1l 7 месяцев назад

whats your code editor name?

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

Vim

@user-xf2di8gf1l 6 месяцев назад

@@MonsterlessonsAcademy can you make a vido how to customize like yours

@rajanpunniamoorthy3452 7 месяцев назад

Don't you think the password should be encrypted

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

Yes obviously

@dimitridovgan6364 7 месяцев назад

It's just a basic tutorial about how to start writing authorization logic in your application - for beginners. Why should the author spoil the code with non basic stuff just at the beginning? It's just the right amount of code for such a tutorial. Thanks 👍

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

average inject() enjoyer

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

Нема сумніву, що у вас є знання, але ви не в змозі організувати або пояснити (чому? і як?) просто "повзання" відео не допоможе багато, доки ви краще не організуєте відео. Щодо другого пункту, пишіть код з початку або взагалі не пишіть, оскільки є багато початківців, які не мають уявлення, про що ви говорите.

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

І змініть редактор.

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

Why youtube showed me this now? I already used firebase and I wanna die 😭😭😭

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

Better now than never -_-

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

"The Correct Way" - and then not even mention AuthGuard? 🤔

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

Authentication doesn't have anything to do with AuthGuard. You might not even need to guard your routes (as most people do). It's an additional feature

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

That's not a correct way mate

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

Why is that?

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

@@MonsterlessonsAcademy coding style is not up to date and very cluttered, it will be hard to maintain. maybe not everyone is beginner so...

@mehdicharife2335 7 месяцев назад

Very terrible.

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

Why?

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

Respect and Appreciate the efforts of others ! I bet u didn't even completed the vid.. @monsterlessonsAcademy great content bro all the support keep going im new to angular and your vids are very useful 🙏🏻