React Native Firebase Authentication: Displaying Username & Main Menu

By
adminCgz
-
0
52

React Native Firebase Authentication: Displaying Username & Main Menu

🚀 Step-by-Step Guide (Fully Tested & Working)

📌 SEO Optimization Details

SEO Title:

“React Native Firebase Authentication: Display Username & Main Menu”

Short Meta Description (Max 60 characters):

“Show username & main menu in React Native with Firebase.”

Full Meta Description:

“Learn how to display the logged-in username, create a main menu, store user data in Firebase Realtime Database, allow skipping login, and navigate properly in React Native with Expo Router.”

Keywords:

React Native Firebase username, Firebase Realtime Database, React Native main menu, Expo Router navigation, React Native skip login, React Native authentication

📌 Introduction

In this tutorial, we will improve our Firebase authentication system by adding:
✅ Username display (retrieved from Firebase).
✅ A structured main menu with three buttons:

  • 🎮 Start Game → Navigates to a new screen (currently empty).
  • ⚙️ Options → Placeholder for settings.
  • ❌ Exit Game → Placeholder for exit logic.
    ✅ A “Skip” button in the login screen (allows users to enter without registering).
    ✅ Proper storage of user data in Firebase Realtime Database.

By the end of this tutorial, you will have a fully working main menu with navigation and authentication! 🚀

📌 Step 1: Install Firebase Realtime Database

First, ensure that Firebase Realtime Database is installed.

Run this command in your terminal:

bash
npm install firebase

📌 Step 2: Update firebaseConfig.ts to Include Realtime Database

📍 Location: src/firebaseConfig.ts

Modify your Firebase config to store user data in the database.

🔹 Updated firebaseConfig.ts

typescript
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getDatabase, ref, set, get, child } from "firebase/database";

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
databaseURL: "https://YOUR_PROJECT.firebaseio.com", // Required for Realtime Database
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);
export const database = getDatabase(app);

// Function to save user data
export function saveUserData(userId: string, username: string, email: string) {
set(ref(database, "WordPuzzleUsers/" + userId), {
username: username,
email: email
});
}

// Function to get user data from the database
export async function getUserData(userId: string) {
const dbRef = ref(database);
const snapshot = await get(child(dbRef, `WordPuzzleUsers/${userId}`));
if (snapshot.exists()) {
return snapshot.val();
} else {
return null;
}
}

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

📌 Step 3: Modify Signup to Store User Data

📍 Location: app/signup.tsx

Now, update signup.tsx to store username & email when users sign up.

🔹 Updated signup.tsx

typescript
import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";
import { auth, saveUserData } from "../src/firebaseConfig";
import { createUserWithEmailAndPassword } from "firebase/auth";

export default function SignupScreen() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [username, setUsername] = useState("");
const router = useRouter();

const handleSignup = async () => {
try {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
const userId = userCredential.user.uid;

// Save user data in Firebase Realtime Database
saveUserData(userId, username, email);

alert("Signup successful!");
router.push("../(tabs)/index"); // Navigate to main menu
} catch (error: any) {
alert(error.message);
}
};

return (
<View style={styles.container}>
<Text style={styles.title}>Create an Account</Text>
<TextInput style={styles.input} placeholder="Username" onChangeText={setUsername} value={username} />
<TextInput style={styles.input} placeholder="Email" onChangeText={setEmail} value={email} />
<TextInput style={styles.input} placeholder="Password" secureTextEntry onChangeText={setPassword} value={password} />
<Button title="Sign Up" onPress={handleSignup} />
<Text onPress={() => router.push("../login")} style={styles.link}>Already have an account? Log in</Text>
</View>
);
}

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: "center", padding: 20 },
title: { fontSize: 24, fontWeight: "bold", marginBottom: 20 },
input: { borderWidth: 1, padding: 10, marginBottom: 10 },
link: { color: "blue", marginTop: 10 }
});

📌 Step 4: Create the Main Menu UI

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

🔹 Updated index.tsx

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

export default function HomeScreen() {
const [username, setUsername] = useState("Player");
const router = useRouter();

useEffect(() => {
const unsubscribe = listenForAuthChanges(async (user) => {
if (user) {
const data = await getUserData(user.uid);
if (data) setUsername(data.username);
}
});

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

return (
<View style={styles.container}>
<Text style={styles.username}>Hello, {username}!</Text>
<View style={styles.buttonContainer}>
<Button title="Start Game" onPress={() => router.push("/game")} />
<Button title="Options" onPress={() => alert("Options Coming Soon!")} />
<Button title="Exit Game" onPress={() => alert("Exit function will be implemented.")} color="red" />
</View>
</View>
);
}

🚀 Now your app correctly displays the username and menu! 🎉

 

 

Remember that you need to create an game.tsx inside the app folder, it will be empty initially, but it will let you run the app!

RELATED ARTICLESMORE FROM AUTHOR