Check if logged in and redirect not working

[WwwappZ]

Hello,

I wrote this code but the there is no redirect to login.

My router is

<Router>
      <Stack key="root" hideNavBar="hideNavBar">
        <Scene key="Login" component={LoginPage}/>
        <Scene key="Startpage" component={RequireAuth(Startpage)}initial="initial"/>
      </Stack>
    </Router>

The RequireAuth is

export default function(ComposedComponent) {
  class Authentication extends Component {
    componentWillMount() {
      this.checkAuthentication(this.props);
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        //this.checkAuthentication(this.props);
      }
    }
    checkAuthentication() {
      if (!this.props.authenticated) {
      Actions.Login()
        console.log(this.props);
      } else {
        console.log("loiged in");
      }
    }
    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

The function ActionLogin() is not fired and there is no redirect to the login component

Please help

[omair2010]

same issue im looking for reason

[FernandoBravo]

Hi there, any good soul could help me on that ?

async componentDidMount(){
await this.getUserData('userdata');
if(GlobalData.userData.LoggedUser){
Actions.account();
}
}

I have the getUserData working fine, GlobalData.userData.LoggedUser comes back set to true
Actions.account() is defined on my App.js

      <Scene key="info" title="Minha Conta" icon={({title,focused}) => <FontAwesome name="user" color={focused?"red":"black"} size={28} />}>
        <Scene key="account" component={Account} title="Meus dados" initial />
        <Scene key="address" component={Address} title="Endereços" />
        <Scene key="products" component={Products} title="Produtos" />
      </Scene>  

and then I get this

[Unhandled promise rejection: TypeError: _reactNativeRouterFlux.Actions.account is not a function. (In '_reactNativeRouterFlux.Actions.account()', '_reactNativeRouterFlux.Actions.account' is undefined)]

• src\components\Form.js:19:6 in componentDidMount$

• node_modules@babel\runtime\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
• node_modules@babel\runtime\node_modules\regenerator-runtime\runtime.js:288:30 in invoke
• ... 13 more stack frames from framework internals

[omair2010]

did u import the {Actions} from 'react-native-flux-router' ?

[omair2010]

also u can do this
`

 <Scene key="info" title="Minha Conta" icon={({title,focused}) => <FontAwesome name="user" color={focused?"red":"black"} size={28} />}>
        <Scene key="account" component={Account} title="Meus dados" initial />
        <Scene key="address" component={Address} title="Endereços" />
        <Scene key="products" component={Products} title="Produtos" on={GlobalData.userData.LoggedUser} succes="account" />
      </Scene>  

`
i dont know exactly in any component u wanna add this i just gived u exemple u can use to do the same thing

[JamzWork]

Found a workaround.

Make Router Class based component, save user logged in state somewhere like I have save in async storage i.e commonData.IsUserLoggedIn

In Render method

render(){

return(
<Scene key="auth" hideNavBar={true} >
{(commonData.IsUserLoggedIn === 0) && <Scene type='reset' key="login" component={LoginForm} title = "Login" hideNavBar={true}/> }
<Scene ....

So when the Router Component is called, it will only show the Login Component if User is not logged in. You can toggle IsUserLoggedIn to 0 or 1 when the user log in or log out.

[kocho]

Working normally for me, have it as follows:

  <Router>
<Scene key={'root'} initial={true} component={InitialPage} hideNavBar on={validLogIn} success="loggedIn" failure="loggedOut">
</Scene>
<Scene key="loggedIn" hideNavBar type={ActionConst.RESET}>
    <Scene
        key={'landing'}
        component={LandingPage}
        title={'LandingPage'}
        passProps={true}
        initial
    />
</Scene>
<Scene key="loggedOut" hideNavBar showLabel={false} type={ActionConst.RESET}>
    <Scene
        key={'login'}
        component={Login}
        title={'Login'}
        passProps={true}
        initial
    />
</Scene>

Where validLogIn is a function returning true/false.

[arivanandan]

A couple of things don't work as they used / supposed to (from v1). For instance, Actions.currentScene lags a little and when the component receives updates, it still gives the previous scene.

To continue using the logic I had previously, I wrapped my rerouting logic inside a timeout.