Related Posts


30 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.Zone.run @ 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.Zone.run @ zone.js:138
    push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ 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.SafeSubscriber.next @ Subscriber.js:134
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
    push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ 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?

        Regards,
        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 🙂

          Regards,
          grokonez.

          1. Where are the css of all the component pages as per the ui look and feel shown in this blog as I am done with entire full stack as per this blog but page styles are very rough.

  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,
    Bane

  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

    1. Hello,

      Did you find any solution ?
      I am facing the same problem. I am not sure that my AuthInterceptor is injected anywhere.
      Thus, all my requests’ headers are empty.

      If anyone has the solution, that would be awesome to share it with us.

      Peace.

    2. Okay sorry, I didn’t insert the httpInterceptorProviders in my app.module.ts file :


      import { httpInterceptorProviders } from ‘…’;

      providers: […, httpInterceptorProviders],

  7. Hello,
    I have the same error that Everton had;
    In my session storage only token is defiend but username an authorities are not.
    So, the getToken() method does not work !
    Can I get some help please ?

  8. what you need is, you have to include node module in your directory of project. Need to run? send me an email, I will send you the required file

  9. I just have a doubt, after I authorize the user I want to take him to a feedback page I already have a feedback front-end and back-end but I don’t know how to let the user enter the feedback page after the authorization.
    I hope you can help me or just show me some references

  10. Hello sir,
    I am facing this problem at client side when signin..what is the problem?
    ERROR SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse at TokenStorageService.getAuthorities
    can i get some help?

    1. Hello
      I change “accessToken” to “token” in class “JwtResponse”. After that everything was work correctly.

      Regards
      Aklikan

Got Something To Say:

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

*