i18n-backend with oauth2 authorization in spartacus

Question

We want to use a backend for i18n in spartacus. Unfortunately this backend needs an oauth2 authentication but spartacus does not send a bearer token when trying to access this webservice endpoint and we get a 401 error. Is there anything we can do? Right now we try to solve this problem in this way: What we need to have is implemented in ClientTokenInterceptor, so we adapted this interceptor, changed the if-clause a little bit so it fits to the backend-url for this webservices and provide the interceptor via app.module.ts which works so far. Unfortunately calling this.authService.getClientToken() in our Interceptor returns no token.

constructor(
    private authService: AuthService,
    private occEndpoints: OccEndpointsService
  ) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return this.getClientToken(request).pipe(
      take(1),
      switchMap((token: ClientToken) => {
        if (
          token &&
          request.url.includes("i18n")
        ) {
          request = request.clone({
            setHeaders: {
              Authorization: `${token.token_type} ${token.access_token}`,
            },
          });
        }
        return next.handle(request);
      })
    );
  }

  private getClientToken(request: HttpRequest<any>): Observable<ClientToken> {
    if (
      InterceptorUtil.getInterceptorParam(USE_CLIENT_TOKEN, request.headers)
    ) {
      return this.authService.getClientToken();
    }
    return of(null);
  }

What do we miss?

Answer 1

Actually there are couple of things not needed in your solution.

I pasted below what I did instead and tested that it is working correctly (and you can see authorization data in the translation files requests).

First issue: InterceptorUtil.getInterceptorParam(USE_CLIENT_TOKEN, request.headers) you don't need to check that. If you always need the auth data for translation requests just use return this.authService.getClientToken();

Second issue: In intercept method you didn't cover cases for any other request than translation. Because of that the request for the client token would hang here, because it would wait for token and so on. If you add option for any other case than i18n it starts working as you intend.

Working solution:

@Injectable({ providedIn: 'root' })
export class TranslationsInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (request?.url?.includes('i18n')) {
      return this.getClientToken().pipe(
        take(1),
        switchMap((token: ClientToken) => {
          if (token) {
            request = request.clone({
              setHeaders: {
                Authorization: `${token.token_type} ${token.access_token}`,
              },
            });
          }
          return next.handle(request);
        })
      );
    } else {
      return next.handle(request);
    }
  }

  private getClientToken(): Observable<ClientToken> {
    return this.authService.getClientToken();
  }
}