Angular4 Token Auth making 'auth/validate' call

Question

I'm trying to get Angular2 Token Auth module to work but having a continuous '401' error on first load.

I have gotten the auth/registration/login to work, however on a fresh reload -every- time someone is not logged in, they get a 401 Error.

Watching the Network log I see that for some reason it makes 2 validate_token calls, but no token should exist. The first one succeeds with a 200 response - But the 2nd fails with a 401. I've compared both and the only difference I see is that the 2nd doesn't have content-type header.

My entire service is pretty generic

import { Injectable } from '@angular/core';
import {Angular2TokenService} from "angular2-token";
import {Subject, Observable} from "rxjs";
import {Response} from "@angular/http";

@Injectable()
export class AuthService {

  userSignedIn$:Subject<boolean> = new Subject();

  constructor(public authService:Angular2TokenService) {

    this.authService.validateToken().subscribe(
      res => res.status == 200 ? this.userSignedIn$.next(res.json().success) : this.userSignedIn$.next(false)
    )
  }

  logOutUser():Observable<Response>{

    return this.authService.signOut().map(
      res => {
        this.userSignedIn$.next(false);
        return res;
      }
    );
  }

  registerUser(signUpData:  {email:string, password:string, passwordConfirmation:string}):Observable<Response>{
    return this.authService.registerAccount(signUpData).map(
      res => {
        this.userSignedIn$.next(true);
        return res
      }
    );
  }

  logInUser(signInData: {email:string, password:string}):Observable<Response>{

    return this.authService.signIn(signInData).map(
      res => {
        this.userSignedIn$.next(true);
        return res
      }
    );

  }

}

I believe there is something in Angular2-Token that I do not know about that is causing this but I'm unsure. I've checked the back-end and it has no record of any request coming through.

Failed Request

GET /auth/validate_token HTTP/1.1 Host: baseUrl Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: application/json Origin: http://localhost:4200 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 Content-Type: application/json Referer: http://localhost:4200/ Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.8

Successful Request OPTIONS /auth/validate_token HTTP/1.1 Host: baseUrl Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Access-Control-Request-Method: GET Origin: http://localhost:4200 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 Access-Control-Request-Headers: content-type Accept: / Referer: http://localhost:4200/ Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.8

It seems like the failed one is making a GET request, thus causing the issue but I have no idea what is invoking this call. Is there a way to see?

GreyBeardedGeek GreyBeardedGeek · Accepted Answer · 2017-08-20T05:28:12

Ok, so two things... First, you state that

"however on a fresh reload -every- time someone is not logged in, they get a 401 Error."

Well, that's the way it's supposed to work. If they're not authenticated, they're going to get a 401. That's what a 401 means - "authentication required".

If you mean just that if the user hits the browser's "reload" button while authenticated, they get a 401, that means that you are losing your credentials on a reload - you'll probably want to store them in local storage.

Secondly, the two-request behavior that you are seeing is CORS at work (I'm guessing that your back-end is on a different port, not 4200, which makes CORS kick in).

The OPTION request is a negotiation between the browser and the server to see if you are allowed to make the GET request from a CORS point of view. Apparently you are allowed, so the GET proceeds, but gets a 401, because authentication is required.

This "extra" OPTIONS request is not under your control (or Angular's), it's baked into the browser, and that's just how CORS works.

Angular4 Token Auth making 'auth/validate' call

1 Answers