30 thoughts to “Angular 11 JWT Authentication example with Web Api”

  1. im new to angular and i wanna know somethings, lets say i added a drop list for roles in my front and i couldnt get the value correctly in my back, could you help with it

  2. when i run the application i can’t have anything , i can’t see what is the problem

  3. Hi Bezkoder, first of all, thanks for this awesome tutorial, your tutorials have been helping me a lot!

    But i have a question for this one, when I try to create a user with a username that is already registered, the message sended by the server is displayed in the screen (working fine like in the tutorial), but I got a console log in the browser with code 400.

    Is this supposed to happen? I know that the api will return this unauthorized code because I can’t create two users with the same username, but how can I handle it in the client?

  4. I want to develop token refresh declaration on Angular, how should I do it instead, can admin help me?

  5. Hi Bezkoder,

    First of all, thank you for you tutorial !

    I only encountered one issue after making some changes.
    I solved it but I can’t tell why it didn’t work anymore. Have you got any idea where it might came from ?
    This occurred during the login stage, I had to change this line in login.component.ts :
    FROM :
    this.tokenStorage.saveToken(data.accessToken);
    TO :
    this.tokenStorage.saveToken(data.token);

    Thank you!

    1. Hi, you can check the HTTP response data, you may change the field accessToken to token. The backend that I used returns accessToken instead of token.

  6. I changed the TOKEN_HEADER_KEY from “Authorization” to “x-access-token”.
    I also changed this line of code in auth.interceptor.ts:
    FROM:
    authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, ‘Bearer ‘ + token) });

    TO:
    authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });

  7. Hi bezkoder! your tutorial is awesome.
    I just want to know what I did wrong in the board component such as (board-admin, board-user, board-moderator). It seems that every time I go to that routes it says “No token provided!”.
    By the way I am using nodejs express mongoDB as my backend.
    Thank you in advance.

    1. Hi, you need to change some code in interceptor to make this work with x-access-token header instead of Authorization header 🙂

      1. I already resolve my issue.
        I moved this line of code “provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true” to app-module.ts and now its work.
        Thank you!

  8. hey! First of all thank you very much for your work!

    I am currently running the angular 11 frontend on a nodejs express mongoDB api from the backend tutorials as well, and I have two big issues:

    First of all i dont seem to be able to alter the styles of the site using any of the .css files, as the changes will simply be ignored when trying to, for example, change the navbar color

    Then, after following the integration tutorial to run both projects on the same localhost, i get the error: localhost/:1 Refused to apply style from ‘http://localhost:3000/styles.3ff695c00d717f2d2a11.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

    I am running the project on port 3000.

    Thank you beforehand for your time, it’d be awesome if you could help me!

  9. Hello again. Can you help me with a question?

    What happens is that without being logged in and I enter the profile, user, admin, I can enter without problems, how can I do so that it only shows when the admin is logged in, only he can enter the admin route?

  10. Thank you very much for this great tutorial, I’ve been looking for something like this for a long time.

    How are Roles assigned?
    I have entered 3 users with the username Admin, Moderator and User and the 3 remain as users

      1. Sorry, but I can’t find where the backend tutorials you are talking about are

  11. First of all, really great and in detail tutorial, but I have 1 question:

    What does ‘f’ mean in the context of ‘f.submitted’, also in ‘f.form’, where does this come from?

    Thanks!

    1. It’s a template reference variable, that was declared a couple lines before like this:

      Both .submitted and .form are properties of ngForm.

    2. I just realized the codesnipped probably won’t show up properly, it’s (hashtag)f = “ngForm”, it’s line 12 in login component html.

  12. I got an error on auth.interceptors.ts. it was telling me that HttpRequest and the Observable required 1 type argument so I just put any.

    1. there is an error in rendering code at this page. Note the correct return type of intercept method at github
      Observable<HttpEvent>

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