Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'redux-auth-wrapper' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
const buildRoutes = (store, onLogPageView, defaultRoute, features, userManager) => {
const UserIsAuthenticated = UserAuthWrapper({
authSelector: state => state.oidc.user,
authenticatingSelector: state => state.oidc.isLoadingUser,
LoadingComponent: LoadingAuth,
redirectAction: () => { userManager.signinRedirect(); },
wrapperDisplayName: 'UserIsAuthenticated'
// /login is the default, but putting it here for notes to future self
});
const getComponent = component => features.authEnabled ? UserIsAuthenticated(component) : component;
const router = (
{features.trust !== false ?
import React from 'react'
import { Route } from 'react-router'
import { replace } from 'react-router-redux'
import { UserAuthWrapper } from 'redux-auth-wrapper'
import App from './containers/App'
import InitialPage from './pages/InitialPage'
import LoginPage from './pages/LoginPage'
import HomePage from './pages/HomePage'
const UserIsAuthenticated = UserAuthWrapper({
authSelector: state => state.user, // how to get the user state
redirectAction: replace, // the redux action to dispatch for redirect
wrapperDisplayName: 'UserIsAuthenticated', // a nice name for this auth check
failureRedirectPath: '/login',
//predicate: user => user.loggedIn,
})
const routes = (
)
import React from 'react'
import { Route } from 'react-router'
import { replace } from 'react-router-redux'
import { UserAuthWrapper } from 'redux-auth-wrapper'
import App from './containers/App'
import InitialPage from './pages/InitialPage'
import LoginPage from './pages/LoginPage'
import HomePage from './pages/HomePage'
const UserIsAuthenticated = UserAuthWrapper({
authSelector: state => state.get('user'), // how to get the user state
redirectAction: replace, // the redux action to dispatch for redirect
wrapperDisplayName: 'UserIsAuthenticated', // a nice name for this auth check
failureRedirectPath: '/login',
//predicate: user => user.loggedIn,
})
const routes = (
)
import { UserAuthWrapper } from 'redux-auth-wrapper'
import { routerActions } from 'react-router-redux'
export const UserIsAuthenticated = UserAuthWrapper({
authSelector: state => state.user.data,
redirectAction: routerActions.replace,
failureRedirectPath: '/', // '/login' by default.
wrapperDisplayName: 'UserIsAuthenticated'
})
export const UserIsNotAuthenticated = UserAuthWrapper({
authSelector: state => state.user,
redirectAction: routerActions.replace,
failureRedirectPath: (state, ownProps) => ownProps.location.query.redirect || '/dashboard',
wrapperDisplayName: 'UserIsNotAuthenticated',
predicate: user => user.data === null,
allowRedirectBack: false
})
export const UserIsAdmin = function() {
const isAdmin = UserAuthWrapper({
authSelector: state => state.account.get('user'),
predicate: userUtils.isAdmin,
redirectAction: replace,
failureRedirectPath: '/',
wrapperDisplayName: 'UserIsAdmin',
// In UserIsAuthenticated we should allow to redirect to some page from login page.
// But if already some authenticated user will try access an admin page it will
// redirect him to / and then he won't be able to redirect back the to admin page.
allowRedirectBack: false
});
return isAdmin(UserIsAuthenticated(...arguments));
};
const composedEnhancers = compose(
applyMiddleware(...middlewares),
...enhancers,
);
const store = createStore(
rootReducer,
initialState,
composedEnhancers,
);
/* See: https://github.com/reactjs/react-router-redux/issues/305 */
export const history = isClient ?
syncHistoryWithStore(browserHistory, store) : undefined;
export const userIsAuthenticated = userAuthWrapper({
authSelector: state => state.app.user,
redirectAction: routerActions.replace,
failureRedirectPath: '/login',
wrapperDisplayName: 'userIsAuthenticated',
});
export const userIsAdmin = userAuthWrapper({
authSelector: state => state.app.user,
redirectAction: routerActions.replace,
failureRedirectPath: '/',
wrapperDisplayName: 'userIsAdmin',
predicate: user => user.role === 'admin',
});
/* Hot reloading of reducers. How futuristic!! */
if (module.hot) {
);
/* Hopefully by now you understand what a store is and how redux uses them,
* But if not, take a look at: https://github.com/reactjs/redux/blob/master/docs/api/createStore.md
* And https://egghead.io/lessons/javascript-redux-implementing-store-from-scratch
*/
const store = createStore(
rootReducer,
initialState,
composedEnhancers,
);
/* See: https://github.com/reactjs/react-router-redux/issues/305 */
export const history = syncHistoryWithStore(browserHistory, store);
export const userIsAuthenticated = userAuthWrapper({
authSelector: state => state.authReducer.user,
redirectAction: routerActions.replace,
failureRedirectPath: '/login',
wrapperDisplayName: 'userIsAuthenticated',
});
/* Hot reloading of reducers. How futuristic!! */
if (module.hot) {
module.hot.accept('./reducers', () => {
/*eslint-disable */ // Allow require
const nextRootReducer = require('./reducers').default;
/*eslint-enable */
store.replaceReducer(nextRootReducer);
});
}
/* Hopefully by now you understand what a store is and how redux uses them,
* But if not, take a look at: https://github.com/reactjs/redux/blob/master/docs/api/createStore.md
* And https://egghead.io/lessons/javascript-redux-implementing-store-from-scratch
*/
const store = createStore(
rootReducer,
initialState,
composedEnhancers,
);
/* See: https://github.com/reactjs/react-router-redux/issues/305 */
export const history = isClient ?
syncHistoryWithStore(browserHistory, store) : undefined;
export const userIsAuthenticated = userAuthWrapper({
authSelector: state => state.app.user,
redirectAction: routerActions.replace,
failureRedirectPath: '/login',
wrapperDisplayName: 'userIsAuthenticated',
});
export const userIsAdmin = userAuthWrapper({
authSelector: state => state.app.user,
redirectAction: routerActions.replace,
failureRedirectPath: '/',
wrapperDisplayName: 'userIsAdmin',
predicate: user => user.role === 'admin',
});
/* Hot reloading of reducers. How futuristic!! */
if (module.hot) {
import { UserAuthWrapper } from 'redux-auth-wrapper'
import { routerActions } from 'react-router-redux'
export const UserIsAuthenticated = UserAuthWrapper({
authSelector: state => state.user.data,
redirectAction: routerActions.replace,
failureRedirectPath: '/', // '/login' by default.
wrapperDisplayName: 'UserIsAuthenticated'
})
export const UserIsNotAuthenticated = UserAuthWrapper({
authSelector: state => state.user,
redirectAction: routerActions.replace,
failureRedirectPath: (state, ownProps) => ownProps.location.query.redirect || '/dashboard',
wrapperDisplayName: 'UserIsNotAuthenticated',
predicate: user => user.data === null,
allowRedirectBack: false
})
dispatch({
type: UNAUTHED_REDIRECT,
payload: { message: 'User is not authenticated.' }
})
}
})
/**
* @description Higher Order Component that redirects to listings page or most
* recent route instead rendering if user is not authenticated. This is useful
* routes that should not be displayed if a user is logged in, such as the
* login route.
* @param {Component} componentToWrap - Component to wrap
* @return {Component} wrappedComponent
*/
export const UserIsNotAuthenticated = UserAuthWrapper({
// eslint-disable-line new-cap
wrapperDisplayName: 'UserIsNotAuthenticated',
allowRedirectBack: false,
LoadingComponent: LoadingSpinner,
failureRedirectPath: (state, props) =>
// redirect to page user was on or to list path
LIST_PATH,
authSelector: ({ firebase: { auth } }) => auth,
authenticatingSelector: ({ firebase: { auth, isInitializing } }) =>
!auth.isLoaded || isInitializing,
// predicate: auth => auth === null,
predicate: auth => auth.isEmpty,
redirectAction: newLoc => dispatch => {
dispatch(push(newLoc))
dispatch({ type: AUTHED_REDIRECT })
}