1

I'm implementing OAuth2 in an existing Angular 6 application using okta-angular package. I'm running into an issue where the word 'Bearer' is getting removed from or not reaching the Authorization request header in any HTTP calls. This results in 401 unauthorized. Any insight into why this happening and a direction for how to correct it?

The base.service.ts getHeaders() method handles generating headers for all HTTP calls in the app and includes the word 'Bearer' before the auth token.

protected async getHeaders(): Promise<boolean> {
  if (await this.oktaService.isAuthenticated()) {
    this.headers = new HttpHeaders({ Authorization: `Bearer ${this.oktaService.getAccessToken()}`,
    'Content-Type': 'application/json', 'Accept': 'application/json', 'Cache-Control': 'no-cache'  });
    return true;
  }
  return false;
}

base.service.ts get() method using this.headers

public async get(methodRoute: string, param?: string): Promise<Observable<ResponseDTO<T>>> {
  if (await this.getHeaders()) {
    let fullUrl = `${this.entityUrl + methodRoute}`;
    if (param !== undefined && param !== null && param.length > 0) {
      fullUrl += '/' + param;
    }
    return this.http.get<ResponseDTO<T>>(fullUrl, { headers: this.headers });
  }
  return null;
}

nav-menu.component.ts using baseService's get() method

async load() {
  if (this.isAuthenticated) {
    (await this.baseService.get('url/goes/here'))
      .subscribe((response: ResponseDTO<boolean>) => {
        this.isSup.next(response.responseObject);
      });

    (await this.baseService.get('url/goes/here'))
      .subscribe((response: ResponseDTO<boolean>) => {
        this.isKSup.next(response.responseObject);
      })
  }
}

Running the code I can observe this.headers and see "Bearer {token here}" in full, explicitly with the word Bearer intact. In the F12 Developer Tool's console the HTTP request returns a 401 Unauthorized error. Looking at the request headers via Dev Tool's (both Chrome and Edge) I see the word 'Bearer' is missing in the Authorization header, but the token is present.

Screenshot of Authorization header

Relevant items from package.json

"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.10",
"@angular/compiler": "^6.1.10",
"@angular/core": "^6.1.10",
"@angular/forms": "^6.1.10",
"@angular/http": "^6.1.10",
"@okta/okta-angular": "^3.1.0",
"@okta/okta-auth-js": "^5.0.2",
"node-sass": "^4.14.1",
"rxjs": "^6.6.3",

I have tried downgrading to 6.1.7, which matches a different project that correctly passes 'Bearer' along to the request headers. No dice. I've tried restructuring the load() method to get headers first and use them inline, similar to the get() method, but that didn't work either.

Avius
  • 5,504
  • 5
  • 20
  • 42
OfficeDweller
  • 11
  • 2
  • oktaService.getAccessToken() is a request that needed to be awaited. (your first screenshot) I am not sure why Bearer is being removed though. An Http Interceptor would be better. It will handle setting the Authorization header values before requests are made. However, it looks like okta doesn't have one and only provides this as their solution for it: https://github.com/okta/okta-oidc-js/issues/35 (I know this article is old, but haven't found anything more recent that suggests otherwise) – Brian Smith Jun 24 '21 at 12:24
  • @BrianSmith Fancy that, there IS an interceptor that I hadn't noticed. It was missing Bearer. Changed it to `Authorization: 'Bearer ${this.auth.getAccessToken()}'` (where apostrophes are backticks) in the interceptor and that works. Thank you for bringing this to my attention. I didn't write the original code so I wasn't familiar with all of it. – OfficeDweller Jun 24 '21 at 16:44
  • Glad it is working for you!, please mark my comment as useful. – Brian Smith Jun 24 '21 at 18:50

0 Answers0