React native logout for inactivity

Marth 0
Viewed 35

I have to make a react-native app (not using expo nor hooks) that can login into a user, read some simple info and then logout through a logout button or automatically due to inactivity.

I have no issues with the login, setting the timer, nor the logout button, however I have no idea of how to detect 'inactivity', is this posible with states? and how exactly?

countdowntimer hybrid-mobile-app authentication react-native
2 Answers

General concensus seems to be to use PanResponder:

get user inactivity in react native

Check for Inactivity in a React Native App

state = {};
  _lastInteraction = new Date();
  _panResponder = {};

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
      onStartShouldSetPanResponderCapture: () => false,
      onMoveShouldSetPanResponderCapture: () => false,
      onPanResponderTerminationRequest: () => true,
      onShouldBlockNativeResponder: () => false,
    });

    this._maybeStartWatchingForInactivity();
  }

  _maybeStartWatchingForInactivity = () => {
    if (this._inactivityTimer) {
      return;
    }

    this._inactivityTimer = setInterval(() => {
      if (
        new Date() - this._lastInteraction >= TIME_TO_WAIT_FOR_INACTIVITY_MS
      ) {
        this._setIsInactive();
      }
    }, INACTIVITY_CHECK_INTERVAL_MS);
  };

  // NOTE: you almost certainly want to throttle this so it only fires
  // every second or so!
  _setIsActive = () => {
    this._lastInteraction = new Date();
    if (this.state.timeWentInactive) {
      this.setState({ timeWentInactive: null });
    }
    this._maybeStartWatchingForInactivity();
  };

  _setIsInactive = () => {
    this.setState({ timeWentInactive: new Date() });
    clearInterval(this._inactivityTimer);
    this._inactivityTimer = null;
  };

  render() {
    return (
      <View
        style={styles.container}
        collapsable={false}
        {...this._panResponder.panHandlers}>
        <Text style={styles.paragraph}>
          Put your app here
          {' '}
          {this.state.timeWentInactive &&
            `(inactive at: ${this.state.timeWentInactive})`}
        </Text>

        <Button
          title="Here is a button for some reason"
          onPress={() => alert('hi')}
        />
      </View>
    );
limco0

You can use import AsyncStorage from '@react-native-async-storage/async-storage';

So basically, whenever user visits the app, you can store the time in which user logged in.

like this

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@last_visited', new Date().toString())
  } catch (e) {
    // saving error
  }
}

and then when user again comes back to visit the app, you can check for the difference in that time and the time stored in Async storage.

first

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@last_visited')
    if(value !== null) {
     if(new Date() - value > 5){
// here check if time diff is what as per you is inactive then logout user
// for example ive kept 5 hours
logout()

}
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

Hope it helps. feel free for doubts

Gaurav Roy0
Related