Check if user logged in / persist user info react native

Question

I have been following the documentation on React Native to build my app.
I am tyring to log a user in and be able to check if user is logged in or user data exists.

This is what i tried so far but i can't really see what i am doing wrong.

var starterApp  = React.createClass(
{
    user:{},

    getInitialState()
    {
        console.log('initial state');
        return {isLoggedIn:this.isLoggedIn ? this.isLoggedIn : 0};
    },
    componentWillMount()
    {
        console.log('will mount');
        console.log(this.state.isLoggedIn);
        //this.state.isLoggedIn = 1;
        //this.setState({isLoggedIn:1});
        //this.user= {name:'john', lastName:'doe'};
    },

    observe(){
        console.log('observe');
    },
    componentDidMount()
    {
        console.log('mounted');
    },
    render()
    {
        console.log('rendered');
        return (
            <View style={styles.container}>
                <Text>
                    {'YOOOO'}
                </Text>
                <Text>
                    {this.state.isLoggedIn}
                </Text>
            </View>
        );
    }
});

In componentWillMount funcion, i am setting the status and then commenting it out. After that when i refresh, It goes back to initial state. How can i persist the data of a user for next refreshes until i log him out. It needs to be persisting.

Thanks in advance.

Answer 1

AsyncStorage is the way to go.

You can use get/set methods to set storage keys based on your session information. I started off trying to use localStorage to store state, but whilst this works with debug sessions (if you are using chrome/safari to debug), it doesn't work when you run the app on an actual device.

A simple way to do it would be to use something like -

AsyncStorage.setItem('userSession', JSON.stringify(sessionData));

For when you want to save your session and -

AsyncStorage.getItem('userSession', 
  (rawData) => {
    this.setState({session: JSON.parse(rawData)});
  },
  (error) => {
    // whatever you want to do here.
  }
);`

For when you want to restore it.

I'm using Fluxxor for my app at the moment, so I can choose which stores I want to save by cycling through them with AsyncStorage.multiSet . I can also restore all of them on initialisation of the app with AsyncStorage.multiGet .

The only thing I would caution you about is that the storage is asynchronous, so if you have an error it may be because you have initialised a part of your app before the AsyncStorage has given you a response. In the case of the app code that you are working on above, you may get a brief period of time where the app is rendered without the data, so you may need some kind of placeholder for that loading time, or delay rendering.

Answer 2

For storing whether a user is logged in, you general want to use sessions, where the users cookie will allow them to access a saved state on the server. The implementation of sessions will depend on what you are using for your server. For storing info not related to authentication, you can use local storage to save the user state.