QUICKSTART.md

Quickstart

First step is to install the package.

$ npm install oidc-react

Setting up AuthProvider

AuthProvider is a Context and holds most of the functionality of this package. In order to make it work with your very own OIDC server, you'll have to either setup your own UserManager or use the shortcut. In this guide, we'll use our shortcuts.

Let's look at an example component.

import { AuthProvider } from 'oidc-react';

export default () => (
  <AuthProvider
    authority="http://oidc.io/oauth"
    clientId="my-client-id"
    redirectUri="http://myapp.com/"
  >
    <Layout>
      <Text>Hello world</Text>
    </Layout>
  </AuthProvider>
);

You can find the properties under the API documentation.

In the example above we've setup that we'll connect with a OIDC service located at http://oidc.io/oauth with the client id my-client-id. By default, our client automatically redirects us to login. This means that when wrapping anything with AuthProvider we'll be redirected once the app loads. After the user has successfully authenticated, our user will be redirected to http://myapp.com.

However, if we want the user to be sent to our dashboard when authenticated, we can add in a hook.

Let's look at another example for that!

import { AuthProvider } from 'oidc-react';

export default App = () => (
  <AuthProvider
    authority="http://oidc.io/oauth"
    clientId="my-client-id"
    redirectUri="http://myapp.com/"
    onSignIn={user => {
      // the `user` prop is actually the data the app received from `/userinfo` endpoint.
      history.go('/dashboard', user);
    }}
  >
    <Layout>
      <Text>Hello world</Text>
    </Layout>
  </AuthProvider>
);

In this example our user is now redirected once again, this time to /dashboard of our app.