React-Router requireAuth Maximum call stack size exceeded

help
1

Hi guys so I have this code

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router'

import App from './components/App'

import Dashboard from './components/dashboard/Dashboard'
import General from './components/dashboard/generel/General'

import Login from './components/auth/Login'
import Register from './components/auth/Register'
import ForgotPassword from './components/auth/ForgotPassword'
import NewPassword from './components/auth/NewPassword'
import Success from './components/Success'
import Packages from './components/auth/packages/Packages'
import Shops from './components/auth/packages/Shops'

import './accountsVerification.js'

function requireAuth () {
  Meteor.startup(() => {
    console.log(`requireAuth() ${Meteor.userId()}`)
    const user = Meteor.user()
    if (!user) {
      browserHistory.push('/login')
    } else {
      if (!user.profile.shopifyAccessToken) {
        if (!user.profile.packages) {
            browserHistory.push('/success/packages')
        } else {
            browserHistory.push('/success/shops')
        }
      }
    }
  })
}

const routes = (
  <Router history={browserHistory}>
   <Route path="/" component = {App}>
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
      <Route path="/forgot" component={ForgotPassword} />
      <Route path="/reset-password/:resetToken" component={NewPassword} />
      <Route path="/success" component={Success} onEnter={requireAuth}>
        <Route path="/success/packages" component={Packages} />
        <Route path="/success/shops" component={Shops} />
      </Route>
      <Route path="/dashboard" component={Dashboard} onEnter={requireAuth}>
        <IndexRoute component={General} />
      </Route>
    </Route>
  </Router>
)

Meteor.startup(() => {
  ReactDOM.render(routes, document.querySelector('#render-target'))
})

And when I try to go to a route that calls the requireAuth function , it is being called around 300 time then I am getting this exception Exception in delivering result of invoking 'login': RangeError: Maximum call stack size exceeded
It seems like something goes into an infinite loop, but I do not have any clue, please help.

EDIT:

So the problem was that I am redirecting to the same route that I am performing the check, so something like this makes this work


let c = 0
function requireAuth () {
  Meteor.startup(() => {
    console.log(c)
    console.log(`requireAuth() ${Meteor.userId()}`)
    const user = Meteor.user()
    if (!user) {
      browserHistory.push('/login')
    } else {
      if (!user.profile.shopifyAccessToken && c == 0) {
         if (!user.profile.packages) {
           c++
           browserHistory.push('/success/packages')
        } else {
          c++
          browserHistory.push('/success/shops')
         }
      }
    }
  })
}

However I wonder if there is any more elegant solution?

2

instead of explicitly pushing for different route, you should use callbacks.

try this instead:

function requireAuth (nextState, replace, callback) {
  Meteor.startup(() => {
    console.log(`requireAuth() ${Meteor.userId()}`)
    const user = Meteor.user()
    if (!user) {
      replace('/login')
      callback()
    } else {
      if (!user.profile.shopifyAccessToken) {
        if (!user.profile.packages) {
           replace('/success/packages')
           callback()
        } else {
           replace('/success/shops')
           callback()
        }
      }
    }
  })
}