redux-modular-auth
v1.5.0
Published
Manage auth state with ease.
Downloads
4
Readme
redux-modular-auth
Manage auth state with ease.
Installation
yarn add redux-modular-auth
Usage Example
Authentication
The store should know how to handle actions. To enable this, we need to create the authReducer to your store. It serves for all of your auth related state, so you only have to pass it once.
Create auth reducer
import { createStore, combineReducers } from 'redux';
import { createSelector } from 'reselect';
import R from 'ramda';
import { createReducer, login, logout, isAuthenticated } from 'redux-modular-auth';
const rootReducer = combineReducers({
auth: createReducer(),
});
const store = createStore(rootReducer);
const { getState, dispatch } = store;
expect(getState()).toEqual({
auth: {
credentials: {},
},
});
Dispatch actions to update state
Login with credentials
const credentials = {
objectId: 'MY_USER_ID',
sessionToken: 'MY_SESSION_TOKEN',
};
dispatch(login(credentials));
expect(getState()).toEqual({
auth: {
credentials: {
objectId: 'MY_USER_ID',
sessionToken: 'MY_SESSION_TOKEN',
},
},
});
Check if user is logged in
const mapStateToProps = createStructuredSelector({
isAuthenticated,
});
expect(mapStateToProps(getState())).toEqual({
isAuthenticated: true,
});
Logout
dispatch(logout());
expect(getState()).toEqual({
auth: {
credentials: {},
},
});
expect(mapStateToProps(getState())).toEqual({
isAuthenticated: false,
});
requireAuth
Higher order component controlling component to render depending on auth state.
import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { mount } from 'enzyme';
import compose from 'recompose/compose';
import { requireAuth, createReducer, login } from 'redux-modular-auth';
const rootReducer = combineReducers({
auth: createReducer(),
});
const store = createStore(rootReducer);
const { getState, dispatch } = store;
expect(getState()).toEqual({
auth: {
credentials: {},
},
});
/*
Component to be protected
*/
const AuthenticatedRequiredComp = () => <div id="authenticated-required" />;
/*
Component to be rendered if isAuthenticated is false
*/
const UnauthenticatedComponent = () => <div id="unauthenticated-component" />;
const EnhancedComp = compose(
requireAuth({
UnauthenticatedComponent,
}),
)(AuthenticatedRequiredComp);
const wrapper = mount(
<Provider store={store}>
<EnhancedComp />
</Provider>,
);
/*
Not yet authenticated, so it shouldn't contains authenticated required components.
Instead, there should be UnauthenticatedComponent
*/
expect(wrapper.contains(<div id="authenticated-required" />)).toBe(false);
expect(wrapper.contains(<div id="unauthenticated-component" />)).toBe(true);
const credentials = {
objectId: 'MY_USER_ID',
sessionToken: 'MY_SESSION_TOKEN',
};
dispatch(login(credentials));
/*
Should contains authenticated required components.
*/
expect(wrapper.contains(<div id="authenticated-required" />)).toBe(true);
expect(wrapper.contains(<div id="login-component" />)).toBe(false);