Developer Documentation: useLogout Hook

This documentation provides an explanation of the useLogout hook, which handles the logout process, cache clearing, and navigation reset in a Firebase-authenticated React Native application.

---

Overview

The useLogout hook:

1. Stops active Firestore snapshot listeners to free up resources.
2. Clears locally stored data using AsyncStorage.
3. Signs out the user from Firebase Authentication.
4. Resets the navigation stack to the login screen.

---

Features and Functionality

1. Stopping Snapshot Listeners

Purpose

• To terminate active Firestore snapshot listeners when the user logs out, preventing unnecessary resource usage.

Implementation

1. Functionality:

   • Uses a reference (unsubscribeRef) from the useFeed hook to access and stop active snapshot listeners.

2. Code Snippet:

   if (unsubscribeRef?.current) {
     unsubscribeRef.current(); // Unsubscribe from snapshot listener
     console.log('Snapshot listener stopped.');
   }
   

3. Process:

   • Checks if unsubscribeRef.current is defined before invoking it.
   • Logs the successful termination of the listener.

---

2. Clearing Cache

Purpose

• Clears all locally stored data using AsyncStorage to ensure no user-specific data persists after logout.

Implementation

1. Functionality:

   • Calls AsyncStorage.clear() to remove all data stored in the local device cache.

2. Code Snippet:

   const clearCache = async () => {
     try {
       await AsyncStorage.clear();
       console.log('AsyncStorage cleared.');
     } catch (error) {
       console.error('Error clearing AsyncStorage:', error);
       Alert.alert('Error', 'Failed to clear cache. Please try again.');
     }
   };
   

3. Process:

   • Logs a success message after clearing the cache.
   • Displays an error alert if clearing fails.

---

3. Signing Out

Purpose

• Logs the user out of Firebase Authentication.

Implementation

1. Functionality:

   • Uses Firebase's signOut method to sign the user out.

2. Code Snippet:

   await signOut(auth);
   

3. Process:

   • Ensures the user is signed out of the app.
   • Proceeds to reset the navigation stack after successful logout.

---

4. Resetting Navigation

Purpose

• Resets the navigation stack and redirects the user to the Login screen after logout.

Implementation

1. Functionality:

   • Uses React Navigation's StackActions.replace to reset the navigation history and navigate to the Login screen.

2. Code Snippet:

   navigation.dispatch(
     StackActions.replace('Login') // Clears navigation history
   );
   

3. Process:

   • Prevents users from navigating back to previous screens after logging out.

---

Key Properties and Methods

Property/Method	Description
clearCache	Clears all locally stored data using AsyncStorage.
handleLogout	Handles the complete logout process, including stopping listeners, clearing cache, signing out, and navigation reset.
unsubscribeRef	Reference to active snapshot listeners managed by the useFeed hook.

---

Error Handling

• Cache Clearing Errors:

  • Logs the error and displays an alert to the user if clearing AsyncStorage fails.

• Logout Errors:

  • Displays an alert if Firebase sign-out fails.

---

Notes

Dependency on useFeed

• The hook relies on the useFeed hook for accessing the unsubscribeRef. Ensure that useFeed properly sets up and manages the snapshot listener.

Navigation Reset

• The StackActions.replace method ensures the navigation stack is cleared, preventing the user from navigating back to previous screens after logout.

---

For additional information, refer to the Firebase Authentication Documentation and React Navigation Documentation.