How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?

Question

In our organization, we use our own custom Oauth2 provider (which does not have “.well-known/OpenID-configuration” discovery endpoint because it id not OIDC provider). We have a React single page application (SPA) which acts as Oauth2 client, this SPA uses OAuth2 endpoints (authorize, toke & revoke) of the custom OAuth2 provider to authorize end-users.

For a React SPA, is there any library/SDK available to implement the OAuth2 Authorization code grant(with PKCE) for a custom OAuth2 provider?.

We could find React OAuth libraries for well know providers like Google, Facebook, Auth0. But we could not find any generic React OAuth library for a custom OAuth Provider. Auth0 React script: https://auth0.com/docs/libraries/auth0-spa-js Google: https://www.npmjs.com/package/react-google-login FaceBook: https://www.npmjs.com/package/react-facebook-login

Can I use a Native (app) React library for SPA ?. Can I use this native reactive library https://github.com/FormidableLabs/react-native-app-auth?. It supports both OAuth2 and OIDC providers. Our custom OAuth provider does not have a “.well-known/OpenID-configuration” discovery endpoint. So we will specify our OAuth endpoints in the configuration

const config = {
  clientId: '<your-client-id>',
  clientSecret: '<your-client-secret>',
  redirectUrl: ‘redirectURL', 
  scopes: ['email:accounts:read'], /
  serviceConfiguration: {
    authorizationEndpoint: 'https://OAuthProvider/oauth/authorize',
    tokenEndpoint: 'https://OAuthProvider/oauth/token',
    revocationEndpoint: 'https://OAuthProvider/oauth/revoke',
  },
}

I tried to use the below library but it works with only OIDC provider because it uses OIDC discovery “.well-known/OpenID-configuration” to find OIDC endpoints. But our custom OAuth provider does not have a discovery channel.

https://github.com/googlesamples/appauth-js-electron-sample

Initially, we thought of using implicit flow but it is not recommended. https://developer.okta.com/blog/2019/05/01/is-the-oauth-implicit-flow-dead

Chicky

Answer 1

Generally I recommend this library - which is probably the most respected option out there: https://github.com/IdentityModel/oidc-client-js

You can set endpoints explicitly if needed if you have no discovery endpoint. However, it will depend a little on your OAuth2 provider capabilities.

See also this sample: https://github.com/skoruba/react-oidc-client-js

2021 UPDATE

There have been 2 changes in recent times that impact my previous answer, meaning the above options are no longer the optimal choice:

• More recent browser cookies (SameSite=strict) are considered stronger
• Browsers drop 3rd party cookies in some parts of the SPA flow, eg when renewing tokens via a hidden iframe

These days the preferred solution is to involve an API in the OAuth work, to solve these problems. It is a little tricky to understand, but the goal is to avoid adversely impacting other parts of the SPA architecture:

• React Code Sample

Fro

Thanks a lot for the response. How to set our own OAuthProvider endpoints explicitly?. Which file do we need to modify to set our own OAuth provider? (is it identityserver-sample.js ?). Does this library support PKCE with Auth code flow?. – Chicky

Yes - the lib supports auth code + pkce. By default you point the lib at a base authority url - as in.my sample: github.com/gary-archer/authguidance.websample1/blob/master/spa/…. However you can also set endpoints explicitly as covered here: github.com/IdentityModel/oidc-client-js/wiki – Fro

If you're new to this stuff my tutorial + code sample should help - maybe try updating it to work against your OAuth2 provider: authguidance.com/2017/09/24/basicspa-overview – Fro

After adding the metadata field (with endpoints) inside settings, I was able to integrate the library with our OAuth provider. – Chicky

Can I use this library with Other UI frameworks (Angular, Vue, etc.. ). our organization SPA can be built by using all famous UI frameworks. Is there any generic OAuth library solution ?. I found very easy Vanilla JavaScript code, github.com/aaronpk/pkce-vanilla-js/blob/master/index.html , can I use it with all UI frameworks. – Chicky

Sure - it's very widely used and there are many samples out there if you Google for things like 'vue oidc client'. Using a certified library means the tough security done for you - some of it is very tricky - you avoid mistakes - and you get upgrades for free as new versions of the library are released. – Fro

@siva…is your oauth provider and app on same domain? Did you face any issues recently since browsers blocking cross site cookies – Sheldonshelduck

I added an update to my answer that is hopefully useful to @Sheldonshelduck – Fro

Answer 2

The pointed lib by @Gary Archer is not more maintained. The new one is https://github.com/authts/oidc-client-ts

Airdrop