-
Notifications
You must be signed in to change notification settings - Fork 241
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Difficulties integrating UserAuthWrapper into react-boilerplate #40
Comments
@katcu do you have a branch you are trying this on that I could look at? I haven't used that boilerplate but it should integrate cleanly |
hold on pls... @mjrussell |
@mjrussell
change the /app/routes.js code as following:
|
Hi, pls check out my branch of issue repoduction https://github.com/katcu/redux-form-with-react-boilerplate/tree/redux-auth-wrapper-with-react-boilerplate |
@katcu thanks Im going to look into this today |
@katcu If you want to apply the wrapper HOC in the routes file you can do the following: edit: There can be some unnecessary mount/unmounting when applying HOCs inside getComponent because each time the route is rendered, a new component is returned from the HOC. See #44 for details. This can result in poor performance/subtle bugs. Instead scroll down to see how to apply the HOC inside the Component file // These are the pages you can go to.
// They are all wrapped in the App component, which should contain the navbar etc
// See http://blog.mxstbr.com/2016/01/react-apps-with-pages for more information
// about the code splitting business
import { getHooks } from './utils/hooks';
import { routerActions } from 'react-router-redux'
import { UserAuthWrapper } from 'redux-auth-wrapper'
const errorLoading = (err) => {
console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
};
const loadModule = (cb, hoc) => (componentModule) => {
if (hoc) {
cb(null, hoc(componentModule.default));
} else {
cb(null, componentModule.default);
}
};
const UserIsAuthenticated = UserAuthWrapper({
authSelector: state => null,
predicate: authData=>false,
redirectAction: routerActions.replace,
wrapperDisplayName: 'UserIsAuthenticated'
});
export default function createRoutes(store) {
// create reusable async injectors using getHooks factory
const { injectReducer, injectSagas } = getHooks(store);
return [
{
path: '/',
name: 'home',
getComponent(nextState, cb) {
const importModules = Promise.all([
System.import('containers/HomePage/reducer'),
System.import('containers/HomePage/sagas'),
System.import('containers/HomePage'),
]);
const renderRoute = loadModule(cb, UserIsAuthenticated);
importModules.then(([reducer, sagas, component]) => {
injectReducer('home', reducer.default);
injectSagas(sagas.default);
renderRoute(component);
});
importModules.catch(errorLoading);
},
}, {
path: '/features',
name: 'features',
getComponent(nextState, cb) {
System.import('containers/FeaturePage')
.then(loadModule(cb))
.catch(errorLoading);
},
}, {
path: '*',
name: 'notfound',
getComponent(nextState, cb) {
System.import('containers/NotFoundPage')
.then(loadModule(cb))
.catch(errorLoading);
},
},
];
} Alternatively, you could move the user wrapper into the component definition Using decorators: (assuming you add the @UserIsAuthenticated
export class HomePage extends React.Component {
... Or just regular HOC application: ...
// Wrap the component to inject dispatch and state into it
export default UserIsAuthenticated(connect(createSelector(
selectRepos(),
selectUsername(),
selectLoading(),
selectError(),
(repos, username, loading, error) => ({ repos, username, loading, error })
), mapDispatchToProps)(HomePage)); |
@mjrussell Thank you for looking into this. The way that use |
@mjrussell your approach work like magic! |
Recently solved this problem thanks to this issue. I noticed this important warning in main page that:
I guess we can't use |
@hurkanyakay Yeah good point. We realized afterwards that the |
Hi all, |
@JustinJKlein it is up to you to decide where you want to define your HOC wrappers. I see many examples (and my own projects) create a file So it might look something like: import { UserAuthWrapper } from 'redux-auth-wrapper'
// Redirects to /login by default
export const UserIsAuthenticated = UserAuthWrapper({
authSelector: state => state.user, // how to get the user state
redirectAction: routerActions.replace, // the redux action to dispatch for redirect
wrapperDisplayName: 'UserIsAuthenticated' // a nice name for this auth check
}); MyComponent.js import React, { Component } from 'react';
import { UserIsAuthenticated } from './authWrappers';
class MyComponent extends Component {
render() {
return <h1>Renders a thing</h1>;
}
}
export default UserIsAuthenticate(MyComponent); |
Hi there, im currently trying to add auth to my navigation bar (based react-boilerplate). After some help from @mjrussell yesterday, i could make it work for containers generelly (thanks mate :) ) However now i want to use this approach (readme code example):
My Header(navigation) container looks like this:
I would like to enable/disable HeaderLinks Component using a authWrapper. Thanks in advance! :) |
@LearningDave please see the section in the Readme on Hiding and Alternate Components which is I think what you are asking. You dont want the redirection in this case |
Im doing the job integrates redux-auth-wrapper with react-boilerplate,(referred blog) it did not redirect to '/login' by default even set
[predicate(authData): Bool] (Function)
to false. Please help!@mjrussell @johnwiseheart @cab @gaearon @DveMac @mxstbr
The text was updated successfully, but these errors were encountered: