API.md

react-context-oidc API Documentation

Provider

A simple Way to initiate the provider for the application. Usualy done in the index.js of the application

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { AuthenticationProvider } from 'react-context-oidc';

const oidcConfiguration = {
    /// Oidc configuration
}

const App = () => (
  <div>
    <Router>
      <AuthenticationProvider configuration={oidcConfiguration} loggerLevel={4} logger={console}>
        /// your application
      </AuthenticationProvider>
    </Router>
  </div>
);

Arguments :

• settings : oidc settings. See oidc-client wiki for further information.
• logger : Specify a logger (see logger section). Console by default console is used.
• loggerLevel : Specify a level of verbose. None level by default.

React-context-oidc need the rooter (for the oidc flow redirections). So you had to wrap your application in a react router.

Logger

React-context-oidc propose to set the logger and the level logger.

In the provider you can spécify a logger and a level logger.

• logger : Like for de oidc-client package, logger is a object that support debug, info, warn and error methods that accepts a list a message to print. By default the standard console object is used.
• loggerLevel : verbosity of react-context-oidc Logger and oidc-client logger. You can set a number (0 : None, 1 : Error, 2 : Warn, 3: Info, 4: Debug) or using oidcLog.NONE, oidcLog.ERROR , oidcLog.WARN , oidcLog.INFO or oidcLog.DEBUG. By default None is selected.

Consummer

When the user is connected, Api Context Consummer AuthenticationConsumer provide props and functions :

• oidcUser : Object for the currently authenticated user returned by oidc Client (see oidc client Wiki)
• login : Function without parameter that launch the redirect authentication
• logout : Function without function that launch te redirect logout
• error : Error if happens
• isLoading : True when the component is loading

Usage :

import React from 'react';
import { AuthenticationConsumer } from 'react-context-oidc';

export const myComponent = ()=>{
<AuthenticationConsumer>
  {oidcProps =>{
    return(
      {props.oidcUser ? (
        <H1>Hello {oidcProps.oidcUser.profile.name}</H1>
        <button onClick={props.logout}>logout</button>
      ) : (
        <button onClick={props.login}>login</button>
      )}
    )
  }
}
</AuthenticationConsumer>
}

OidcSecure

A component to wrap another one and protect it.

Usage :

import React from 'react';
import { OidcSecure } from 'react-context-oidc';

export const Admin = props => (
  <OidcSecure>
    <h1>Admin</h1>
    <p>Protected Admin</p>
  </OidcSecure>
);

withOidcSecure

A Hoc to protected a component (in a container or in a router for example)

Usage :

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { withOidcSecure } from 'react-context-oidc';
import Home from 'Pages/Home';
import Dashboard from 'Pages/Dashboard';

const Routes = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/dashboard" component={withOidcSecure(Dashboard)} />
    <Route path="/home" component={Home} />
  </Switch>
);

export default Routes;

withOidcUser

A Hoc that inject the oidc User

Usage :

import React from 'react';
import { withOidcUser } from 'react-context-oidc';

const Component = ({ oidcUser }) => (
  <span>
     Bonjour {oidcUser.profile.name}
  </span>
);

export default withOidcUser(Component);