No video

Angular Authentication and Authorization - The Correct Way

  Рет қаралды 29,918

Monsterlessons Academy

Monsterlessons Academy

Күн бұрын

Пікірлер: 132
@sanjayms00
@sanjayms00 9 ай бұрын
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 KZfaq, 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
@MonsterlessonsAcademy 9 ай бұрын
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
@pmsanthosh 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
Sure. I just didn't want to overcomplicate beginner knowledge.
@MaheshKumar-bg5re
@MaheshKumar-bg5re 9 ай бұрын
@@MonsterlessonsAcademyBut in title, you have mentioned the "the correct way". is it not the right way then?
@MaheshKumar-bg5re
@MaheshKumar-bg5re 9 ай бұрын
Hi, do you have any tutorial regarding this? How to do securely?
@OnTheEdgex23
@OnTheEdgex23 7 ай бұрын
@@MaheshKumar-bg5rewhy is that the correct way?
@TUMSonY
@TUMSonY 4 ай бұрын
@@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 ;)
@aarondiaz2506
@aarondiaz2506 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
Hi thank you for the feedback. I will put it in the list of things to improve.
@waelmoh
@waelmoh 3 ай бұрын
thank you very much, but i was wishing to see handling the server validations errors
@MonsterlessonsAcademy
@MonsterlessonsAcademy 3 ай бұрын
You can read them in error part of subscribe when server delivers 422 with an error and just render it on screen
@nightsurvivor
@nightsurvivor Ай бұрын
very help full with the explanation, i will try to follow this video
@MonsterlessonsAcademy
@MonsterlessonsAcademy 29 күн бұрын
Happy coding
@Anand-fy8oo
@Anand-fy8oo 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
Yes of course. This is a beginner introduction in authentication.
@mrluckyuncle
@mrluckyuncle 2 ай бұрын
Great video. Why do you use inject() instead of providing the dependencies to a constructor?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 2 ай бұрын
I already covered it here
@dragonstore6308
@dragonstore6308 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
I understand that but I don't want to use an editor which is not comfortable for me and there I'm not productive.
@vladazhyguliovtseva373
@vladazhyguliovtseva373 8 ай бұрын
What version of Angular is? why you don't use constractor?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
17. Because inject is easier and modern way to do this
@vrjb100
@vrjb100 6 ай бұрын
The correct way is use backend for frontend patteren, jwt should never be stored in storage accessible by javascript.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 6 ай бұрын
Sure but this is a beginners video of implementing authentication. It doesn't cover all production security cases.
@yusufakkurt2308
@yusufakkurt2308 8 ай бұрын
Thank you for the lesson, I learned a lot of new information. 👍
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
Glad to hear that!
@NuanceWebsites
@NuanceWebsites 8 ай бұрын
Great video. Very helpful.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
Glad it was helpful!
@paweld.9542
@paweld.9542 5 ай бұрын
Very good video but I wonder if we can create getUser function inside the AuthService ? Isn't this better ?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 5 ай бұрын
It's a matter of taste
@GeoffTripoli
@GeoffTripoli 24 күн бұрын
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
@MonsterlessonsAcademy 24 күн бұрын
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.
@BrettKromkamp
@BrettKromkamp 3 ай бұрын
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
@MonsterlessonsAcademy 3 ай бұрын
I will add it to the list of ideas
@RAHULCOC-x5f
@RAHULCOC-x5f 2 ай бұрын
Could you please create a tutorial regarding authentication in angular SSR 😢
@MonsterlessonsAcademy
@MonsterlessonsAcademy 2 ай бұрын
I will add it to the list of ideas
@allchill3470
@allchill3470 5 ай бұрын
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
@MonsterlessonsAcademy 5 ай бұрын
Not really. If you have guard it won't flash the page. Probably problem in the guard values.
@allchill3470
@allchill3470 5 ай бұрын
@@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
@Ashish_Devi
@Ashish_Devi 8 ай бұрын
Very nice video please continue creating videos on different topics in angular 17 ❤
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
Will do
@ShubhamMishra-uw9yi
@ShubhamMishra-uw9yi Ай бұрын
which editor you are using. it is clean
@MonsterlessonsAcademy
@MonsterlessonsAcademy Ай бұрын
It's Vim
@pakoparde
@pakoparde 4 ай бұрын
Great work ❤
@MonsterlessonsAcademy
@MonsterlessonsAcademy 4 ай бұрын
Thanks ✌️
@ultrawhiff
@ultrawhiff 8 ай бұрын
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
@MonsterlessonsAcademy 8 ай бұрын
I already have videos about these topics kzfaq.info/get/bejne/rJefoNdq2rzUiJ8.htmlsi=hDvlGuLqcebA63-- kzfaq.info/get/bejne/hKx6lbuBm6nNaWw.htmlsi=sgi4C2boPU_8k1Rq
@uaplatformacomua
@uaplatformacomua 6 ай бұрын
Awesome explanation
@MonsterlessonsAcademy
@MonsterlessonsAcademy 6 ай бұрын
Thanks
@user-wo5um9ur1b
@user-wo5um9ur1b 8 ай бұрын
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
@MonsterlessonsAcademy 8 ай бұрын
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.
@malharnaliyapara1965
@malharnaliyapara1965 24 күн бұрын
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
@MonsterlessonsAcademy 21 күн бұрын
Then you should use cookie as it also exists on backend
@malharnaliyapara1965
@malharnaliyapara1965 18 күн бұрын
@@MonsterlessonsAcademy thank you brother. I'm now managing with the cookies. Ngx-cookie-service-ssr. Thank you for the info.
@soberstudy160
@soberstudy160 8 ай бұрын
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
@olegg650 7 ай бұрын
same error..
@ebrahim6126
@ebrahim6126 6 ай бұрын
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
@MonsterlessonsAcademy 6 ай бұрын
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
@olegg650 7 ай бұрын
Could you make a video with firebase authorization ? There are many lessons but they all do not work with angular 17)
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
I will add it to the list of ideas for future videos
@sfspmusic
@sfspmusic 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
Hi, I already made a video about it kzfaq.info/get/bejne/ibN2m9aEttzXdZc.htmlsi=EcLatp3-Li-A9ba3
@tonyfilho1643
@tonyfilho1643 11 күн бұрын
ual! Nice Pal!
@MonsterlessonsAcademy
@MonsterlessonsAcademy 11 күн бұрын
Thanks!
@SurKobaiN
@SurKobaiN 7 ай бұрын
Great video and thanks for your work! Why didn´t you use Guards?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
Because they are not directly related to authentication process and it make a video even longer.
@SurKobaiN
@SurKobaiN 7 ай бұрын
​@@MonsterlessonsAcademy Perfect, thanks for the explanation!
@Cobyboy_x
@Cobyboy_x 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
So you avoid loginning and can login a user right after registration.
@MultiWarrr
@MultiWarrr 9 ай бұрын
Sorry the question is not related to the video, is there any way i make observable out of signal which is production ready
@MonsterlessonsAcademy
@MonsterlessonsAcademy 9 ай бұрын
toObservable like I show in this video but it is still in dev preview. kzfaq.info/get/bejne/jbJnhKiZydfMYGQ.htmlsi=uvPCRCWsWOcAlJLi
@dimitridovgan6364
@dimitridovgan6364 9 ай бұрын
Great tutorial! Thank you 👍
@MonsterlessonsAcademy
@MonsterlessonsAcademy 9 ай бұрын
Glad it was helpful!
@Vasco.Castro
@Vasco.Castro Ай бұрын
Isn't it safer to use Guards?
@MonsterlessonsAcademy
@MonsterlessonsAcademy Ай бұрын
Guards is just client route protection. It doesn't bring any real protection. It should always be on backend.
@Vasco.Castro
@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 😉
@user-mw3qw1vt4c
@user-mw3qw1vt4c 6 ай бұрын
Thank youuuuuuuuuuuuuuuuuu , this is good.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 6 ай бұрын
You're welcome!!
@soeungsovanny9465
@soeungsovanny9465 7 ай бұрын
Can u make it with the same form but using with firebase?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
I will add it to the list of ideas.
@aksanalis607
@aksanalis607 7 ай бұрын
Thank you!
@MonsterlessonsAcademy
@MonsterlessonsAcademy 7 ай бұрын
You're welcome!
@mohiburrahman5639
@mohiburrahman5639 9 ай бұрын
its very good !!
@MonsterlessonsAcademy
@MonsterlessonsAcademy 9 ай бұрын
Thank you!
@giorgimindiashvili3810
@giorgimindiashvili3810 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
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
@pmsanthosh 9 ай бұрын
This happened a lot to me. Hope the angular team fixes it soon
@user-wd1wc7ee3v
@user-wd1wc7ee3v 9 ай бұрын
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
@user-wd1wc7ee3v 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
I can't really help here. Interceptors are working for me in Angular 17
@rohangilbile8133
@rohangilbile8133 7 ай бұрын
@@user-wd1wc7ee3v could you please share more details on how you solve it? I'm facing similar issue
@Piri8
@Piri8 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
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
@Piri8 9 ай бұрын
@@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.
@melanocetjohnsonii3173
@melanocetjohnsonii3173 5 ай бұрын
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
@MonsterlessonsAcademy 5 ай бұрын
You can check official documentation for possible API calls and information that you can pass.
@kocourekkocourek-pq2tm
@kocourekkocourek-pq2tm 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
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
@kocourekkocourek-pq2tm 9 ай бұрын
i am looking forward to that! so nany thaks you are a senior dev with many experiences i love your style
@davebudah
@davebudah 9 ай бұрын
@@MonsterlessonsAcademy to anyone reading this comment just know this course is worth every cent, go for it.
@MaheshKumar-bg5re
@MaheshKumar-bg5re 8 ай бұрын
withInterceptors - after adding this, i am getting localhost is not defined error. why? I am using Angular17
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
No idea, you need to debug this
@MaheshKumar-bg5re
@MaheshKumar-bg5re 8 ай бұрын
@@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
@soberstudy160 8 ай бұрын
@@MaheshKumar-bg5re in your interceptor inject platformid and use function isPlatformBrower(platformid) on the top of my head...
@Evi19th
@Evi19th 6 ай бұрын
@@MaheshKumar-bg5re If SSR enabled, inside of auth.interceptors.ts. Write this: const platformId = inject(PLATFORM_ID); const token = isPlatformBrowser(platformId) ? localStorage.getItem('token') : '';
@mohiburrahman5639
@mohiburrahman5639 9 ай бұрын
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
@MonsterlessonsAcademy 9 ай бұрын
Unfortunately I don't solve custom problems in youtube comments.
@bily1017
@bily1017 7 ай бұрын
@@MonsterlessonsAcademy I feel bad for you, all of these comments are ridiculous
@MultiWarrr
@MultiWarrr 9 ай бұрын
Thanks alot
@MonsterlessonsAcademy
@MonsterlessonsAcademy 9 ай бұрын
Most welcome
@wg2
@wg2 7 ай бұрын
average inject() enjoyer
@melanocetjohnsonii3173
@melanocetjohnsonii3173 5 ай бұрын
insane
@MonsterlessonsAcademy
@MonsterlessonsAcademy 5 ай бұрын
Thanks!
@user-xf2di8gf1l
@user-xf2di8gf1l 8 ай бұрын
whats your code editor name?
@MonsterlessonsAcademy
@MonsterlessonsAcademy 8 ай бұрын
Vim
@user-xf2di8gf1l
@user-xf2di8gf1l 8 ай бұрын
@@MonsterlessonsAcademy can you make a vido how to customize like yours
@TUMSonY
@TUMSonY 4 ай бұрын
"The Correct Way" - and then not even mention AuthGuard? 🤔
@MonsterlessonsAcademy
@MonsterlessonsAcademy 4 ай бұрын
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
@matthewkk5087
@matthewkk5087 5 ай бұрын
Why youtube showed me this now? I already used firebase and I wanna die 😭😭😭
@MonsterlessonsAcademy
@MonsterlessonsAcademy 5 ай бұрын
Better now than never -_-
@programmingintrouble
@programmingintrouble 5 ай бұрын
Нема сумніву, що у вас є знання, але ви не в змозі організувати або пояснити (чому? і як?) просто "повзання" відео не допоможе багато, доки ви краще не організуєте відео. Щодо другого пункту, пишіть код з початку або взагалі не пишіть, оскільки є багато початківців, які не мають уявлення, про що ви говорите.
@programmingintrouble
@programmingintrouble 5 ай бұрын
І змініть редактор.
@xenon4602
@xenon4602 5 ай бұрын
That's not a correct way mate
@MonsterlessonsAcademy
@MonsterlessonsAcademy 5 ай бұрын
Why is that?
@xenon4602
@xenon4602 4 ай бұрын
@@MonsterlessonsAcademy coding style is not up to date and very cluttered, it will be hard to maintain. maybe not everyone is beginner so...
@mehdicharife2335
@mehdicharife2335 9 ай бұрын
Very terrible.
@MonsterlessonsAcademy
@MonsterlessonsAcademy 9 ай бұрын
Why?
@Farouk_exe
@Farouk_exe 7 ай бұрын
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 🙏🏻
Angular 17 Defer - Improve Performance in Your Application
11:27
Monsterlessons Academy
Рет қаралды 8 М.
Angular Firebase Authentication - Implement Auth in Minutes
22:23
Monsterlessons Academy
Рет қаралды 11 М.
Challenge matching picture with Alfredo Larin family! 😁
00:21
BigSchool
Рет қаралды 42 МЛН
SPILLED CHOCKY MILK PRANK ON BROTHER 😂 #shorts
00:12
Savage Vlogs
Рет қаралды 48 МЛН
Doing This Instead Of Studying.. 😳
00:12
Jojo Sim
Рет қаралды 37 МЛН
Session Vs JWT: The Differences You May Not Know!
7:00
ByteByteGo
Рет қаралды 114 М.
Custom Authentication (JSON Web Tokens)
13:03
FlutterFlow
Рет қаралды 16 М.
Angular 17 Features With Examples - You Must Know That
14:44
Monsterlessons Academy
Рет қаралды 38 М.
Learn Angular Signals - The Future of State Management
10:02
Monsterlessons Academy
Рет қаралды 22 М.
NgRx Signal Store - Is It a NgRx Replacement?
20:17
Monsterlessons Academy
Рет қаралды 10 М.
Change Detection in Angular - You Project Is 20x Slower!
15:16
Monsterlessons Academy
Рет қаралды 69 М.
Angular 17 SSR - Angular Server Side Rendering in a New Way
13:54
Monsterlessons Academy
Рет қаралды 31 М.
Challenge matching picture with Alfredo Larin family! 😁
00:21
BigSchool
Рет қаралды 42 МЛН