Trying to add a global authorization interceptor for all request going towards an API. about datx

[fvoska]

Hi @stefan-willems-beech, can you please try using the following versions:

"@datx/core": "^2.4.8",
"@datx/jsonapi": "^2.4.8",
"@datx/jsonapi-angular": "^2.4.9",
"@datx/utils": "^2.4.8",

When using Angular, please use Angular's interceptors and not Datx's interceptors feature, as it is unnecessary next to Angular's interceptors.

Next, check out the instruction from @datx/jsonapi-angular docs for configuration, as there have been some changes in how the lib should be configured. We didn't communicate these changes in the best way, but if you were using CustomFetchService and setting baseFetch, that is no longer necessary and things should work with the new setup.

Your AppModule might look something like this after all is set up:

@NgModule({
  imports: [
    DatxModule.forRoot({
      baseUrl: 'https://my-api.com/'
    })
  ],
  providers: [
    {
      provide: APP_COLLECTION,
      useValue: new AppCollection(),
    },
    {
      provide: HTTP_INTERCEPTORS,
      multi: true,
      useClass: MyInterceptor
    }
  ]
})
export class AppModule {}

[stefan-willems-beech]

I'v tried the new versions of the packages

and I am still having this issue.

AppModule

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        AuthenticationModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        HttpClientModule,
        DatxModule,
    ],
    providers: [
        {
            provide: APP_COLLECTION,
            useValue: new AppCollection(),
        },
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

AuthenticationModule

@NgModule({
    imports: [
        KeycloakAngularModule,
    ],
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: initializeKeycloak,
            multi: true,
            deps: [KeycloakService],
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: KeycloakBearerInterceptor,
            multi: true
        }
    ]
})
export class AuthenticationModule {
}

The current implementation is working without the datx implementation

[stefan-willems-beech]

I've tried it without and with adding the KeycloakBearerInterceptor to the providers.
Because the KeycloakAngularModule provides the interceptor on default.

[stefan-willems-beech]

For future reference:

I have updated the way the module is imported via the forRoot and changed the location of the baseUrl from the collection to the module.

This fixed the issue

this is my current AppModule

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        AuthenticationModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        HttpClientModule,
        DatxModule.forRoot({
            cache: CachingStrategy.NetworkOnly,
            baseUrl: environment.api_base_url,
        })
    ],
    providers: [
        {
            provide: APP_COLLECTION,
            useValue: new AppCollection(),
        },
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

[fvoska]

.forRoot part was important because that is what makes DatX use Angular's HttpClient instead of the native fetch method (and Angular's interceptors do not work when using fetch)

[stefan-willems-beech]

Yeah figured that out when I followed the changes inside the documentation (didn't really consider it), my implementation is going through some validation and the imports of the module has changed.

Thanks for the clarification