Hello there, I’m currently developing an Angular with the Apollo GraphQL Client framework on frontend and Apollo Server on backend (node). Unfortunately I’m experiencing a strange behavior during the communication between the two parts of the application since whenever i try to call the graphQL api, a “Login required error” is raised.
Before digging more deeply in the problem and the workaround I tried, I want to clarify that this is the first time in two years that such problem happens, despite the technologies I used for every project are pretty much the same. The only difference between the previous projects and this one is that I used Angular instead of React. Anyway, based on my Auth0 knowledge the technology used should not impact on this error because the authentication flow, and the data exchanged with the tenant, are the same. Right?
From the researches i’ve done so far I understood that the issue regards the getAccessTokenSilently() pre-flight call made by the AuthHttpInterceptor in the Angular App. The browser blocks the third party cookies making the API call fail. As a confirmation of this hypothesis I tried to turn off the browser protection and the API calls have been performed successfully.
As I’ve noticed, reading some related question to the community, this is a known issue which could be workaround by adding a custom domain (not available for the free tier tenant) or using the token rotation.
In light of all these considerations, I cannot understand why the same exact authentication flow works with react and not with Angular and if there is any alternative workaround I can apply without using the token rotation.
Thank you in advance, here it is the auth module of the application in case you might need some insight:
App.module.ts
@NgModule({
declarations: [
AppComponent,
LoginButtonComponent,
ReactiveBreadcrumbComponent,
LanguageSelectorComponent
],
imports: [
....,
AuthModule.forRoot({
...env.auth,
}),
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true},
{provide: NZ_I18N, useValue: it_IT},
CanDeactivateGuard
],
bootstrap: [AppComponent]
})
export class AppModule {
}
env.auth:
export const environment = {
production: false,
auth: {
domain: authInfo.domain,
clientId: authInfo.clientId,
authorizationParams: {
redirect_uri: window.location.origin,
audience: `https://-----/graphql`,
},
httpInterceptor: {
allowedList: [
{
uri: `http://127.0.0.1:8080/graphql`,
tokenOptions: {
authorizationParams: {
audience: `https://-----/graphql`,
scope: 'read:current_user'
}
}
}
]
}
},
};