How to delete Tokens and navigate to LoginScreen in React Native

Question

I have an React Native App which when the AccessToken refresh has failed it should logout the user and navigate him to the LoginScreen. I am trying to do this from a non-component, which means i cant use navigate like in my case:

This is the Method to refresh the Tokens using Apollo Client:

const linksFrom = from([
  new RetryLink({
    attempts: async (count, operation, error) => {
      if (count > 1 && error) {
        deleteTokens(navigation) //THIS WONT WORK SINCE CANT USE NAVIGATION IN NON COMPONENT
        return false;
      }
      await refreshLogin()
        .then(() => {
          return false;
        })
        .catch(() => {
          deleteTokens(navigation) //THIS WONT WORK SINCE CANT USE NAVIGATION IN NON COMPONENT
          return false;
        });
      return true;
    },
  }),
  graphqlAuthLink(),
  uploadLink,
]);

This is my method to delete the Tokens and perform the Logout:

const deleteTokens = async (navigation: StackNavigationProp<RootStackParamList, 'HomeApp'>) => {
  await SecureStore.deleteItemAsync('secure_access_token');
  await SecureStore.deleteItemAsync('secure_refresh_token');
  await SecureStore.deleteItemAsync('secure_user_token');
  await SecureStore.deleteItemAsync('secure_deviceid');
  await SecureStore.deleteItemAsync('current_curriculum');
  navigation.dispatch(StackActions.popToTop);
};

Is there any other way how to solve this so i can logout from anywhere in the App when the delete tokens is called?

Answer 1

It looks like you’re using react-navigation to handle your navigation. The navigators offer dynamic rendering; you can render different screens depending on whatever conditions you define. The docs have a good explanation of this process.