how to use JWT token in Angular 17

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

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

50% 1

🌟 Exclusive Hosting Deal from Hostinger 🌟
Ready to launch your own website? Use my affiliate link to get an exclusive discount on Hostinger's reliable and high-performance hosting plans: www.hostg.xyz/SHEyO
Hostinger offers:
- Easy-to-use control panel
- 24/7 customer support
- 30-day money-back guarantee
- And more!
Don't miss out on this amazing offer. Click the link above to get started today! 🚀
=====================
In this video tutorial, I demonstrated setting up JWT authentication in Angular 17, securing routes with guards, managing token expiration, and implementing a strategy to automatically refresh tokens. The tutorial covered aspects like understanding JWT, setting up the Angular project, creating an authentication service, managing tokens, using HTTP interceptors, protecting routes with guards, and handling token expiration.
Source Code: github.com/ayyazzafar/angular...
=====================
Chapters:
=====================
00:00:00 - Introduction to JWT Tokens
00:01:30 - Setting up Angular 17 Project
00:03:30 - Creating Authentication Service
00:05:10 - Implementing JWT Authentication
00:07:30 - Protecting Routes with Guards
00:11:30 - Handling Token Expiration
#JWTAuthentication #Angular17 #TokenExpiration
=====================
Related Videos:
=====================
🔒 How to use RapidAPI in Angular 17?: • How to use RapidAPI in...
🔐 How to decode JWT token in Angular 17?: • How to decode JWT toke...
🔑 How to use @if condition in Angular 17?: • how to use @if conditi...
🔐 How to handle JWT token expiration in Angular 17?: • How to handle JWT toke...
🔒 How to use Http Interceptor in Angular 17: • How to use Http Interc...
🔑 How to use ViewChild in Angular 17?: • How to use ViewChild i...
🔒 How to use Bootstrap modal in Angular 17?: • How to use Bootstrap m...
🔑 How to use mat-icon in Angular 17?: • How to use mat-icon in...
🔐 How to use EventEmitter in Angular 17?: • How to use EventEmitte...
🔒 How to use Animate.css in Angular 17?: • how to use Animate.css...
🔑 How to use Bootstrap dropdown in Angular 17?: • How to use Bootstrap d...
🔒 How to use ngOnDestroy in Angular 17?: • How to use ngOnDestroy...
🔑 How to use ngClass in Angular 17 with a conditional statement?: • How to use ngClass in ...
🔒 How to use FormsModule in Angular 17?: • Video
🔑 How to use Output in Angular 17?: • Video
🔒 How to use ViewChild in Angular 17?: • How to use ViewChild i...
🔐 How to use Bootstrap 5 navbar in Angular 17?: • How to use Bootstrap 5...
🔑 How to use ngOnInit in Angular 17?: • How to use ngOnInit in...
🔐 How to use Hide in Angular 17?: • How to hide div in Ang...
=====================
To read written versions of AyyazTech tutorials, please visit AyyazTech.com
=============
If you want more content like this then please subscribe to my channel and click on the bell icon to get all of the notifications.
/ @ayyaztech

Наука

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

16 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Thank you for this tutorial!

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

Thank you so much for your kind words! I'm really glad you found the information helpful. If you have any more questions or there's another topic you're curious about, feel free to ask. We're here to help and share knowledge that makes technology more accessible and easier to understand. Remember to subscribe to the AyyazTech channel for more updates and tips. Your support helps us keep creating content that matters to you. Like, share, and comment on our videos to keep the conversation going. Happy coding, and we look forward to hearing from you again!

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

Thanks. Simple and works. Just what I need!

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

Love you bro, the way you are covering the advanced topics thats. Amazing, and great explanation with full and from the startch video ❤

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

Thank you so much for the love and support! It means a lot to us at AyyazTech that you're finding value in our coverage of advanced topics. Our goal is always to deliver clear, comprehensive explanations that can take you from the basics to a deep understanding of complex concepts, all "from scratch." Hearing that our videos resonate with you truly inspires us to keep creating content that meets your needs and exceeds your expectations. If there are any other advanced topics or specific areas you're interested in, please don't hesitate to let us know. We're here to help you on your learning journey! Remember to subscribe if you haven't yet, like the videos that have helped you, share them to spread the knowledge, and hit the bell icon to stay updated on all our latest content. Your engagement helps us grow and continue delivering the quality content you love.

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

Thanks for this tutorial very well explained and appreciate your efforts.

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

Thank you so much for your kind words! I'm thrilled to hear that you found the tutorial well-explained and helpful. It's always rewarding to know that my efforts are appreciated and making a positive impact. Your feedback means a lot and motivates me to continue creating valuable content. If there are any other topics you'd like me to cover in future tutorials, feel free to let me know. Happy coding!

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

Thank you, was a very nice tutorial!

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

I'm thrilled to hear that the tutorial helped you out! It's always a pleasure to provide valuable solutions to fellow developers like you. Your appreciation means a lot to me and fuels my passion to create more content that makes a difference. If you enjoyed this video, smash that like button and consider subscribing for more Angular goodness! Feel free to explore ayyaztech.com for in-depth articles and tutorials on Angular and web development. Thanks again for your kind words. Keep coding and stay awesome!

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

Excellent, thank you for your time and efforts 👏👏

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

Thank you so much for your kind words! I'm glad you found the video helpful. 😊👏👏 Don't forget to subscribe to the channel, like the video, share it, and click the bell icon to get notified about new content. You might also find these videos useful: How to Validate Checkbox Selection in Angular 17? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9n-eURu-P0s.html How to Create REST API in Node.js? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X-z2WMKG0Xs.html Angular Lifecycle Hooks: The Ultimate Beginner's Guide ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ecBq6y1R2qk.html Check out these related articles on our blog as well: How to Validate Checkbox Selection in Angular 17 Using Standalone Components www.ayyaztech.com/blog/how-to-validate-checkbox-selection-in-angular-17-using-standalone-components Creating Your First Chatbot with LangChain and OpenAI: A Step-by-Step Tutorial www.ayyaztech.com/blog/creating-your-first-chatbot-with-langchain-and-openai-a-step-by-step-tutorial Thanks again for your support! 🚀

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

To my mind, using navigate inside guards is kinda bad practice. Guards run while navigation is happening. If you call navigate again, you're forcing the route to abort navigation and start a new one. Instead, I'd consider returning an UrlTree here

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

Thanks bro, now validate isPlatformBrowser in AuthService when call isLoggedIn because localStorage is not not defined.

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

Thanks for the great suggestion! I'll make sure to validate `isPlatformBrowser` in the `AuthService` when calling `isLoggedIn` to handle the `localStorage` not being defined in non-browser environments. Appreciate your input!

@ManishaL-sn8eo 2 месяца назад

Also, how do you auto refresh the token, before it expires? How do you keep checking if the token is about to expire, so that we can refresh it?

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

great video, I had a small issue with the refresh token giving me 400 BAD Request

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

Thank you for your comment! I'm glad you found the video helpful. Regarding the 400 BAD Request error you encountered when using the refresh token, there could be a few reasons for this: 1. Make sure that you are sending the correct refresh token in the request. In the video, we stored both the access token and refresh token in the local storage as a stringified JSON object. When making the refresh token request, ensure that you are extracting the refresh token correctly from the stored object and including it in the request payload. 2. Verify that the refresh token endpoint in your backend is expecting the refresh token in the correct format. The backend should be able to accept the refresh token and validate it to generate a new access token. 3. Double-check that the refresh token hasn't expired. Refresh tokens typically have a longer expiration time compared to access tokens, but they can still expire. If the refresh token has expired, you may need to handle this scenario by redirecting the user to the login page to re-authenticate. 4. Ensure that the backend server is configured to handle CORS (Cross-Origin Resource Sharing) correctly. If the Angular application and the backend server are running on different domains or ports, you need to configure CORS on the server-side to allow requests from the Angular application's origin. If you have checked these points and are still encountering the 400 BAD Request error, please provide more details about your specific implementation, including the relevant code snippets and the error message you are receiving. This will help me better understand the issue and provide more targeted assistance. Let me know if you have any further questions or need additional help!

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

Sir. Could you make some tutorial about JWT Auth with HTTP Only Cookies.

@urm0m 18 дней назад

Hey there! AMAZING tutorial but i have a problem. With your source code the profile API responds with 401 Unauthorized. Can you check it out please?

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

Thank you ayaz bhai, I like it advanced video. Just one suggestion brother, the video going little bit fast & facing difficulty to catch your speed..

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

Thank you for your valuable feedback and for enjoying the advanced video! I'll definitely take note of your suggestion regarding the pace. It's important to me that my content is accessible and easy to follow for everyone. I’ll aim to balance depth with clarity and speed in future videos. Remember, you can always pause or replay sections that are tricky to catch on the first go. Also, consider enabling subtitles for an extra layer of guidance. If there are specific topics or concepts you'd like me to revisit more slowly, don't hesitate to let me know. Your input helps me improve and tailor my content to meet your needs. Don't forget to subscribe, like, and hit the bell icon for updates. Keep the suggestions coming, and thank you for being part of my community!

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

do you have something to connect restful login api to angular 17

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

Sure! I have a tutorial that covers integrating a RESTful login API with Angular 17. It demonstrates how to create an authentication service, make HTTP requests to the login API, handle the response, and store the authentication token securely. The tutorial also covers route protection and token expiration handling. You can find the tutorial on my channel. Let me know if you have any specific questions while following along!

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

@@AyyazTech Thank you that's great! where can I see it so I can compare my project

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

@@AyyazTech I cant find it can you send me the link sir?

@o.abdelaaziz 5 месяцев назад

Thanks sir... i just want to ask you about the seggation code when you writing is that gitcopilot if yes how did you add it to vs code is it free ?

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

Yes, you're correct! The suggestions you saw are powered by GitHub Copilot, which indeed works as an AI pair programmer by offering code suggestions and completions. To add GitHub Copilot to Visual Studio Code, you simply install it as an extension from the Visual Studio Code Marketplace. While GitHub Copilot is a paid service, But I guess GitHub does offer a trial period so you can experience its capabilities before committing to a subscription. It's an incredibly helpful tool for boosting productivity and streamlining the coding process. If you're interested in trying it out, check the VS Code Marketplace or GitHub's official site for more details. And don't forget, for more helpful tips and tutorials, make sure to subscribe and hit the bell icon for notifications!

@o.abdelaaziz 5 месяцев назад

@@AyyazTech thanks a lot 🙏

@user-dy4vw4cm2p 3 месяца назад

thanks for this tutorial .. but when i typing localhost:4200/home after logout then the page is not showing anything.. it turns white and in console, ERROR Error: NG04002: Cannot match any routes. URL Segment: 'home' at Recognizer.noMatchError (router.mjs:3687:12) at router.mjs:3720:20 at catchError.js:10:39 at OperatorSubscriber2._this._error (OperatorSubscriber.js:25:21) at Subscriber2.error (Subscriber.js:43:18) at Subscriber2._error (Subscriber.js:67:30) at Subscriber2.error (Subscriber.js:43:18) at Subscriber2._error (Subscriber.js:67:30) at Subscriber2.error (Subscriber.js:43:18) at Subscriber2._error (Subscriber.js:67:30) is showing.. please sir give me some idea how to fix it .

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

Apologies for the inconvenience you're facing. It seems like there might be an issue with the routing configuration in your Angular application. Let me provide a possible solution to fix the error you're encountering. When you navigate to `localhost:4200/home` after logging out, the router is trying to match the `/home` route but fails to find a corresponding route definition, resulting in the "Cannot match any routes" error. To resolve this, ensure that you have properly defined the `/home` route in your routing configuration. Here's an example of how you can define the route: ```typescript const routes: Routes = [ // ... { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, // ... ]; ``` In this example, we define a route with the path `'home'` that maps to the `HomeComponent`. The `canActivate` property is used to specify the `AuthGuard`, which protects the route and ensures that only authenticated users can access it. Make sure that you have imported and configured the necessary components and guards in your routing module. Additionally, verify that you have correctly set up the `AuthGuard` to handle the authentication state. The guard should check if the user is authenticated and allow access to the `/home` route only if the user is logged in. If the user is not authenticated, the guard should redirect them to the login page. Here's an example of how the `AuthGuard` can be implemented: ```typescript @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate(): boolean { if (this.authService.isLoggedIn()) { return true; } else { this.router.navigate(['/login']); return false; } } } ``` In this example, the `AuthGuard` checks if the user is logged in using the `isLoggedIn()` method from the `AuthService`. If the user is authenticated, it returns `true`, allowing access to the route. If the user is not authenticated, it redirects them to the login page using `this.router.navigate(['/login'])` and returns `false`. Make sure that your `AuthService` correctly handles the login state and provides the `isLoggedIn()` method to check the authentication status. By properly configuring the routes, implementing the `AuthGuard`, and ensuring that the `AuthService` handles the authentication state correctly, you should be able to resolve the "Cannot match any routes" error and properly protect the `/home` route. If you still face issues, please provide more details about your specific implementation, including the relevant code snippets, so I can better assist you.