34 thoughts to “Angular 12 Login and Registration example with JWT & Web Api”

  1. Thank you for your tutorials

    I have a little bit of a different setup

    I am displaying the application based on someone already authenticated (from a different app, then routed to my application). I am consuming a token and displaying an appropriate page based on their credentials

    If possible could you show how to consume this token and display a admin page or user type page?

    Thank you in advance

  2. Hello Bezcoder,
    I have tried your tutorial on my application for my schoolproject I thank you for that, it’s work but now I can’t get my API Rest it’s answer :
    Access to XMLHttpRequest at ‘http://localhost:8080/tournaments/1’ 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.
    I would like to know how can I resolve it please.

    it’ s the same for method post and put.
    but I just can get a list of tournaments at ‘http://localhost:8080/tournaments’

    Thank’s for all,
    Ludovic, a french student.

    1. Hi, you need to run your Angular client at port 8081 for passing CORS policy.
      The command is: ng serve --port 8081.

  3. hi bezkoder,
    i am using your angular 12 nodejs mysql authentication basic code , that is very help full to start application. can you little help me to manage session. Actually when i open application in new tab then user logout. I want to keep login when user open link in new tab. That will help me lot.

  4. I have my site already on heroku, and everything is working good, but i need to show or display just some buttons if the user is logged and has ROLE_ADMIN, what can i do?

  5. Hi!:)

    I have tried this but if i try to post something to the server from the angular app, it is telling me that there I have no authorization(while logged with admin/user).
    On postman, it works with the roles. Thanks!

    1. Hi, kindly make sure that you use the correct Header (Bearer Token for Spring Boot back-end / x-access-token for Node.js back-end).

  6. Hi bezkoder,

    I had a small doubt. What if take ‘role’ as an input in Sign Up along with username, email and password? How will the code change? I am working on a project with 3 use cases, user, data provider and admin. I wanted to add role as an input element in Sign up to ask the user to choose between ”ROLE_USER” and “ROLE_DATAPROVIDER”

  7. Hi Bezkoder

    Thank you for the great tutorials, I have this working perfectly. I have a question, now that I have the three different levels of access (which is exactly what I want) how do I add content to each of their boards.

    For example I have the user who can only view the content, the moderator can action the content and the admin can change update and delete the content. I am looking at your CRUD tutorial but I don’t understand how to add that to the existing app

    This is all connected to the same tables in the mysql database.

    How do I go about that?

    Many Thanks

  8. Hi, thank you for your tutorial, i want to ask again. Why is it different when i add bootstrapcdn to index.html and when i npm install bootstrap? The differences in the navbar and in the vertical spaces between component (button)

  9. in case you are trying this with Angula 13, you need to change the validations from

  10. Great work! Looks very nice.

    I have one question. When I start this project locally, I get the response Signup failed after the registration. Do you know this error?

    1. Hi, you can check which backend server you used first.
      Then make sure that you have roles table/collection in the database.

      1. Are the roles tables necessary for this to work? I thought it’s just some fruity thing that I can just skip and not do.

  11. Nice! Good tutorial, thanks for your work on it.
    Had to make a couple changes in login/register.component.html files to resolve syntax errors:
    I’m using Angular 13 so this is probably what @giraldiego is referring to

  12. Hi! Great tutorial, I got to learn very clearly about new concepts
    Unfortunately I have an error that i cannot solve, I was hoping you could help me. When compiling and running the “ng serve” I get from login and register pages this error:
    “error NG8003: No directive found with exportAs ‘ngModel’. – #username=”ngModel”> ”

    I check within app.modules.ts and the import is there. I tried the documentation of Angular but could not fix it either. If you could help it would be amazing.

Leave a Reply

Your email address will not be published. Required fields are marked *