No header with standalone components

[ArgCedric]

Checklist

• I have looked into the Readme and Examples, and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

I use angular 15 and standalone components, especially for the app.component, so I don't have an app.module.
I added I JwtModule in the main.ts. There is no error, but nothing happens and the "Authorization" header is not visible

I use ionic 7, (angular 15) with capacitor 4 and "@auth0/angular-jwt": "^5.1.2",

Reproduction

content of main.ts file

[...]
function test(){
    return 'ThisIsMyToken'
}

const jwtConfig: JwtConfig = {
    tokenGetter: test,
    allowedDomains: [environment.endpoint],
};

bootstrapApplication(AppComponent, {
    providers: [
        [...]
        importProvidersFrom(
            [...]
            JwtModule.forRoot({config: jwtConfig})
        ),
        [...]
    ],
});

Additional context

No response

angular-jwt version

5.1.2

Angular version

15

Which browsers have you tested in?

Chrome, Firefox

[frederikprijck]

Thanks for reaching out, did you verify the exact same configuration works without using standalone?

Also, be sure to call withInterceptorsFromDi, on provideHttpClient to ensure Angular uses the class based interceptors.

[ArgCedric]

Whoa okay! I'm really sorry for this pointless post.
Indeed, I did not add "withInterceptorsFromDi()". The concept of standalone components is still vague for me, you would say..

Would it be relevant to add something in the documentation for the standalone configuration? Something like this:

In main.ts file

import {JwtModule} from "@auth0/angular-jwt";
import {provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";

// ...

export function tokenGetter() {
    return localStorage.getItem("access_token");
}

bootstrapApplication(AppComponent, {
    providers: [
        // ...
        importProvidersFrom(
            // ...
            JwtModule.forRoot({
                config: {
                    tokenGetter: tokenGetter,
                    allowedDomains: ["example.com"],
                    disallowedRoutes: ["http://example.com/examplebadroute/"],
                },
            }),
        ),
        provideHttpClient(
            withInterceptorsFromDi()
        ),
    ],
});

[frederikprijck]

Even though this is something you will need to do for any library that does not provide standalone ways to register its artifacts, I guess we could add something, or even provide the artifacts so that it would just work like you'd expect (like we did here auth0/auth0-angular#445), happy to review a PR that does either of that.

[frederikprijck]

Closing for now, happy to review a PR if anyone would want.