React: Authentification and avoiding repeating code components

Question

All of my main react components have some parts like this:

export default class ExampleMain extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isAuthenticated: Meteor.userId() !== null
        }
    }

    componentWillMount() {
        if (!this.state.isAuthenticated) browserHistory.push('/login')
    }
    componentDidUpdate() {
        if (!this.state.isAuthenticated) browserHistory.push('/login')
    }
}

With this I am checking if a user is logged in. If this is false, the user will be redirected to login route. As this part is used in many components, I was thinking if I can optimize this to get a DRY code...

Update

I am using react router:

render((
    <Router history={ browserHistory }>
        <Route path='/' component={ App }>
            <IndexRoute component={ Main } />
            <Route path='login' component={ Login } />
            <Route path='content/:id' component={ Content } />
        </Route>
        <Redirect from='*' to='/' />
    </Router>
), document.getElementById('root'))

You can check it once then, in the constructor of the component that is in a Route that is the parent of all of these components. — Omri Aharon
– Omri Aharon, Commented Feb 9, 2017 at 21:27
I've updated the question to show you my routing example... So you mean to check on the App component, right? — user3142695
– user3142695, Commented Feb 9, 2017 at 21:30
Yes. You can use onEnter hook as well, and make that logic and redirect even before you render the App component. But since login route is nested, hook won't help you too much unless you change your routes order. (since App would have to be rendered anyway, you might want login to be outside) — Omri Aharon
– Omri Aharon, Commented Feb 9, 2017 at 21:34

Omri Aharon · Accepted Answer · 2017-02-10 07:59:06Z

2

You can try something like this:

<Router history={ browserHistory }>
    <Route path='/' component={ App }>
        <IndexRoute component={ Main } />
        <Route path='/login' component={ Login } />
        <Route path='content/:id' component={ Content } />
    </Route>
    <Redirect from='*' to='/' />
</Router>

And in App, using withRouter to "inject" the router inside your component:

import { withRouter } from 'react-router';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: Meteor.userId() !== null
        }
    }

    componentWillMount() {
        if (!this.state.isAuthenticated) {
           this.props.router.push('/login');
        }
    }
}

export default withRouter(App);

edited Feb 10, 2017 at 7:59

answered Feb 9, 2017 at 21:38

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3142695 Over a year ago

just asking... App is my main component, which gives me the wrapping main layout. This is always the same (navigation bar, background image, and so on). Also on login page. So I think I have to render App and do the authenfication for all other components...

Omri Aharon Over a year ago

You know your app's needs best, disregard my Login route suggestion then and get it back nested in App. I'll edit.

user3142695 Over a year ago

Close to working... But if user is logged out I get the error Warning: setState(...): Cannot update during an existing state transition

Omri Aharon Over a year ago

@user3142695 Did this work out eventually or are you still getting that error ?

Omri Aharon Over a year ago

Can you try moving the if (isAutheniticated chunk to componentWillMount instead of the constructor?

Community · Accepted Answer · 2017-05-23 12:24:21Z

1

Maybe this helps you. I would tried to use any hook before routing. But you always can extend your own class with such functionality like that example

function requireAuth(nextState, replace) {
  if (!auth.loggedIn()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

render((
  <Router history={ browserHistory }>
    <Route path='/' component={ App }>
      <IndexRoute component={ Main } />
      <Route path='login' component={ Login } />
      <Route path='content/:id' component={ Content } onEnter={requireAuth} />
    </Route>
    <Redirect from='*' to='/' />
  </Router>
), document.getElementById('root'))

To see full code follow link above.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 9, 2017 at 21:33

zhukva

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

React: Authentification and avoiding repeating code components

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related