react-onegraph
v4.0.2
React bindings for OneGraph
0/weekUpdated 3 years agoMITUnpacked: 350.3 KB
Published by sgrove
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.
``shyarn
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.
javascript
import {AuthProvider} from 'react-onegraph';const APP_ID / OneGraph appId / = ReactDOM.render(
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
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 |
`javascript
import { AuthConsumer } from 'react-onegraph'const YouTubeAuthentication = (
{({ status, login, logout }) => {
if (status.youtube) {
return (
You are logged in!
)
} return (
)
}}
)
`
$3
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.
`javascript
import { AuthConsumer } from 'react-onegraph'
const YouTubeAuthentication = (
{({ login }) => {
const loginYoutube = () => login('youtube', () => console.log("Logged in!"))
return (
)
)}
)
`
$3
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.
`javascript
import { AuthConsumer } from 'react-onegraph'
import { Query } from 'react-apollo'
const ONEGRAPH_QUERY = / onegraph gql query /
const OneGraphQuery = (
{({ headers }) => (
context={{ headers }}>
{({ loading, error, data }) => / render something /}
)}
)
`
useContext hook
> Note: Using hooks requires react @16.7.0-alpha.1 or @16.7.0-alpha.2
`javascript
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.