Angular with OAuth 2 Authorization Code grant flow using angular-oauth2-oidc

Viewed 2752

Authorization Code grant flow is recommended even for public client applications like Angular in up-coming OAuth 2.1.

But Angular apps are usually SPA, which means there isn't a built-in server side to store client_secret.

Library 'angular-oauth2-oidc' claims to support code grant flow, but I could not find any open sourced solution available.

Tried Vouch Proxy but it sets cookie ,which containing access_token and id_token, but that cookie would not be recognized by angualr-oauth2-oidc. code flow in angualr-oauth2-oidc is implemented as a xhr request to https://{your-authentication-server}/token.oauth2 so those two doesn't match up.

Any ideas, corrections or workarounds are greatly appreciated.

1 Answers

Your question is not clear enough, I'll try to answer -- correct me please if you looked for anything different.

As it was mentioned on the main page of the project

Since Version 8, this library supports code flow and PKCE to align with the current draft of the OAuth 2.0 Security Best Current Practice document. This is also the foundation of the upcoming OAuth 2.1.

PKCE is a kind of replacement for client_secret originally designed for mobile apps, but eventually shared with SPAs. It relies on redirect_uri to ensure your browser is running pre-registered app, and then uses code verifier to bound the following token requests to the original challenge.

For those who come from the dotnet world, the most organic open source STS to work with is Identity Server. For those who come from Java world, more intuitive might be Keycloak. The official documentation illustrates communication with the first, but you can find the links to several tutorials at the same page below.

Related