I trying to redirect the user to the "TrapPage" if he is not logged in.

Here is my code:

function requireAuth(nextState, replace) {
    if (!auth.loggedIn()) {
        replace({ 
            pathname:'/trap'
        })
    }
}

export default (
    <Route path="/" ponent={App} onEnter={requireAuth}>
        <IndexRoute ponent={DashboardPage} />
        <Route path="trap">
            <IndexRoute ponent={TrapPage}/>
        </Route>
        <Route path="accounts">
            <IndexRoute ponent={AccountPage}/>
            <Route path="add" ponent={AccountAdd} />
            <Route path="detail/:id" ponent={AccountDetail} />
        </Route>
        <Route path="contacts">
            <Route path="detail/:id" ponent={ContactPage}/>
        </Route>
        <Route path="transmissors">
            <Route path="detail/:id" ponent={TransmissorPage}/>
        </Route>
        <Route path="attends" ponent={AttendancePage} />
        <Route path="reports" ponent={ReportPage} />
        <Route path="configs" ponent={ConfigurationPage} />
    </Route>
);

When I put the function requireAuth at onEnter, the console gives me an error:

Uncaught RangeError: Maximum call stack size exceeded

I am a begginer at React, please be patient :)

What is wrong at my code?

I trying to redirect the user to the "TrapPage" if he is not logged in.

Here is my code:

function requireAuth(nextState, replace) {
    if (!auth.loggedIn()) {
        replace({ 
            pathname:'/trap'
        })
    }
}

export default (
    <Route path="/" ponent={App} onEnter={requireAuth}>
        <IndexRoute ponent={DashboardPage} />
        <Route path="trap">
            <IndexRoute ponent={TrapPage}/>
        </Route>
        <Route path="accounts">
            <IndexRoute ponent={AccountPage}/>
            <Route path="add" ponent={AccountAdd} />
            <Route path="detail/:id" ponent={AccountDetail} />
        </Route>
        <Route path="contacts">
            <Route path="detail/:id" ponent={ContactPage}/>
        </Route>
        <Route path="transmissors">
            <Route path="detail/:id" ponent={TransmissorPage}/>
        </Route>
        <Route path="attends" ponent={AttendancePage} />
        <Route path="reports" ponent={ReportPage} />
        <Route path="configs" ponent={ConfigurationPage} />
    </Route>
);

When I put the function requireAuth at onEnter, the console gives me an error:

Uncaught RangeError: Maximum call stack size exceeded

I am a begginer at React, please be patient :)

What is wrong at my code?

• javascript
• reactjs
• stack-overflow
• react-router

1 Answer 1

You are requiring authentication on the same route that you redirect the user to if he is not logged in. That leads to an infinite loop of redirecting the user because he isn't logged in. Perhaps move out the <Route path="trap"> from underneath the routes that require authentication.

Also, you are missing a third parameter on your function.

function requireAuth(nextState, replace)

should be

function requireAuth(nextState, replace, cb) {

and once you are done with the authentication logic, you need to call cb as such:

function requireAuth(nextState, replace) {
    if (!auth.loggedIn()) {
        replace({ 
            pathname:'/trap'
        });
    }

    cb();
}

It's a callback function that will let the flow of the routing continue.

EDIT:

You could re-organize your routes as such:

<Route path="/" ponent={App}>
    <IndexRoute ponent={DashboardPage} />
    <Route path="trap">
        <IndexRoute ponent={TrapPage}/>
    </Route>
    <Route onEnter={requireAuth}>
        <Route path="accounts">
            <IndexRoute ponent={AccountPage}/>
            <Route path="add" ponent={AccountAdd} />
            <Route path="detail/:id" ponent={AccountDetail} />
        </Route>
        <Route path="contacts">
            <Route path="detail/:id" ponent={ContactPage}/>
        </Route>
        <Route path="transmissors">
            <Route path="detail/:id" ponent={TransmissorPage}/>
        </Route>
        <Route path="attends" ponent={AttendancePage} />
        <Route path="reports" ponent={ReportPage} />
        <Route path="configs" ponent={ConfigurationPage} />
   </Route>
</Route>

And then depending on wether you need authentication on your dashboard or not, you could potentially add the onEnter={requireAuth} to that route as well. This will separate out the routes that need authentication from the ones that don't.