Angular Authentication and Authorization - The Correct Way

[@MonsterlessonsAcademy]

WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - kzbin.info/www/bejne/rJTJi2N7htWMiqMsi=BptT7eqgflHIoQiQ

[@sanjayms00]

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 KZbin, 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]

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

[@pmsanthosh]

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]

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

[@MaheshKumar-bg5re]

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

[@MaheshKumar-bg5re]

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

[@OnTheEdgex23]

@@MaheshKumar-bg5rewhy is that the correct way?

[@allanbruno6458]

@@TUMSonY I just run to you YT channel looking for a video from you explaining the RIGHT way. Are you upload it? Thanks!

[@GeoffTripoli]

Beginners beware! This video should not have been titled “The Correct Way”. Do not copy this way of doing things exactly. While the video does show the basics of authentication, there are a lot of things that are missing in order to keep the video simple. There is no error handling anywhere for one thing. Also, there is no separation of concerns between components and services. State management is almost completely ignored. So, yes there are some great concepts here for beginners, but it is NOT “The Correct Way”.

[@MonsterlessonsAcademy]

I agree. It's basics of authentication and it doesn't include lots of authentication advanced stuff. "The correct way" is only correct regarding the implementation of this basics in the video as I saw lots of video where even these basic were not correct.

[@davithovhannisyan7844]

Thank you for the great video, Alexandr! However, I think you missed covering an important aspect of Angular authentication: the Guards.

[@MonsterlessonsAcademy]

It was not planned as a part of the video

[@aarondiaz2506]

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]

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

[@mrluckyuncle]

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

[@MonsterlessonsAcademy]

I already covered it here

[@nightsurvivor]

very help full with the explanation, i will try to follow this video

[@MonsterlessonsAcademy]

Happy coding

[@dragonstore6308]

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]

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

[@Anand-fy8oo]

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]

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

[@advance5189]

Regarding cookies, it probably should be considered just as a recommendation, but it doesn't have anything to do with security, as there's no such thing as "security" on the client side. The same goes for guards. Blocking routes in Angular is not a security measure, but merely a UX improvement.

[@Ashish_Devi]

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

[@MonsterlessonsAcademy]

Will do

[@vrjb100]

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

[@MonsterlessonsAcademy]

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

[@vladazhyguliovtseva373]

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

[@MonsterlessonsAcademy]

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

[@BrettKromkamp]

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]

I will add it to the list of ideas

[@ebrahim6126]

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]

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

[@yusufakkurt2308]

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

[@MonsterlessonsAcademy]

Glad to hear that!

[@paweld.9542]

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

[@MonsterlessonsAcademy]

It's a matter of taste

[@SurKobaiN]

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

[@MonsterlessonsAcademy]

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

[@SurKobaiN]

​@@MonsterlessonsAcademy Perfect, thanks for the explanation!

[@Um_Zuca_Dev_Na_Ilha_da_Madeira]

ual! Nice Pal!

[@MonsterlessonsAcademy]

Thanks!

[@sfspmusic]

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]

Hi, I already made a video about it kzbin.info/www/bejne/iX6pmaaJhtume8Usi=EcLatp3-Li-A9ba3

[@soberstudy160]

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]

same error..

[@ShubhamMishra-uw9yi]

which editor you are using. it is clean

[@MonsterlessonsAcademy]

It's Vim

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

[@uaplatformacomua]

Awesome explanation

[@MonsterlessonsAcademy]

Thanks

[@NuanceWebsites]

Great video. Very helpful.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Cobyboy_x]

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]

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

[@АнтонВладыкин-г1й]

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]

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.

[@ultrawhiff]

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]

I already have videos about these topics kzbin.info/www/bejne/rGLSnqdvqrujjs0si=hDvlGuLqcebA63-- kzbin.info/www/bejne/hHetk4uGa6icb5osi=sgi4C2boPU_8k1Rq

[@olegg650]

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

[@MonsterlessonsAcademy]

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

[@pakoparde]

Great work ❤

[@MonsterlessonsAcademy]

Thanks ✌️

[@AbdelghafourLahnida-b6z]

Thank youuuuuuuuuuuuuuuuuu , this is good.

[@MonsterlessonsAcademy]

You're welcome!!

[@dimitridovgan6364]

Great tutorial! Thank you 👍

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Piri8]

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]

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]

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

[@RAHULCOC-x5f]

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

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@akinpinkman]

realworld api constantly going down any better alternatives?

[@MonsterlessonsAcademy]

Yes. Setup it locally using any real works backend API that you like.

[@mohiburrahman5639]

its very good !!

[@MonsterlessonsAcademy]

Thank you!

[@aksanalis607]

Thank you!

[@MonsterlessonsAcademy]

You're welcome!

[@Vasco.Castro]

Isn't it safer to use Guards?

[@MonsterlessonsAcademy]

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

[@Vasco.Castro]

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

[@melanocetjohnsonii3173]

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]

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

[@soeungsovanny9465]

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

[@MonsterlessonsAcademy]

I will add it to the list of ideas.

[@allchill3470]

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]

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

[@allchill3470]

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

[@kocourekkocourek-pq2tm]

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]

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]

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

[@davebudah]

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

[@giorgimindiashvili3810]

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]

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]

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

[@MultiWarrr]

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

[@MonsterlessonsAcademy]

toObservable like I show in this video but it is still in dev preview. kzbin.info/www/bejne/jX2agniemdabZpIsi=uvPCRCWsWOcAlJLi

[@J.JHenimex]

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'}

[@J.JHenimex]

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]

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

[@rohangilbile8133]

@@J.JHenimex could you please share more details on how you solve it? I'm facing similar issue

[@malharnaliyapara1965]

If the ssr is on. I can't find the localstorage reference. That's the issue I am facing right now with v17. Can anyone help me with that please 🥺

[@MonsterlessonsAcademy]

Then you should use cookie as it also exists on backend

[@malharnaliyapara1965]

@@MonsterlessonsAcademy thank you brother. I'm now managing with the cookies. Ngx-cookie-service-ssr. Thank you for the info.

[@mohiburrahman5639]

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]

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

[@bily1017]

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

[@MaheshKumar-bg5re]

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

[@MonsterlessonsAcademy]

No idea, you need to debug this

[@MaheshKumar-bg5re]

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

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

[@Evi19th]

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

[@MultiWarrr]

Thanks alot

[@MonsterlessonsAcademy]

Most welcome

[@melanocetjohnsonii3173]

insane

[@MonsterlessonsAcademy]

Thanks!

[@user-xf2di8gf1l]

whats your code editor name?

[@MonsterlessonsAcademy]

Vim

[@user-xf2di8gf1l]

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

[@wg2]

average inject() enjoyer

[@programmingintrouble]

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

[@programmingintrouble]

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

[@matthewkk5087]

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

[@MonsterlessonsAcademy]

Better now than never -_-

[@Xenon77x]

That's not a correct way mate

[@MonsterlessonsAcademy]

Why is that?

[@Xenon77x]

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

[@mehdicharife2335]

Very terrible.

[@MonsterlessonsAcademy]

Why?

[@Farouk_exe]

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 🙏🏻