CODEWITHSUNDEEP
angularerror-handlingjwtauth0angular-services
strasouch
strasouch

Reputation: 33

Angular NullInjectorError: No provider for JwtHelperService in Standalone Component

I just started with Angular and I encounter this error when using JwtHelperService:

"ERROR NullInjectorError: R3InjectorError(Standalone[_LoginComponent])[_AuthService -> _AuthService -> _AuthService -> JwtHelperService -> JwtHelperService]: NullInjectorError: No provider for JwtHelperService!" Maybe it's because my components are standalone.

I have created an auth service that handles the token received from the backend :

import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private jwtHelper: JwtHelperService) { }

  getToken(): string | null {
    return localStorage.getItem('access_token');  
  }
  
  decodeToken(): any {
    const token = localStorage.getItem('access_token');
    const decode = token ? this.jwtHelper.decodeToken(token) : null;
    console.log(decode); 
    return token ? this.jwtHelper.decodeToken(token) : null;
  }
  
  isLoggedIn(): boolean {
    const token = localStorage.getItem('access_token');
    return !this.jwtHelper.isTokenExpired(token);
  }
  
  logout(): void {
    localStorage.removeItem('access_token');
  }
  getSessionInfo(): { Name: string, NameIdentifier: string } |null  {
    const decodedToken = this.decodeToken();
    if (decodedToken && decodedToken.unique_name && decodedToken.nameid) {
      return { Name: decodedToken.unique_name, NameIdentifier: decodedToken.nameid };
    }
    return null; 
  }
}

I also tried to import it into loginComponent :

import { JwtHelperService } from '@auth0/angular-jwt';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
  ...
  `,
  styleUrl: './login.component.css',
  providers: [JwtHelperService] 
})
export class LoginComponent {
  loginForm = new FormGroup({ 
    email : new FormControl('', Validators.required),
    password : new FormControl('', Validators.required),
  }); 
  submitted = false; 
  loading = false;
  errorMessage: string =''; 
  sessionInfo: { Name: string, NameIdentifier: string } = { Name: '', NameIdentifier: '' };

  constructor(private userService: UserService, private router: Router, private authService: AuthService){}
  submitLogin(){
    console.log("click"); 
    this.submitted = true; 
      this.loading = true;
      const userLogin = new UserLogin();
      userLogin.email = this.loginForm.value.email ?? ''; 
      userLogin.password = this.loginForm.value.password ?? ''; 
      this.userService.submitLogin(userLogin).pipe(first()).subscribe(success => {
        if (success) {
          const session = this.authService.getSessionInfo(); 
          if(session){
            this.sessionInfo = session; 
            this.router.navigate(['/']);
          }
          else {
            console.log("Session is null"); 
          }
        } else {
          this.loading = false;
          this.errorMessage = "Email or password incorrect"
        }
      });
  }
  
}

but I still encounter the same error.

I also imported it into app.config :

import { JwtModule, JwtHelperService } from '@auth0/angular-jwt';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient(withInterceptors([userInterceptor])),
  importProvidersFrom(
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        
      }
    })
  ),
  JwtHelperService
]
};

If you find any inconsistency in my code, please let me know

Upvotes: 0

Views: 310

Answers (1)

evo
evo

Reputation: 11

Leave it only in the config; it should work. I faced the same issue, and adding it to the config providers solved it.

documentation: Using with Standalone Components

export const appConfig: ApplicationConfig = {
 providers: [
  provideHttpClient(),
  provideRouter(routes),
  importProvidersFrom(JwtModule.forRoot({})),
 ],
};

Upvotes: 1

Related Questions