angularauth0httpinterceptor

auth0 http interceptor StaticInjectorError


Following the docs in the auth0 documentation about calling an api after setting up the auth0 service in an angular application

https://auth0.com/docs/quickstart/spa/angular/02-calling-an-api

And creating the httpinterceptor with the guidance of a more detailed example:

https://github.com/auth0/auth0-angular#configure-authhttpinterceptor-to-attach-access-tokens

I have my interceptor:

imports: [
    BrowserModule,
    RouterModule,
    FontAwesomeModule,
    RecaptchaV3Module,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    HttpClientModule,
    AuthModule.forRoot({
      domain: environment.auth0_domain,
      clientId: environment.auth0_client_id,
      redirectUri: window.location.origin,

      // The AuthHttpInterceptor configuration
      httpInterceptor: {
        allowedList: [
          'example.com/*',
          'example2.com/*'
        ],
      },
    })

  ],
  providers: [Addemailtomarketinglistservice,
    { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
    {provide: RECAPTCHA_V3_SITE_KEY, useValue: environment.recaptcha_site_key },
  Googlerecaptchaservice, AuthService, HidecomponentService, S3Service],
  bootstrap: [AppComponent]

I receive the following error when making any api call:

ERROR NullInjectorError: StaticInjectorError(AppModule)[InjectionToken HTTP_INTERCEPTORS -> AuthClientConfig]: 
  StaticInjectorError(Platform: core)[InjectionToken HTTP_INTERCEPTORS -> AuthClientConfig]: 
    NullInjectorError: No provider for AuthClientConfig!

Also here are some imports to see what libraries I am using

import { AuthHttpInterceptor, AuthModule } from '@auth0/auth0-angular';

import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';

Here is my angular version output:

 / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.29
Node: 12.14.1
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.29
@angular-devkit/build-angular     0.803.29
@angular-devkit/build-optimizer   0.803.29
@angular-devkit/build-webpack     0.803.29
@angular-devkit/core              8.3.29
@angular-devkit/schematics        8.3.29
@angular/cli                      8.3.29
@ngtools/webpack                  8.3.29
@schematics/angular               8.3.29
@schematics/update                0.803.29
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Solution

  • Auth0 Angular SDK- A library for integrating Auth0 into an Angular 9+ application. Please update your angular.