What is It?

A simple React component and higher order function to facilitate authentication via U5-Auth (or rather, any OAuth2 provider).

Prerequisites

• The provider url, e.g. https://login.u5auth.com.
• OAuth2 client credentials, where the client is allowed to use the implicit flow.
• A React application, which is supposed to be secured via OAuth2 (or rather, needs an access_token to authenticate e.g. calls to APIs).

How

Setup

Client details need to be specified via the AuthContext component. The AuthContext must wrap any component that needs authentication, so the AuthContext is probably best placed high up in the component tree (maybe just above the router, if you use one):

First, import the AuthContext component:

import { AuthContext } from 'react-u5auth'

Then, wrap your component(s):

<AuthContext clientId={"123"} provider={"https://my-provider.com"}>
  <Router history={browserHistory}>
    // ...
  </Router>
</AuthContext>

Protecting Components

Now, the higher-order function authenticated can be used to ensure a valid access_token whenever the component gets rendered:

import { authenticated } from 'react-u5auth'

class SomeComponent extends React.Component {
  render() {
    return <p>Some component that needs an authenticated user...</p>
  }
}

const ProtectedComponent = authenticated()(SomeComponent)

const SomeOtherComponent = () => (<p>This is some other component</p>)
const ProtectedComponent = authenticated()(() => (<SomeOtherComponent />))

Instead of the higher-order function the hook useAuthentication can be used for the same purpose:

import { useAuthentication } from 'react-u5auth'

const SomeComponent = () => (
  <p>Some component that needs an authenticated user...</p>
)

const ProtectedComponent = () => {
  const { authenticated } = useAuthentication()

  if (!authenticated) {
    // This will appear only for a short time before the
    // redirect to the auth provider URL kicks in.
    return <p>Logging in...</p>
  } else {
    return <SomeComponent />
  }
}

Using the access_token

A protected component isn't too valuable on its own, you may need an access token when speaking to an API. Anywhere the access token can be accessed like this:

import { getLocalToken } from 'react-u5auth'

...
const token = getLocalToken()
...

The useAuthentication hook also returns the token:

const { authenticated, token } = useAuthentication()

Please note: There is something fishy here about the access_token being kept in global state. See this issue.

Status

It's fully functional, but does not deal with token expiry and/or certain error conditions yet. See the issues and/or add a new issue.