11

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

siva
  • 1,693
  • 2
  • 21
  • 29

2 Answers2

15

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:

Gary Archer
  • 22,534
  • 2
  • 12
  • 24
  • 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?. – siva Nov 19 '19 at 06:22
  • Yes - the lib supports auth code + pkce. By default you point the lib at a base authority url - as in.my sample: https://github.com/gary-archer/authguidance.websample1/blob/master/spa/src/plumbing/oauth/authenticator.ts. However you can also set endpoints explicitly as covered here: https://github.com/IdentityModel/oidc-client-js/wiki – Gary Archer Nov 19 '19 at 17:34
  • If you're new to this stuff my tutorial + code sample should help - maybe try updating it to work against your OAuth2 provider: https://authguidance.com/2017/09/24/basicspa-overview/ – Gary Archer Nov 19 '19 at 17:41
  • After adding the metadata field (with endpoints) inside settings, I was able to integrate the library with our OAuth provider. – siva Nov 21 '19 at 04:57
  • 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, https://github.com/aaronpk/pkce-vanilla-js/blob/master/index.html , can I use it with all UI frameworks. – siva Nov 21 '19 at 05:01
  • 1
    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. – Gary Archer Nov 21 '19 at 19:14
  • @siva…is your oauth provider and app on same domain? Did you face any issues recently since browsers blocking cross site cookies – Hemanthvrm Sep 02 '21 at 11:35
  • 1
    I added an update to my answer that is hopefully useful to @Hemanthvrm – Gary Archer Sep 02 '21 at 13:17
0

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

osoitza
  • 171
  • 1
  • 7