How do I import an Auth Service in to the environment.ts file and use the token

Question

I have auth.service.ts file that fetchs the access token

auth.service.ts

  public async getAccessToken(): Promise<string | undefined> {
    await this.initialize();
    const res = await this.getAuthResult();
    this.bearerToken = res?.accessToken;
    return res?.accessToken;
  }

I have been able to import the auth token to other pages using

import { AuthService } from '../../services/auth/auth.service';

async getToken() {
  await this.auth.getAccessToken();
  console.log("token", this.auth.bearerToken);
}

What I am trying to do is import this token into the 'x-authorization-token' in the environment.ts file if possible

environment.ts

import { HttpHeaders } from '@angular/common/http';
import { AuthService } from '../app/services/auth/auth.service';

export const environment = { production: false };

export const headerAuth: any = {
  headers: new HttpHeaders({
    'x-authorization-token': '', // To be imported from Auth Service
    'access-control-allow-origin': 'https://XXXXX.fred.com/',
    'access-control-allow-methods': 'GET,POST,OPTIONS',
    'access-control-allow-headers': 'Content-Type, X-Authorization-Token, Origin',
    'content-type': 'application/json',
  })
}

score 1 · Accepted Answer · answered Mar 27 '23 at 20:21

I don't believe trying to get access to the token in the configuration file is the correct way to go. The dependency injection system isn't conveniently available and configuration shouldn't block your application startup. Instead, utilize the HttpInterceptor interface to add the header to requests made by your application.

Since your service returns a Promise, you'll need to use something like the approach in this answer to handle the async/await aspect as an Observable instead.

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
} from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { from, lastValueFrom, Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable()
export class AuthTokenHeaderInterceptor implements HttpInterceptor {

  private readonly authService = inject(AuthService);

  // If you're in Angular 13 or below, use the constructor
  // instead of the inject() method:
  // constructor(private readonly authService: AuthService) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return from(this.handle(request, next));
  }

  async handle(request: HttpRequest<any>, next: HttpHandler) {
    const token = await this.authService.getAccessToken();
    const newRequest = request.clone({
      setHeaders: {
        'x-authorization-token': token,
      },
    });
    return await lastValueFrom(next.handle(newRequest));
  }
}

Make sure to add the interceptor to your dependency injection tree in your NgModule.providers array or ApplicationConfiguration.providers array depending on whether your application is module-based or standalone.

providers: [
  { 
    provide: HTTP_INTERCEPTORS, 
    useClass: AuthTokenHeaderInterceptor, 
    multi: true 
  }
]

The problem I run into is we Apollo Graphql in one spot which uses link: httpLink.create({ headers: new HttpHeaders ( httpOptions ), uri: uriGraphQLLink, }), S0 I have two different styes of headers. Not my idea i was forced into this. I think the interceptor would break this — Thomas Degroot, Mar 28 '23 at 15:13
Doing some testing it looks like interceptors edit the existing header — Thomas Degroot, Mar 28 '23 at 17:33

How do I import an Auth Service in to the environment.ts file and use the token

1 Answers1