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

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 these resources show how, without impacting other parts of the SPA architecture:

• Curity React Code Sample
• Articles