Implement JWT token in Angular 14| Interceptors in Angular | Guards in Angular | Part 7
HTML-код
- Опубликовано: 19 окт 2024
- Hello Viewers,
This is the sixth part of the complete authentication and authorization in angular 14 + .net 6 project
In this video, we will cover how to implement JWT Token in Angular with Auth guard and Inteceptor. This is a step-by-step video so do follow all the steps.
Upcoming (Part 8): In part 8 will cover the role-based access and display the name from the Token payload
Make sure to Give it a star on Githhub:
github.com/ysh...
github.com/ysh...
Connect with me on the below Social links:
RUclips: / @letsprogram30
Instagram: / lets.program
LinkedIn: / sashikumar-yadav-93b62...
Telegram: t.me/letsprogr...
Twitter: / yshashi30
Important Links used in Video:
Bootstrap: getbootstrap.com/
Fontawesome4: fontawesome.co...
Angular 14 Login and Signup Page | Part 1
• Angular 14 Login and S...
Angular 14 Form Validation| Part 2
• Angular 14 Reactive Fo...
Login & Signup API creation & integration with Angular | Part 3
• Login and Signup using...
Encrypt Password in .NET 6 | Password strength checker in Angular
• Encrypt Password in .N...
Angular News Application
• Angular 14 News Applic...
Crypto Currency Application
• Angular Project - Cryp...
Angular TODO Application
• TODO Application in An...
Angular 13 CRUD using Material UI
• Angular 13 CRUD with A...
Angular QUIZ Application
• Angular 12 Quiz Applic...
Angular Add-to-cart app
• Add to Cart in Angular...
#angular #angularlogin#angularsignup#angularproject #webapi #dotnet #dotnetcore #angulartraining #html #css #bootstrap #password #security #jwt #jwttoken #security #webdevelopment #netcoremvc
![Gunna - HIM ALL ALONG [Official Visualizer]](http://i.ytimg.com/vi/HiCxoDeo0hc/mqdefault.jpg)
Hello Shashi, Thanks for your videos . It really a great contribution for us. I urge u please complete this series and continue make such a knowledgeable content as much as possible. Lot of love and support from us. Keep it up.
tomorrow morning 9:30am IST and this Sunday we will do youtube live to complete the series
you are my best teacher vaia
So much easier approach ❤️❤️❤️
Take love and go ahead inshahallah
Thanks you so much, means a lot❤️
Your videos are great, I'm learning a lot with them, thank you
I’m glad you liked it 🙂
Congratulations for 12k subs and your way to teach people is very easy , compact and knowledgeable and you deliver what they exactly need.
Thanks and go ahead,
Best wishes & regards
Chaudhary Honey Pilania
Thanks man 😌
Nicely explained about interceptors and guards,
Thanks Man!
hi bro. Thank god I found your videos. Thanks for explaining things so clearly.
I’m glad it helped you
Excelente curso, estoy suscrito a tus videos. totalmente satisfecho y la espera de los siguientes videos. saludos desde Lima - Perú
thank you so much, i have a final college projct and this was the part i was the most afraid of but with youre tutorial its was easy!!
Happy to help 😊
Great Learning , Great Teacher
Shashi is cool
Thanks man!
your explanation is too good 😊
Thanks man
Great video. Thanks
very details video !!! you are awesome teacher
Thank you 🙏 🙂
Great tutorial! Thanks for explaining things so clearly. One thing that happened to me when I changed the tokenDescriptor Expires interval in the backend api controller to AddSeconds(10), I got a 500 error. To fix this I changed it to use the UTC time (because of my time zone) - Expires = DateTime.UtcNow.AddSeconds(10).
You can also watch this video for interceptors
Angular http interceptors
ruclips.net/video/cCS4STE-sXo/видео.html
I had the same problem and couldn't solve it until I saw your post....thanks!
sir . i am your big fan sir from bangladesh
Thanks man!
Love from India ❤️
@@letsprogram30 ❤️❤️❤️❤️❤️❤️
Good job bro, keep it up, jai hind
Thank you 😊
great video brother! keep going with good content!
Great Job
Thanks
Best video ever 🤟🤟🤟🤟🤟🤟🤟🤟
Thanks man!
Thanks a lot sir..!!!
You’re welcome 🙂
Thanks very much this is very helpful you made a great job brother
❤️
Super video, muchas gracias ;-)
Thanks man
the best i swear !
Thank you 😊
If you have a problem with 401 error response, even though you did everything right, check if the UseAuthentication() method is above UseAuthorization() in Program.cs. It helped for me :)
Good job🙂
@@letsprogram30 I got 401 error bro. Everything is ok but only this 401 error i got. How to resolve?
@@ganeshpaandurekha have you managed to fix this?
@@ganeshpaandurekha check if the UseAuthentication() method is above UseAuthorization() in Program.cs. It helped for me :)
It helped for me :) too
Hi Shashi, Nice Video. Could you please upload videos for Role based Jwt Authentication
Create User Page | / User Login Page. After logged 1.Admin should have Dashboard, Product, Category, Settings page, 2.Manager have Dashboard, Product, Category page, 3.Reviewer should have Product, Category page Using .NETcore 6 EFCore and Angular 14.
Brother please make a series on Identity server and angular.
Great lesson! But 'CanActivate' is deprecated. I hope you can show me how to solve this problem. thanks
Hi Sashi. Thanks for the helpful video. I am unable to get the usernames in the dashboard page. So far I have followed everything in the video. When I went to the network to investigate, I found my Authorization header with bearer with myToken value as well. But status code still 401 pl help
I also have that same issue. Did you figure it out eventually?
I was also getting the same, As I have gone through Interceptor concept- Interceptor call first url then. I debug the code then understood. I missed return keyword, thats the reason, I was getting undefined and It was not setting the Authorization header and 401 error. Solution:
getToken(){
return sessionStorage.getItem('token');// return keyword is required
}
@@shad4you i tried this too dude, Are u able to help me
Hello Shashi, Thanks for your videos. Waiting for part 8.. when can we expect
The wait is over, tomorrow 9:30am IST
Excellent explanantion i need the code for backned and angular both..for prtacising perspuse
@@MithileshPandey-gb4xw check description
@@letsprogram30 i need the code....
Hi, CanActivate() is depreciated, could you release a refactored version of this video? Thank you, also keep going bro great content
I also not able to use canActivate and it's shows that depreciated, so do you have any idea for that? Please help me!
Search in stack overflow, I also used the same for solution to this problem.
You can use the CanActivate method in the same way, just inject the services using inject() method, and use that to call the authservice methods
Hi shashi, I have angular 16 version in my machine , but that canActivate is not there, how do we implement it in canActivateFn ..?
Good day greetings
you rock
Thanks man!
Hi, can you make video on whole crud api call with behaviour subjects in service file and reuse it in other components and update data in behavior subject in case of edit or delete. You have made that crud app in angular 13 many extend that to use BehaviourSubject.
Tomorrow the part 8 video will be out at 9:30am IST
I have covered about behavior Subject
really need this series completed so can use source code in my project as myself have typed but lots of error so now cant check each line starting from login bootstrap
Hi Shashi
Thank you for the amazing videos(as usual)
Will we be dong the "forgot password" functionality to complete the user login page?
The knowledge I have learnt from creating this project has been exceptional
Tomorrow the part 8 video will be out at 9:30am IST
The forget password will be covered in part 11, after Social Login.
Till that time stay tuned and keep learning! ;)
Thanks sir for explaining things so clearly .
But after every 5sec pop up of subscribe is too frustrating
I’m sorry for the inconvenience, actually this video was recorded during my live session and forget to remove that annoying subscribe popup
@@letsprogram30 Ok sir!
Hi bhaiya! Can I use MongoDb for database rather than SQL??
Yes you can
res.token gives error like Property 'token' does not exist on type 'Object'.
👍
thankss
HI
in isLoggedIn you are just checking if token is present or not. so we can bypass by creating token with random value in localstorage
is any other to validate the token to protect the routes?
Hello,
I have explained the token way just to make understand the basic of auth guard implementation for the beginners.
If you don’t want to use it then create a api in backend which check for permissions or user islogged in our not.
Based on the you can return true or false.
canActivate guard is now depricated , whether it works or not
Greate video indeed but i faced one problem the inceptopr is working fine but now when i login with wrong password the error message is not showing. why is that?
Check for the error in the log and add it to the toast message accordingly
sir when i generated my guard its different from yours maybe its a different version
I am on the newest version of Angular and I cannot get this to work. The authorization parameter is not even getting sent in the Request Headers section of the Network console. Perhaps this is because app.module.ts is not longer included in the newest version. I put the providers in the main.ts file instead, but this did not work. Please help!
DM me on insta let’s fix it together
@@letsprogram30 Thanks! Just sent you a DM.
Hi bro when will you upload the next continuation video
Tomorrow the part 8 video will be out at 9:30am IST
Sorry for kept you'll waiting.
The wait will be worth ;)
Good video but please remove the subscribe popup or make it so it doesnt show up 30 times in a minute
Sorry this video was covered in the live session so not able to remove that popup
how to implement intercepter with HttpInterceptorFn in angular 18 ...
Hello Shashi, I'm getting this error ------Www-Authenticate:
Bearer error="invalid_token", error_description="The signature key was not found"--------- after adding -- `Bearer ${myToken}`.
for me also bro, are u solved it?
I can generate the token and store it in the local storage as well but hen implementing auth guard I can go to the dashboard page can you help me with that?
DM on Instagram with the error
Hi when will you post the next video?
Tomorrow the part 8 video will be out at 9:30am IST
Till that time stay tuned and keep learning! ;)
Can we send the token in the headers without using interceptors
No, I do not believe that is possible.
thank you for this tutorial and continuation
how to fix this error
return throwError(()=> new Error("Some other error occured"))
This is not error, we have to throw error if there is something wrong in the api call
@@letsprogram30 Brother now when wrong password enter the error of wrong login username is not displayed
after adding route the path will not generated in app.routingmodule
i am implementing same code in angular 18 ...but getting excpetion ....local storage is not defined
@@MithileshPandey-gb4xw the reason being you have select SSR during creating new application. And in SSR based application you cannot use window objects. So local storage won’t wrong on the reload of the page
@@letsprogram30 thnaks to reply.....please can you guide me how to relsolve this?
@@MithileshPandey-gb4xw for the time being try to convert your SSR application to CSR.
Hey When i am creating Guards it is giving an error like canActivate is deprecated
This blog might help you to fix it
letsprogram.in/blog/647998365960050b58aca538
Could you please the link to github repo which contains the code of this series?
Will be released after last part of the video
how do i go about it then
My token is not expiring what may be the cause
After using bearer in interceptor.ts file also getting 401 response bro Plzz help 😢😢
DM me on Instagram
Did you get an answer to this? im having the same issue and i dont have instagram...
@@crashie9604 please check tokenhandlerparameters
sir i have a small doubt
i dont understand can you give me the clarity about that
canActivate is deprecated how to use
Will come up with a video soon to showcase the new feature of angular to fix this issue!
21:31 minute sir canactivate deprecated how can i implement this
Make use of functional router guards now you can find a blog on my website blog.letsprogram.in
@@letsprogram30 ok sir
@@letsprogram30 i use this previously but get an error sir
X [ERROR] TS2339: Property 'isLoggedIn' does not exist on type 'AuthService'. [plugin angular-compiler]
bro iam facing 401 error while Authourizing through the token
DM me on Instagram
R u got the solution? . Could you please let me know the solution
I really appreciate the video, but it annoys me that the "subscribe" button just appears every 10 seconds. This made it impossible for me to watch videos for longer than ten minutes. Because I didn't want to be distracted by such things in later videos, I decided not to subscribe as a result. Although I can see the marketing strategy, it would be better if it appeared every ten or so minutes. Cheers.
Noted,
Thanks for the feedback 🙂
how to secure JWT Tokens?
Secure means?
Hi bro, you show very often button "Subscribed", it`s not good...)
I’m sorry, actually this video was created during a live session and not able to edit that footer of subscribe.
Sorry for inconvenience
Please remove that subscribe popup on the video. its very irritating, and also i am not able to see the video clearly
Yes same irritation
You`ve added too much subscribe notifications...
Sorry about that, this video was part of a live stream. I have made sure not to do such popup thing again!
Thanks for understanding!
Ur request to subscribe is annoying like anything!!!
Can u pls remove it from..
Keep it at the beginning, end, or may once/twice in middle…but it’s coming like anything in middle of the video
Sorry for the inconvenience bro, I have removed it from other videos
Like & subscribe is blocking the tutorial content,
I’m so sorry for the inconvenience
Right now more things happened with ai in 😢Jan 2024
Yes I agree, we can use it to save our most of the time 😊 But make sure to understand what we are getting from the AI. I will never recommend doing direct copy and paste. If you know the concept then there is no harm in using AI
Cheers 🥂
bro stop showing that popup all the time
Sorry!
thank you sir, i was wondering how to attach stuff to request header without having to modify all the REST request in my service file, your Interceptors solve everythings, great work sir
Thank you 😊
But 'CanActivate' is deprecated. What can i do that time ?
Use the same logic but wrap it inside a functional router guard
Please remove that subscribe popup on the video. its very irritating, and also i am not able to see the video clearly