CODEWITHSUNDEEP
angularoauth-2.0angular-oauth2-oidc
James Sun
James Sun

Reputation: 111

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

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.

Upvotes: 2

Views: 4246

Answers (2)

Albert Starreveld
Albert Starreveld

Reputation: 76

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,

Upvotes: 0

d_f
d_f

Reputation: 4859

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.

Upvotes: 1

Related Questions