Higher order components for composing authorization into react apps
- Integrates with your existing components seamlessly
- Works with redux and other stores
Using npm:
npm install react-identity
Importing:
// Using ES6 transpiler
import ReactIdentity from 'react-identity'
// Or else
const ReactIdentity = require('react-identity')
react-identity provides withAuthorization HOC for composing authorization
class ExampleComponent extends Component {
render() {
return (<div>{this.props.user.name}</div>)
}
}Lets see how we can add authorization to this component
withAuthorization takes a config which in this case is [ 'admin', 'moderator' ] which is later used by the authorize function to check if the component can be rendered.
import React, { Component } from 'react'
import { withAuthorization } from 'react-identity'
class SampleComponent extends Component {
render() {
return (<div>Sample Component</div>)
}
}
export default withAuthorization(['admin', 'moderator'])(SampleComponent)In order for this to work, we need to configure AuthProvider with the authorize function
AuthProvider maintains the authData state and authorize function in its state and is passed as childContext, and the same is utilized by the withAuthorization HOC.
authorize function receives the requirements passed by the withAuthorization and userData from the state. The implementation of authorize function is left for the user.
import React, { Component } from 'react'
import { render } from 'react-dom'
import { AuthProvider } from 'react-identity'
import App from './components/App'
let authorize = (requirements, authData) => {
let userRole = authData.user.role
return requirements.some((role) => (role == userRole))
}
render(
<AuthProvider authorize={authorize}>
<App />
</AuthProvider>
, document.getElementById('app'))We have now setup the AuthProvider and withAuthorization but the userData is not yet present in the AuthProvider. authData can be directly sent as a prop to the AuthProvider, but for most cases this won't suffice, as authData needs to be dynamic and can be updated at any point of time. So, updater function can be used to update the authData at any point of time. This can be provided as a prop to the AuthProvider or can be accessed within the components using withUpdater HOC.
import React, { Component } from 'react'
import { render } from 'react-dom'
import { AuthProvider } from 'react-identity'
import App from './components/App'
let authorize = (requirements, authData) => {
let userRole = authData.user.role
return requirements.some((role) => (role == userRole))
}
let updater = (setAuthData) => {
let authData = { name: 'Sample User', role: 'admin' }
setAuthData(authData)
}
render(
<AuthProvider authorize={authorize} updater={updater}>
<App />
</AuthProvider>
, document.getElementById('app'))import React, { Component } from 'react'
import { withUpdater } from 'react-identity'
class SampleComponent extends Component {
handleOnClick = () => {
let authData = { user: { name: 'Sid', role: 'moderator' } }
this.props.updater(authData)
}
render() {
return (
<div>
Sample Component
<input type="button" value="Change user to Sid" onClick={this.handleOnClick} />
</div>
)
}
}
export default withUpdater()(SampleComponent)If the authData is stored in the redux, updates to the store can be subscribed by passing the updater function to the AuthProvider as follows
import React, { Component } from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { AuthProvider } from 'react-identity'
import { Provider as ReduxProvider } from 'react-redux'
import reducers from './reducers'
import App from './components/App'
const store = createStore(reducers)
let updater = (setAuthData) => {
// set the authData initially
setAuthData(store.getState().authData)
// subscribe to updates on the store to update the authData
store.subscribe(() => setAuthData(store.getState().authData))
}
render(
<ReduxProvider>
<AuthProvider updater={updater}>
<App />
</AuthProvider>
</ReduxProvider>
, document.getElementById('app'))If you want to render a custom element for unauthorized users, you can pass a react element to the withAuthorization's config as follows
import React, { Component } from 'react'
import { withAuthorization } from 'react-identity'
class SampleComponent extends Component {
render() {
return (<div>SampleComponent</div>)
}
}If you want to render a custom component for unauthorized users, you can pass a component to the withAuthorization's config as follows
import React, { Component } from 'react'
import { withAuthorization } from 'react-identity'
class SampleComponent extends Component {
render() {
return (<div>SampleComponent</div>)
}
}
class SampleUnauthorizedComponent extends Component {
render() {
return (<div>SampleUnauthorizedComponent</div>)
}
}
export default withAuthorization([ 'admin', 'moderator' ], { UnauthorizedComponent: SampleUnauthorizedComponent })(SampleComponent)The authData which is passed to the AuthProvider can be accessed via react context. We also provide a decorator withAuthData
import React, { Component } from 'react'
import { withAuthData } from 'react-identity'
class SampleComponent extends Component {
render() {
return (<div>{this.props.authData.user.name}</div>)
}
}
export default withAuthData()(SampleComponent)When a component needs to be rendered only when unauthorized, inverseAuth config can be sent to the withAuthorization
import React, { Component } from 'react'
import { withAuthorization } from 'react-identity'
class SampleComponent extends Component {
render() {
return (<div>SampleComponent</div>)
}
}
export default withAuthorization([], { inverseAuth: true })react-identity is released under the MIT license.