OIDC Auth Code Flow and Angular application


This is not specific to Keycloak but I hope you can help me.

I’m programming an Angular application and like to add an OIDC Auth Code Flow.
I’ve understood that after the user authentication, the OpenID Provider redirects to the application and passes the Auth Code. Then the application can exchange the Auth Code for the Access Token.

How does this work for Angular applications? Here the application on the webserver can’t send any requests itself. Instead, it creates html and javascript code which is executed by the user’s webbrowser, which is a public client. So, do I really have to request the Access Token from the webbrowser?

Rgds, Benedikt

The Angluar App can be seen like a standalone app, with the difference that it is downloaded from a webserver and does not need to register a local redirect. After the authentication on the OP, the redirect hits the delivering webserver which again delivers the anular app, but with an attached ?code=abc123… to the URL. The client-side angular library checks for this parameter (other session state normaly is stored in browser’s local storage to survive redirects/reloads) and completes the request with code at token endpoint. After that the client has all tokens (public client, no secret, using pkce). So in the state, only the angular client knows, who’s authenticated. This makes only sense, if the webserver has an API which is usable using the acess token. The information “who is authenticated” is in the access token. Keycloak’s admin interface and the new account console are working this way.