2

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.

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

PKCE is in no way a replacement of the client_secret. OAuth2 defines two types of client: confidential (that can safely store a client_secret) and public (that cannot safely store a client_secret). Basically, you can use angular-oauth2-oidc with the code flow without specifying a client_secret. You just have to be sure that you registered your app in your authentication provider as a public client. PKCE is just an additional security layer used to prevent man in the middle attacks.
I know the theory - setting up and customising authentication is my everydays job. With the answer as it is I just wanted to explain the OP the simplest way to go in the simplest words. It is possible to turn PKCE off, but it's not recommended and it's on by default both client and server side
I'm sure you know what you're talking about. Just saying that PKCE is definitely not a kind of replacement of client_secret. These are two totally different things...
They work absolutely differently. They work both for reaching the same goal: make sure the sign in action user performs on idp's web page is bound to the particular app's context. For me that's enough to say these are definitely not so different things from the end user perspective.
1

I/we've created an open source library which does just that and i wrote an article about how to set it up here: https://abstarreveld.medium.com/set-up-a-spa-bff-with-asp-net-core-and-angular-in-3-steps-net-8-18527d73bc43.

The solution we've built works as follows:

  • It's basically a CDN + Reverse Proxy + Server-side authentication

  • User navigates to https://yoursite.whatever/.auth/login

  • User navigates to identity-provider to sign in

  • Server-side receives an auth token and starts a session

  • Server-side serves a SPA

  • SPA can [GET] to /.auth/me to receive user id_token claims

  • SPA can invoke http requests to /api/*, these requests are handled by the servers side and authenticated with the client session.

  • The server-side configuration contains mapping where to forward the API-requests to

  • Server-side includes a 'Authentication Bearer [ACCESS_TOKEN]' header in every forwarded request.

Prerequisites for this software:

  • ASP.NET Core (.NET 8)
  • NPM + Angular

If you have .NET, NPM, and Angular installed, hit the ground running by executing these commands.

# Download and install the template pack first
dotnet new install OidcProxy.Net.Templates

# Scaffold the proxy
dotnet new OidcProxy.Net --backend "https://yoursite.whatever"
    --idp "https://yoursite.whatever"
    --clientId xyz
    --clientSecret abc

# Run it
dotnet run

# Open a browser and navigate to https://localhost:8444/.auth/login

Check out the project here: https://github.com/oidcproxydotnet/OidcProxy.Net

Hope this helps!

Cheers,

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.