how to use JWT token in Angular 17

[@vrb199]

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

[@AyyazTech]

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]

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

[@AyyazTech]

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]

Thank you, was a very nice tutorial!

[@AyyazTech]

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!

[@Latif127]

I like your approach, it’d be very helpful.

[@dimitridovgan6364]

Thank you for this tutorial!

[@AyyazTech]

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!

[@ManishaL-sn8eo]

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?

[@tajstudentilhomjon757]

you can check it for every request via interceptor like user logged in but the token expired go refresh token then send the base request

[@Martin56754]

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

[@AyyazTech]

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!

[@urm0m]

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]

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]

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!

[@mykolamykhaliuk]

Thanks. Simple and works. Just what I need!

[@zakariadil22]

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

[@AyyazTech]

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.

[@ksknysn]

i heard that intercept is not required anymore? am i wrong?

[@AyyazTech]

Great question! 😊 As of now, interceptors are still commonly used in Angular to handle tasks like attaching JWT tokens to HTTP requests. However, there might be some upcoming changes or alternative patterns emerging in newer Angular versions. If you’re looking to stay updated with the latest in Angular or explore other related topics, here are a few videos and articles you might find helpful: - How to Handle Authentication in Angular with JWT kzbin.info/www/bejne/p2qXeHyBgdKDeKs - Angular 17: What's New and Exciting? kzbin.info/www/bejne/jJ2zkHiXn7ygnbs Also, check out this blog post for more details: - Using JWT Tokens in Angular: Best Practices www.ayyaztech.com/blog/jwt-tokens-angular Make sure to subscribe for future updates and tutorials! 🔔 😊

[@advance5189]

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

[@Whatdahail]

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

[@AyyazTech]

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]

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

[@Whatdahail]

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

[@o.abdelaaziz]

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]

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]

@@AyyazTech thanks a lot 🙏

[@rathan235]

Good job; like / /

[@AyyazTech]

Thanks! Let me know if you have any questions. 😊

[@SuparnaBhowal-o7g]

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]

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.