Related Posts

12 thoughts on “Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack – Part 3: Build Frontend”

  1. Please help me, I am days trying to find the solution to this error I am from Brazil and my name is Everton:
    I did not compreeend some post that I used to try to solve it, and I am using this project as a basis to develop login in my company (home oficce).
    Kindness, help me …

    HomeComponent_Host.ngfactory.js? [sm]:1 ERROR SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse ()
    at TokenStorageService.push../src/app/auth/token-storage.service.ts.TokenStorageService.getAuthorities (token-storage.service.ts:45)
    at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngOnInit (home.component.ts:19)
    at checkAndUpdateDirectiveInline (core.js:18620)
    at checkAndUpdateNodeInline (core.js:19884)
    at checkAndUpdateNode (core.js:19846)
    at debugCheckAndUpdateNode (core.js:20480)
    at debugCheckDirectivesFn (core.js:20440)
    at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432)
    View_HomeComponent_Host_0 @ HomeComponent_Host.ngfactory.js? [sm]:1
    proxyClass @ compiler.js:17129
    push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:20684
    push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:12632
    (anonymous) @ core.js:14878
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
    push../node_modules/zone.js/dist/ @ zone.js:138
    push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:14102
    push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:14878
    (anonymous) @ core.js:14762
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
    onInvoke @ core.js:14143
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
    push../node_modules/zone.js/dist/ @ zone.js:138
    push../node_modules/@angular/core/fesm5/ @ core.js:14057
    next @ core.js:14762
    schedulerFn @ core.js:10238
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
    push../node_modules/rxjs/_esm5/internal/ @ Subscriber.js:134
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
    push../node_modules/rxjs/_esm5/internal/ @ Subscriber.js:54
    push../node_modules/rxjs/_esm5/internal/ @ Subject.js:47
    push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:10222
    checkStable @ core.js:14112
    onHasTask @ core.js:14156
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
    push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
    drainMicroTaskQueue @ zone.js:595
    push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
    invokeTask @ zone.js:1540
    globalZoneAwareCallback @ zone.js:1566
    HomeComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

        1. It worked!!
          I can not figure out why, I installed and loaded a few times I used forums and nobody could get it all uninstalled again I downloaded the file and installed and started to work.
          Nice work, thank you. 🙂

  2. Hi,

    I don’t see the role filed in registration form ?! And when I tried to save a new user, it gaves me user role by default!! could u explain please? thanks

      1. Hi Grokonez,

        In backend everything is clear for me, but I have question about angular. What should I do to change role of registering user in form of registration. I dont want that user who is registating have default ‘user’. Can you explain, please, how I can send from angular to spring data of user with role that I can choose manualy, for example: “admin” and “user” and in database was saved user with choosen role. I have idea that I can write registration for all kind of users seperatly. It is a good idea, good practice? I dont think so. Can you help me with it?

        Oleksandr Turchanovskyi

        1. Hi Oleksandr Turchanovskyi,

          You can make a page that only Admin can access (e.g: Admin Board) to set authority (PM, User,… ) for other users 🙂


  3. hi, why in login form and register form use #username=”ngModel” not #username=”ngForm”. Because when that code in my IDE it can not find username.errors.required when use ngModel but when i change to ngForm it available. I use webstorm

  4. Hello,
    Thank you for your tutorial.
    The only problem I have is that the JWT token does not expire. I am logged as long as I click ‘logout’. I think expiration is not working properly on t he frontend part. Or am I missing somethink?

  5. Hi,
    Thank you for the tutorial. It provided me a good intro in Angular and Token based authentication. Implementing your example exposed a security flow, I am trying to fix right now. TokenStorageService is using session storage to store the token. This is not a good practice since it leaves solution vulnerable to cross-site scripting (XSS) attacks. More info about the issue can be found here: vulnerable to cross-site scripting (XSS) attacks.

    It would be great if you could propose a fix for this issue. Thank you for the great tutorial non the less.

    Kind regards,

  6. Hi Sir, I am facing problem in client side while Intercepting header request with Angular 7 code, when I am page loading then Authorization request header is not showing in network portion, please help

Got Something To Say:

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