Angular 17 NullInjectorError: No provider for InjectionToken auth0.client

Question

I am working on an Angular project and getting a NullInjectorError as soon as I add Auth0 to a standalone component. The full error message is:

[vite] Internal server error: R3InjectorError(Standalone[_AppComponent])[AuthService -> AuthService -> InjectionToken auth0.client -> InjectionToken auth0.client]: NullInjectorError: No provider for InjectionToken auth0.client!

Here's how the component looks like:

import {Component} from '@angular/core';
import {AuthService} from '@auth0/auth0-angular';
import {CommonModule} from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  standalone: true,
  imports: [CommonModule],
  styleUrl: './header.component.scss'
})
export class HeaderComponent {
  public constructor(
    public authService: AuthService) {
  }

  public onLogin() {
    this.authService.loginWithRedirect();
  }
}

And my main.ts:

import {bootstrapApplication} from '@angular/platform-browser';
import {authHttpInterceptorFn, provideAuth0} from '@auth0/auth0-angular';
import {appConfig} from './app/app.config';
import {AppComponent} from './app/app.component';
import {provideHttpClient, withInterceptors} from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    ...appConfig.providers,
    provideHttpClient(withInterceptors([authHttpInterceptorFn])),
    provideAuth0({
      domain: '{auth0-domain-uri}',
      clientId: '{auth0-client-id}',
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    })
  ]
}).catch((err) => console.error(err));

I have tried many other options - providing things like AuthModule, or use Auth0ClientFactory, etc. everything I could find on the web. Even their official doc does't mention anything helpful. What should I provide inside a standalone component or provide what in where to avoid this error?

Thanks in advance.

Answer 1

I encountered similar issue for 'ng test'. The fix was adding '"src/**/*.d.ts"' into 'include' array inside tsconfig.spec.json. You will most likely need to do the same but inside tsconfig.app.json.

Answer 2

You can use InjectionToken to Provide AUTH0_CLIENT If explicitly defining the Auth0 client is necessary, use the AUTH0_CLIENT injection token. This can be provided using the useClass method for better clarity and dependency injection control.

  import { AUTH0_CLIENT, Auth0Client } from '@auth0/auth0-angular';
    
    bootstrapApplication(AppComponent, {
      providers: [
        provideHttpClient(withInterceptors([authHttpInterceptorFn])),
        provideAuth0({
          domain: 'your-auth0-domain',
          clientId: 'your-auth0-client-id',
          authorizationParams: {
            redirect_uri: window.location.origin,
          },
        }),
        { provide: AUTH0_CLIENT, useClass: Auth0Client },
      ],
    }).catch((err) => console.error(err));

OR in another case if you dont test this way :Use imports Array in Standalone Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService, AuthModule } from '@auth0/auth0-angular';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  standalone: true,
  imports: [CommonModule, AuthModule],
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {
  constructor(public authService: AuthService) {}

  onLogin() {
    this.authService.loginWithRedirect();
  }
}