The repository was moved to the official OneGraph organisation.
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.
const APP_ID = /* OneGraph appId */ ReactDOM
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.
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 |
const YouTubeAuthentication = <AuthConsumer> { if statusyoutube return <div> You are logged in! <button onClick= >Logout</button> <div> return <button onClick= > 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.
const YouTubeAuthentication = <AuthConsumer> { const loginYoutube = 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.
const ONEGRAPH_QUERY = /* onegraph gql query */ const OneGraphQuery = <AuthConsumer> <Query query=ONEGRAPH_QUERY context= headers > /* render something */ </Query> </AuthConsumer>
useContext hook
Note: Using hooks requires react @16.7.0-alpha.1 or @16.7.0-alpha.2
const OneGraphWithHooks = const status login logout headers appId = 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.