Angular 17 No provider for InjectionToken auth0.client!

Help
,
1

Hi, I’m trying to implement Auth0 in my Angular 17 app and the standalone component I’m using AuthService gets the following error:

Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[AuthService -> AuthService -> InjectionToken auth0.client -> InjectionToken auth0.client]: 
  NullInjectorError: No provider for InjectionToken auth0.client!
    at NullInjector.get (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:1654:27)
    at R3Injector.get (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
    at R3Injector.get (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
    at injectInjectorOnly (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:1100:40)
    at Module.ɵɵinject (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:1106:42)
    at Object.AuthService_Factory (/Users/auclown/learn/Angular/client/node_modules/@auth0/auth0-angular/fesm2020/auth0-auth0-angular.mjs:511:36)
    at eval (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:3219:47)
    at runInInjectorProfilerContext (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:866:9)
    at R3Injector.hydrate (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:3218:21)
    at R3Injector.get (/Users/auclown/learn/Angular/client/node_modules/@angular/core/fesm2022/core.mjs:3082:33) {
  ngTempTokenPath: null,
  ngTokenPath: [
    'AuthService',
    'AuthService',
    'InjectionToken auth0.client',
    'InjectionToken auth0.client'
  ]
}

I’ve read and followed the standalone component example documentation but not sure what I am doing wrong.

My main.ts looks like this:

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';

bootstrapApplication(AppComponent, {
  providers: [
    ...appConfig.providers,
    provideAuth0({
      domain: '{domain_id}',
      clientId: '{client_id}',
      authorizationParams: {
        redirect_uri: '{redirect_uri}'
      }
    })
  ]
}).catch((err) => console.error(err));

The standalone component looks like this:

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();
  }
}

I tried putting AuthModule inside the imports array or providers array in the component.ts file, and many other options I could find on the internet but nothing works.

Can anyone help me with this issue? Thank you.

1 Like