React-native-router-flux: Setting up authentication to check if user is logged in

[jw84]

Hi,

I'm looking to set up the router to have this flow:

• If logged out then show Login/Register route
• if logged in then show Home route

Can anyone give me some hints what I need to set up for that to happen?

Should I make a constructor that checks to see if an user is logged in/out then set the initial={true} or {false}? Or should I rather redirect based on actions?

[aksonov]

Currently I'm doing following - Launch 'initial' screen will check logged/unlogged status then do redirect based on it.

[evgenyrodionov]

@aksonov please land it in userland with hooks onEnter and onLeave, because some developers want restrict certain scenes, not entire app.

[aksonov]

@theaqua #60 is created for that, closing this issue.

[thomasjonas]

@aksonov Sorry, but I have another question about this... I'm using the initial screen (launch) to check the user status and base my redirect on it. But what do you do when you logout? Is there are way to clear the complete route stack and transition to the login screen? I think this behaviour is possible in ExNavigator (https://github.com/exponentjs/ex-navigator/blob/master/ExNavigatorMixin.js#L61), is there a way to access those functions this project?

[jw84]

Would it make better sense to have Login be the initial that leads to Launch?

[thomasjonas]

I think Launch stands for a splash screen... There you could do an Ajax request to check authentication. Based on the outcome you would navigate to the right page. But maybe the login and launch could be the same component? And have the render function take care of showing the right view?

On 15 Dec 2015, at 07:55, Jerry Wang [email protected] wrote:

Would it make better sense to have Login be the initial that leads to Launch?

—
Reply to this email directly or view it on GitHub.

[jw84]

I got it figured out

For me I have now set as Launch checks for Parse.currentUser

If not found then show the auth options

I also pass extra custom data to Login for the switch case to display the corresponding SDK wrapper to save the auth data and logging into Parse

Which then kicks off to my TabView

I'm still trying to make sense of the new toys in 1.0.7 like renderLeftButton and renderRightButton, any insight there?

[jw84]

Also, is there a way to redirect by Actions rather than just return the TabView directly if the user is logged in?

    render() {
        var User = this.data.user
        if (!User) { 
            return (
                <View style={styles.container}>
                    <Text style={styles.logo}>Hello!</Text>
                    <Icon.Button name="facebook-official" backgroundColor="#3b5998" onPress={()=>Actions.login({data:"facebook", title:"Login with Facebook"})} size={32} width={220} borderRadius={0} padding={10}>
                        Login with Facebook
                    </Icon.Button>
                    <Icon.Button name="twitter-square" backgroundColor="#55acee" onPress={()=>Actions.login({data:"twitter", title:"Login with Twitter"})} size={32} width={220} borderRadius={0} padding={10}>
                        Login with Twitter
                    </Icon.Button>
                    <Icon.Button name="envelope" backgroundColor="#aaaaaa" onPress={()=>Actions.login({data:"email", title:"Login with Email"})} size={29} width={220} borderRadius={0} padding={10}>
                        Login with email
                    </Icon.Button>
                </View>
            ) 
        }
        return (<ActivitiesFeed />)
    }

[TangRufus]

@aksonov, can you provide an example of your Launch 'initial' screen redirect implementation?

In my app, this would throw an Cannot read property 'getCurrentRoutes' of undefined error

class Launch extends Component {
  render() {
    Actions.login();
  }
}

For reference, this works on button pressed:

class Launch extends Component {
  goLogin() {
    Actions.login();
  }

  render() {
    return (
      <View>
        <Button onPress={this.goLogin}>Go to Login page</Button>
      </View>
    );
  }
}

Thanks!

[jw84]

Related to #82

[ericraio]

@TangRufus I managed to hack around this issue until a proper fix is in place. It seems like it's a race condition issue.

    render() {
      setTimeout(() => {
        Actions.login();
      }, 50);
      return ( <View /> );
    }

[jw84]

Brilliant!

[joelcloralt]

I had the same issue but I solved it with action-store instead.

My initial route is set to Home.js, so in there I do the check:

var authenticationActions   = require('../authentication/authenticationActions');
....
mixins: [Reflux.listenTo(authenticationStore, 'onLoggedInStatus')],
componentDidMount: function(){
  authenticationActions.isLoggedIn();
},
onLoggedInStatus: function(event, status){  
  if (!status) {
    //not logged in, redirect
    routerActions.login();
  } else {
    //logged in, do your thing for this component
  }
},
render: function() {
  return(
    //here you can have a "loading view"
    ....
  )
}

In the authenticationStore:

isLoggedIn: function(){
  //do your check to see if you have a user stored and return logged in status
  var status = true;
  this.trigger('loggedInStatus', status);
},

Maybe you can turn this into a mixin and add it to the routes you want to protect behind authentication.

[nandhakumarskce]

I want to redirect the scene based on the authentication by firebase