2. Configuration

In order to configure redux-oidc to work in your app, the following configuration steps are required:

• setup OidcProvider, UserManager middleware & reducers like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { createStore, Provider } from 'react-redux';
import createOidcMiddleware, { createUserManager, OidcProvider, reducer } from 'redux-oidc';

// user manager configuration object, see oidc-client-js documentation for details
const config = {
  client_id: 'my-client',
  redirect_uri: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/callback`,
  response_type: 'id_token token',
  scope: 'openid profile',
  authority: 'http://myIdentityProvider.com',
  post_logout_redirect_uri: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/login`,
  silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/silent_renew.html`,
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: true
}

// create a user manager instance
const userManager = createUserManager(config);

// create the middleware
const oidcMiddleware = createOidcMiddleware(userManager, () => true, '/callback');

// configure your reducers
const reducers = combineReducers({
  oidc: reducer,
  // your other reducers
});

// configure your redux store
const store = createStore(
  reducers,
  applyMiddleware(oidcMiddleware)
);


// register the OidcProvider nested below react-redux's Provider
ReactDOM.render((
  <Provider store={store}>
    <OidcProvider store={store} userManager={userManager}>
      <MyApp />
    </OidcProvider>
  </Provider>
), document.getElementById('app'));

• register a route to handle the callback from the token service, matching the redirect_uri option passed into your UserManager instance,
• in the component registered at that route, configure the CallbackComponent like this:

import React from 'react';
import { CallbackComponent } from 'redux-oidc';
import { push } from 'react-router-redux';
import { connect } from 'react-redux';

class MyCallbackPage extends React.Component {

  // define a success callback which receives the signed in user & handles redirection
  // NOTE: this example uses react-router-redux, 
  // but any other routing library should work the same
  successCallback = (user) => {
    // the user object gets the browser's URL before 
    // redirection was triggered passed into its state
    // when triggerAuthFlow is set to `true`
    const urlBeforeRedirection = user.state.redirectUrl;
    this.props.dispatch(push(urlBeforeRedirection));
  };

  render() {
    return <CallbackComponent successCallback={this.successCallback} />;
  }
}

function mapDispatchToProps(dispatch) {
  return {
    dispatch
  };
}

export default connect(null, mapDispatchToProps)(MyCallbackPage);

This is all that is required. To make sure that the communication with the OpenID provider is working, please make sure that the redirect_uri passed into the UserManager's configuration matches the redirectUrl registered with the OpenID provider.