React Bindings for OneGraph's Authentication Client

Useful React components for working with OneGraph and React. It wraps the OneGraphAuth API automatically rerendering on Authentication changes.

Installation

Note: react-onegraph requires react@^16.3.0 to be installed as a peerDependency.

# yarn
yarn add react-onegraph

# npm
npm i --save react-onegraph

Usage

The package exports 3 parts: AuthProvider, AuthConsumer and AuthContext.

To get started, we have to wrap our application with an AuthProvider. It manages an instance of OneGraphAuth client and passes relevant data using the React Context API.

It takes only the OneGraph appId as props.

import {AuthProvider} from 'react-onegraph';

const APP_ID /* OneGraph appId */ = ReactDOM.render(
  <AuthProvider appId={APP_ID}>
    <App />
  </AuthProvider>,
  document.body,
);

Now one can use the AuthConsumer to get a status per service, request headers and login/logout methods. It implements the render props pattern and automatically updates and rerenders the status and headers on login/logout calls.

The AuthProvider will construct an instance of OneGraphAuth for you. If you want to manage your own instance of OneGraphAuth, you can provide it as the auth prop.

Render Props

| Property | Type |  Description | | -------- | ------------- | ---------------------------------------------------------------------- | | appId | (string) |  The OneGraph appId that was passed to the AuthProvider | | status | (Object) | A map of service-status pairs | | headers | (Object) | The authentication headers object that is used for API requests | | login | (Function) | A function that accepts a service name and an optional status callback | | logout |  (Function) | A function that accepts a service name and an optional status callbac |

import { AuthConsumer } from 'react-onegraph'

const YouTubeAuthentication = (
  <AuthConsumer>
    {({ status, login, logout }) => {
      if (status.youtube) {
        return (
          <div>
            You are logged in!
            <button onClick={() => logout("youtube")}>Logout</button>
          <div>
        )
      }

      return (
        <button onClick={() => login("youtube")}>
          Login
        </button>
      )
    }}
  </AuthConsumer>
)

Callbacks

The login and logout function take an optional second callback parameter. It receives the authentication status for the requested service and is invokes as soon as the login request is resolved.

import { AuthConsumer } from 'react-onegraph'

const YouTubeAuthentication = (
  <AuthConsumer>
    {({ login }) => {
      const loginYoutube = () => login('youtube', () => console.log("Logged in!"))

      return (
        <button onClick={loginYoutube}>
          Login
        </button>
      )
    )}
  </AuthConsumer>
)

Passing the headers

In order to query service data that requires authentication, we need to pass the auth headers to the request.

Apollo

If you're using Apollo there are basically two options to pass the headers. You can either wrap the AuthConsumer around your ApolloProvider and pass the apiId and headers once to the ApolloClient which is passed to the ApolloProvider.

Another option would be to pass the headers to each Query component separately.

import { AuthConsumer } from 'react-onegraph'
import { Query } from 'react-apollo'

const ONEGRAPH_QUERY = /* onegraph gql query */

const OneGraphQuery = (
  <AuthConsumer>
    {({ headers }) => (
      <Query
        query={ONEGRAPH_QUERY}
        context={{ headers }}>
        {({ loading, error, data }) =>  /* render something */}
      </Query>
    )}
  </AuthConsumer>
)

useContext hook

Note: Using hooks requires react @16.7.0-alpha.1 or @16.7.0-alpha.2

import { useContext } from 'react'
import { AuthContext } from 'react-onegraph'

const OneGraphWithHooks = {
  const { status, login, logout, headers, appId } = useContext(AuthContext)

  return (
    // render something
  )
}

License

react-onegraph is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @rofrischmann and all the great contributors.