React-native-router-flux: Protect scenes (authentication)

[dsvorc41]

I am trying to ensure that user will always be sent to login page if they are not currently logged in. I'm using Redux to store the current user id, so that's not the problem. The main problem is that no matter what checks I put in the router file, the app shows all the pages when I navigate to them. I tried using multiple solutions posted here (e.g. #66, #253) but none of them worked.

Any help would be greatly appreciated.

Version

react-native: 0.41.2
react-native-router-flux: 3.37.0

Expected behaviour

User should not have access to any scene except 'Login' when they're not logged in.

Actual behaviour

Routes are not protected no matter how where I place the check function within router file.

Code

 <Router sceneStyle={{ paddingTop: 65 }}>
      <Scene 
        key="splash" 
        component={Splash} 
        title="App" 
        timeout={500} 
        nextScene={'main'} 
        initial 
      />

      <Scene key="auth" >
        <Scene key="login" component={LoginForm} title="Please Login" />
      </Scene>

      <Scene key="profile">
        <Scene key="profilePage" component={ProfilePage} title="My Profile" />
      </Scene>

      <Scene key="main" >
        <Scene
          key="subscribedList"
          component={SubscribedList}
          title="Choose A List"
        />
        <Scene
          key="itemsList"
          component={ItemsList}
          onBack={() => Actions.subscribedList()}
        />
        <Scene
          key="createList"
          component={CreateList}
          title="Create A List"
        />
        <Scene
          key="createItem"
          component={CreateItem}
          title="Create Item"
        />
        <Scene
          key="compareItem"
          component={CompareItem}
          title="Found Item"
        />
      </Scene>
    </Router>

[cridenour]

We're going to need to see more code to be able to help. In general, I usually suggest making the initial scene the login page (or a loading page) and when you read the user_id from redux, make a call to Actions.login or Actions.main as needed.

[miklschmidt]

I just only render the router if the user is logged in. Simple and effective :)

[Amurmurmur]

@dsvorc41 In your splash screen, call an action to check the stored token from the previous login on componentDidMount()
In your action, have something like:

import {Actions} from 'react-native-router-flux'
checkAuth(){
    return getStoredSessionToken().then(sessionToken =>{
     if(sesstionToken)
      Actions.main()
     else
      Actions.auth()
})
}

Obviously in your getStoredSessionToken method you probably want to use AsyncStorage to get saved token, stored on the device from a previous login, if any.

Hopefully you get the idea 👍

[0mkara]

It would be really nice to have this feature built-in