React SPA with oidc-client and client secret

0
votes

I'm building a React SPA on top of a ASP.NET Core API and I want to authenticate with OIDC. Grant type is authorization code and the client does have a client secret.

Since we will be using a client secret, the authorization step that involves the secret has to go through a proxy that we control.

Is this doable in a React SPA with oidc-client?

2
reactjsasp.net-coreopenid-connect
Consider using an authentication provider like Azure AD. Here's a sample application doing that. - derisen
I should have mentioned that. The authentication platform (and method) has already been decided. Using Azure AD is not an option, I'm afraid. - nednull

2 Answers

4
votes

If the secret is in the client, it's not a secret. :)

Secrets are for server-server authentication, because the secret is secure on a server (we hope so, anyway) and the API granting access has a whitelist of consumers it's granted access to use the secret.

For a SPA, if you're talking about allowing an app to use an API, I believe you're limited to using a CORS whitelist. If you're talking about a user accessing the API via the client, then you're looking at access codes and usernames/password.

1
votes

PROBLEM

You have a blocking issue with the authentication system, or with usability or getting security to an acceptable level. In your case there is no PKCE support.

PROXYING SOLUTION

Use oidc-client which will add PKCE parameters and your SPA security supports the latest standards.

The client secret will come into play during the authorization code grant and refresh token grant messages.

Messages can be adapted server side to remove PKCE and use a client secret instead. It is quite a complex solution though and not everyone will like it.

It requires a SameSite cookie issued by the web domain. In my case I used an AWS lambda edge function that runs within a CloudFront content delivery network.

WHY DO IT THIS WAY?

In order to fit into an SPA architecture and meet wider goals in areas such as usability, coding model, mobile integration and global web performance. Depends if you feel it is worth the effort.

LINKS