Angular 17 No provider for InjectionToken auth0.client!

Get 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.

2 Likes
2

Have you found a solution to this? The only other solution I have found was where the user went to Firebase.

3

Any resolution to this issue? I am facing the same problem. I’m using Angular 19.

4

Just a heads up on this… I think that the entire issue was SSR. After fully removing SSR from my project (not just disabling it), the service injection appears to work as advertised.

@auth0 team, please confirm that SSR should be avoided.

I hope this helps someone else.

6

I realized that I had vite and some ssr in my .angular cache and once I deleted the .angular, node_modules, package-lock.json, and dist directories and made sure there was absolutely nothing with ssr anywhere else in my code base (I ended up removing all of the server files) and it now works perfectly