3. API

This package contains the following components:

createOidcMiddleware(userManager, shouldValidate, triggerAuthFlow, callbackRoute)

A redux middleware for handling user validation and (optional) redirection for login.

Sample usage:

import createOidcMiddleware, { createUserManager } from 'redux-oidc';

const config = {
  // userManager config object
}

const userManager = createUserManager(config, () => true, false, '/callback');

// a custom shouldValidate function
const shouldValidate = (state, action) => {
  return !action.type === 'DONT_VALIDATE';
}

const oidcMiddleware = createOidcMiddleware(userManager, shouldValidate);

Parameters:

• userManager required: a UserManager instance,
• shouldValidate default (state, action) => true: a function which gets the current state & action passed in. Returns true when validation should occur or false if it shouldn't,
• triggerAuthFlow default undefined: if true, the middleware triggers a redirect to the OpenID provider when the user is expired.
• callbackRoute default '/callback': the route where your <CallbackComponent /> is registered, e.g. '/callback'.

NOTE: When triggerAuthFlow is set to false, you can implement custom behavior. The userExpired action is dispatched when the current user is invalid. You can have your sagas/thunks/etc listen to this action and trigger custom behavior manually. See oidc-client-js's documentation for details on how to trigger the redirection manually.

---

<OidcProvider />

A React component registering the UserManager events with the action dispatchers.

Sample usage:

import { OidcProvider } from 'redux-oidc';
import { createStore } from 'redux';
import { createUserManager, Provider } from 'react-redux';

const userManager = createUserManager();
const store = createStore(/* your reducers */);

ReactDOM.render(
  <Provider store={store}>
    <OidcProvider store={store} userManager={userManager}>
      <MyApp />
    </OidcProvider>
  </Provider>,
  document.getElementById('app')
);

Properties:

• store required: the redux store,
• userManager required: The UserManager instance.

---

Reducer

There are reducers avaiable for both classic JS and apps using immutable. They both store the current user object under the user key in the redux state.

Sample usage:

import { reducer } from 'redux-oidc'; // classic JS
// OR
import { immutableReducer } from 'redux-oidc'; // immutable JS
import { combineReducers } from 'redux';
import { connect } from 'react-redux'; 

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

---

<CallbackComponent />

The callback component manages the token callback from the identity provider. A custom successCallback function is required to handle the redirect after the callback has been completed.

Sample usage:

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

class MyCallbackPage extends React.Component {
  successCallback = (user) => {
     // the url before redirection was triggered is passed into the user object
     // and can be accessed like this
     redirect(user.state.redirectUrl);
  };

  errorCallback = (error) => {
    console.error('There was an error handling the token callback: ' + error.message);
  }

  render() {
    return (
      <CallbackComponent successCallback={this.successCallback}>
        My custom content!
      </CallbackComponent>
    )
  }
}

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

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

Properties:

• successCallback required: A function which is called after the token callback was successfully processed.
• errorCallback optional: A function which is called after the token callback encountered an error,
• route optional: A string to pass to the user manager when calling signinRedirectCallback

---

createUserManager(config)

A function which returns a UserManager instance.

Usage example:

import { createUserManager } from 'redux-oidc';

const mgr = createUserManager();

Parameters:

• config optional: a config object for the UserManager. See oidc-client-js's wiki for more information.

---

processSilentRenew()

A function which is called when a silent renew is triggered. See silent renew for more information.

Usage example:

import { processSilentRenew } from 'redux-oidc';

processSilentRenew();

---