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

  1. after creating the backend (Spring Boot Login and Registration example with MongoDB) im facing problems to get the jwt tokken and i found out that i have to modify using Local Storage to Cookies … and i have no idea how to apply this modifications can anyone help me

    thank you for your effort !!!!!!

  2. Hi , i want to be able to add the role for user when i do signup , because i will have the admin creating accounts so i want him to assign role , when i put an input for role it doesn’t work , can you please provide a solution that works for this ? thanks for the great tutorial by the way !

  3. when i run the backend and frontend , the localhost is white and i inspect it i got this:
    main.ts:12 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (common.mjs:391:19)
    at Object.provideLocationStrategy [as useFactory] (router.mjs:5899:9)
    at Object.factory (core.mjs:11526:1)
    at R3Injector.hydrate (core.mjs:11435:1)
    at R3Injector.get (core.mjs:11251:1)
    at injectInjectorOnly (core.mjs:4741:1)
    at Module.ɵɵinject (core.mjs:4745:1)
    at Object.Location_Factory [as factory] (common.mjs:770:1)
    at R3Injector.hydrate (core.mjs:11435:1)
    at R3Injector.get (core.mjs:11251:1)

    can someone help me?

  4. 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.
    Thanks

  5. 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:
    password.errors[‘required’]
    I’m using Angular 13 so this is probably what @giraldiego is referring to

  6. 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.

  7. in case you are trying this with Angula 13, you need to change the validations from
    *ngIf="password.errors?.required"
    to
    *ngIf="password.errors?.['required']"

  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. 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

    1. Hi, you need to run the backend server first, then run this Angular client with port 8081.

  10. 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”

    1. Hi , did you figure it out ? i’m currently stuck at the same problem and i don’t seem to find an appropriate solution for it ? kindly answer me if u have found a solution for this , thanks !

  11. 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).

  12. 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?

    1. You can get the user details from LocalStorage or SessionStorage depend on what are you using and there you have also roles (you know the structure of it) – this is made by token-storage service.
      Then you can call this service by a method in your component ts file and in html file you can user *ngIf=”isAdminLogged()” and that element will be shown only is this method return true

  13. 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.
    Thanks

  14. 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.

  15. 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
    Rob

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