Create-react-app: Support for oidc-client-js via redux-oidc

[loliver]

Hi there,

I was wondering whether anyone has been able to get oidc-client-js working with CRA without ejecting?

It is a hard dependency of ours using silent auth implicit flow with kerberos and ldap.

At present we have the following webpack config that we inject in to our apps to support it:

module.exports = {
  entry: {
    silentCallback: ['whatwg-fetch', 'babel-polyfill', './app/src/silent.js']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'silentCallback',
      chunks: ['commons']
    }),
    new HtmlWebpackPlugin({
      template: './app/src/silent.html',
      chunks: ['silentCallback'],
      filename: 'silent.html',
      inject: 'body'
    }),
    new CopyWebpackPlugin([
      {
        from: '@anz/user-manager/env.js'
      }
    ])
  ]
}

Would be great to hear any pointers on how to achieve this within CRA or some good places to start in creating some functionality to allow it.

Thanks.

[Keerthi969]

Why can't the html be in the same directory as your app.

[loliver]

It is in the same directory.

My understanding is that if you need it to be a separate entry point with completely different code it needed to be specified in config.

[Keerthi969]

The spa and html has no direct relation. You can use the html from oidc-client than from redux-oidc.

Just set the config to the html (e.g silent_renew.html)

[flip-it]

@loliver, I got it working without ejecting. When the iframe is calling '/silent-renew' the regular index.html is loaded with the main js bundle. But instead of rendering the react application, I run the callback function.

index.js:

if (window.location.pathname === '/silent-renew') {
    new UserManager().signinSilentCallback();
} else {
    ReactDOM.render(<App />, document.getElementById('root'));
}

[loliver]

Awesome, I have been thinking about this again recently but haven't had time to experiment. Will comment and close when I have it working.

[loliver]

Got this working, thanks for your help @flip-it !