React Native Firebase Authentication: Keep Users Logged In

By
adminCgz
-
0
76

🚀 A Complete Guide to User Session Management in Expo Router

📌 SEO Title:

“React Native Firebase Authentication: How to Keep Users Logged In”

📌 Short Meta Description (Max 60 characters):

“Keep users logged in with Firebase in React Native.”

📌 Full Meta Description:

“Learn how to implement Firebase Authentication in React Native with Expo Router. This step-by-step guide explains session management, logout handling, and user redirection.”

📌 Keywords:

React Native authentication, Firebase session management, keep users logged in React Native, Firebase auth persistence, React Native login, Expo Router authentication

📌 Introduction

One of the most important features of any mobile app is user authentication. But what happens when a user closes the app and reopens it? Should they log in again every time? No!

Using Firebase Authentication in React Native, we can keep users logged in and automatically redirect them to the correct screen.

In this tutorial, we’ll implement: ✅ Persistent user authentication (stay logged in after closing the app).
✅ Automatic redirection (navigate based on login status).
✅ Logout handling (hide the logout button if not logged in).

By the end of this guide, your React Native app will have full user session management! 🚀

📌 Step 1: Install Firebase & Navigation Dependencies

Before we begin, make sure you have Firebase Authentication and React Navigation installed.

Run this command in your terminal:

bash
npm install firebase @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated expo-router

🔍 What Are These Dependencies?

  • firebase → Firebase SDK for authentication.
  • @react-navigation/native → Core navigation library.
  • @react-navigation/stack → Enables navigation between screens.
  • Other packages → Required for React Native navigation and gestures.

📌 Step 2: Modify firebaseConfig.ts to Track User Session

We need to listen for authentication state changes in Firebase.

📍 Location: src/firebaseConfig.ts

🔹 Updated firebaseConfig.ts

typescript
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

// Function to track authentication state
export function listenForAuthChanges(callback: (user: any) => void) {
return onAuthStateChanged(auth, callback);
}

🔍 Explanation:

  • onAuthStateChanged(auth, callback) → Tracks if a user logs in or out.
  • listenForAuthChanges() → Calls the callback function when auth state changes.

📌 Step 3: Automatically Redirect Users Based on Login Status

Now, we will check if a user is logged in or not when they open the app.

📍 Location: app/_layout.tsx

🔹 Modify _layout.tsx

typescript
import { Stack, useRouter } from "expo-router";
import { useEffect, useState } from "react";
import { listenForAuthChanges } from "../src/firebaseConfig";

export default function Layout() {
const [user, setUser] = useState(null);
const router = useRouter();

useEffect(() => {
const unsubscribe = listenForAuthChanges((user) => {
setUser(user);
if (user) {
router.replace("/(tabs)/index"); // Redirect to home if logged in
} else {
router.replace("/login"); // Redirect to login if not logged in
}
});

return () => unsubscribe(); // Cleanup the listener
}, []);

return <Stack />;
}

🔍 Explanation:

  • useEffect() → Runs once when the app starts.
  • listenForAuthChanges() → Calls Firebase to track login/logout state.
  • router.replace() → Redirects:
    • ✅ If logged in → Go to index.tsx (home screen).
    • ❌ If not logged in → Go to login.tsx.

📌 Step 4: Show/Hide Logout Button Based on User Status

📍 Location: app/(tabs)/index.tsx

Now, we will modify the home screen so that:

  • ✅ The logout button only appears if the user is logged in.
  • ❌ If not logged in, the button is hidden.

🔹 Modify index.tsx

typescript
import { View, Text, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";
import { auth, listenForAuthChanges } from "../../src/firebaseConfig";
import { signOut } from "firebase/auth";
import { useEffect, useState } from "react";

export default function HomeScreen() {
const [user, setUser] = useState(null);
const router = useRouter();

useEffect(() => {
const unsubscribe = listenForAuthChanges((user) => {
setUser(user);
});

return () => unsubscribe();
}, []);

const handleLogout = async () => {
try {
await signOut(auth);
router.replace("/login"); // Redirect to login screen after logout
} catch (error: any) {
alert(error.message);
}
};

return (
<View style={styles.container}>
<Text style={styles.title}>Welcome to Word Puzzle Game!</Text>
{!user ? (
<>
<Button title="Go to Login" onPress={() => router.push("/login")} />
<Button title="Go to Signup" onPress={() => router.push("/signup")} />
</>
) : (
<Button title="Logout" onPress={handleLogout} color="red" />
)}
</View>
);
}

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: "center", alignItems: "center", padding: 20 },
title: { fontSize: 24, fontWeight: "bold", marginBottom: 20 }
});

🔍 Explanation:

  • useState(null) → Stores the logged-in user.
  • useEffect() → Listens for auth state changes.
  • !user ? (...) : (...) →
    • If logged in: Show only the Logout button.
    • If not logged in: Show Login and Signup buttons.

🚀 Now, the Logout button will ONLY show when a user is logged in!

📌 Step 5: Restart and Test

Run your app again:

bash
npx expo start

✅ Test These Scenarios:

  1. Open the app → If logged in, you should see the home screen with Logout.
  2. Close and reopen the app → You should still be logged in.
  3. Click “Logout” → You should return to the login screen, and the Logout button should disappear.
  4. Try logging in again → You should see the Logout button after login.

🚀 Now your app correctly handles session management! 🎉

🎯 What’s Next?

Now that authentication is fully functional, we will:
✔️ Start building the word puzzle game UI.
✔️ Display the player’s username after login.
✔️ Connect Firebase Realtime Database to store player progress.

Stay tuned for Part 4! 🔥

💡 Got any questions? Drop a comment below! 🚀

RELATED ARTICLESMORE FROM AUTHOR