Angular with OIDC does not redirect correctly when using SSR

I am creating a project to implement Angular with SSR and angular-oauth2-oidc.

However, in the final part of the flow, when the internal 'auth/callback' route is reached, it is not redirected to the internal 'user' route because the final state is set there.

Although when the same flow is performed without SSR, the flow ends correctly.

This is the configuration of the server.ts around requests:

app.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;

commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});


This is the flow of authentication:

public async authenticate(setState: boolean = true): Promise<boolean> {
if (!this.platformService.isBrowser) {
return false;
}

try {
this.oauthService.configure(this.authConfig);
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.strictDiscoveryDocumentValidation = false;

await this.oauthService.loadDiscoveryDocumentAndTryLogin();

const hasValidAccessToken = this.oauthService.hasValidAccessToken();
const hasValidIdToken = this.oauthService.hasValidIdToken();

this._authenticated = hasValidAccessToken;

if (!hasValidIdToken || !hasValidAccessToken) {
if (this.oauthService.state && this.oauthService.state !== '') {
return false;
}

const newState = setState ? await this.statehandler.createState().toPromise() : undefined;
this.oauthService.initCodeFlow(newState);
}

this._authenticationChanged.next(this.authenticated);
return this.authenticated;
} catch (error) {
return false;
}
}


You can see the project here: angular-ssr-oidc

Continue reading...