33 thoughts to “Angular 10 JWT Authentication example with Web Api”

  1. Hi, thanks for this fantastic guide!

    I have a problem, I can’t keep the session once the page is closed and i can’t find how to do it, can you help me?

  2. Please give us a little crud ANGULAR 12 tutorial with data calls from a REST API secured with JWT token

    just the CRUD party

  3. You really make it seem so easy with your presentation. I’m looking forward for your next tutorial. Thanks!

  4. I intended to write you this very small word to be able to say thank you once again for these tutorials.
    They help me a lot!

  5. Thank you so much over again on the pleasing principles you’ve shown in this tutorial.

  6. Pretty! This has been a really wonderful post.

    Thanks for providing this tutorial.

  7. Hi , in auth.interceptor.ts, I used front-end app for Node.js Express back-end method so i changed as “const TOKEN_HEADER_KEY = ‘x-access-token’;” but in this line “intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> ” HttpRequest is not taking error in build coming. Thanks

  8. The API Backend was just powerful and succinct. Nice tutorial.

    Thank you for the information and knowledge sharing.

  9. Thank you for this nice tut !!!
    It work, but i have a Token error …
    I use you NodeJs + Mongo + Express code for the backend, and i don’t find in this front end angular application where put the same «secret» value like in auth.config.js in the server side …

  10. first, I would like to thank you for this wonderful work and my question is why you didn’t implement the guard service on it.
    thanks a lot, sir and have a good day.

  11. I Bezccoder. I based on your code and did a similar application. I have created a select which permit the user to choose his role (User or Seller). This don’t work! When i created a new account, the backend set him a user role. how can i do to chane this ( to send differernt role from user to the backend)

    1. Hi, you can add an input element to the register form that sends signup data including roles array.

  12. hello when I try to register it tells me that the registration has failed. I guess my frontend is not communicating properly with mysql. help please

  13. Thank you very much.
    Maybe you can help with the following error:
    Access to XMLHttpRequest at ‘http://localhost:8080/auth/signin’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
    login.component.ts:64

    error = {“headers”:{“normalizedNames”:{},”lazyUpdate”:null,”headers”:{}},”status”:0,”statusText”:”Unknown Error”,”url”:”http://localhost:8080/auth/signin”,”ok”:false,”name”:”HttpErrorResponse”,”message”:”Http failure response for http://localhost:8080/auth/signin: 0 Unknown Error”,”error”:
    {“isTrusted”:true}}

    I add the configure method as you did and also the “@CrossOrigin(origins = “http://localhost:4200″, maxAge = 3600)” in the controller

    1. Hi, please run command: ng serve -- port 8081.

      It is because the server only accept resource access from port 8081 (cors)

  14. c.s.demo.security.jwt.AuthEntryPointJwt : Unauthorized error: Full authentication is required to access this resource

    I kept getting this error when I try to access Admin/Mod/User dashboard. Please help.

    1. Hi, which backend server did you use? Please make sure that you configure correct Authorizarion/x-access-token header.

  15. Hi, thankyou for the tutorial. I want to ask why I cannot navigate to login, signup page and etc? I only get to stay at the home page. Please help.

  16. Dear Bezkoder,

    Thank you very much for your great tutorials!

    I am jsut having one problem, when looking in DevTools in Chrome, -> Application
    I always see Key: auth-user Value: {“token”:”eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbjEiLCJpYXQiOjE1OTgzODUzNzEsImV4cCI6MTU5ODQzMTk1N30.5kN0GlEhzJXqc_3nm-C1OXDHd79jXNl47WxIAo8oUefp4FkoG8Qe9J3gEsbniYQLyn7udfo5u2eoNXB3Ye9r0g”,”type”:”Bearer”,”id”:5,”username”:”admin1″,”email”:”[email protected]”,”roles”:[“USER”]}

    but Key: auth-token Value: undefined

    Do you have an idea how to solve this one?

    Thank you very much in advance
    stay safe and healthy

  17. Hey there is a one Bug. In backend tutorial we defined a payload JwtResponse withe a field “token” but here we are expecting it as accessToken.

    1. Hi, please notice the getter methods in JwtResponse class. It indicates which fields showing in the HTTP responses 🙂

    1. Hi, you can write API for updating roles first (with checking Admin role). Then add UI in Admin Board that helps to update users’ role.

Comments are closed to reduce spam. If you have any question, please send me an email.