How to use redux-auth-wrapper - 10 common examples

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 })
  }