React Native App Development – Part 2: Implementing Firebase Authentication

By
adminCgz
-
0
37

🚀 A Complete Step-by-Step Guide for Beginners

🔹 SEO Title:

“React Native Firebase Authentication: A Beginner’s Guide with Expo Router”

🔹 SEO Meta Description:

“Learn how to implement Firebase Authentication in a React Native app using Expo Router and TypeScript. This step-by-step guide covers login, signup, and navigation with clear explanations and code snippets.”

📌 Introduction: What You Will Learn

In Part 1, we set up our React Native app using Expo Router and TypeScript. Now, in Part 2, we will: ✅ Implement user authentication using Firebase (Login & Signup).
✅ Use Expo Router for navigation between screens.
✅ Ensure users can register and sign in securely.

By the end of this guide, you will have fully working authentication in your React Native app! 🏆

📌 Step 1: Install Firebase and Navigation Dependencies

First, we need to install Firebase for authentication and React Navigation for managing screens.

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

🔍 Explanation:

  • firebase → Firebase SDK for authentication.
  • @react-navigation/native → Core navigation library.
  • @react-navigation/stack → Enables stack-based navigation (like back/forward screens).
  • Other packages → Required for navigation and gestures in React Native.

📌 Step 2: Set Up Firebase in firebaseConfig.ts

📂 Location: src/firebaseConfig.ts

Now, let’s configure Firebase so our app can connect to authentication services.

1️⃣ Inside src/, create a new file called firebaseConfig.ts.

📍 Folder Structure:

kotlin
WordPuzzleGame/
│── src/
│ ├── firebaseConfig.ts <-- Create this

2️⃣ Add this code inside firebaseConfig.ts:

typescript
import { initializeApp } from "firebase/app";
import { getAuth } 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);

🔍 Explanation:

  • initializeApp(firebaseConfig) → Connects Firebase to our app.
  • getAuth(app) → Enables Firebase Authentication.
  • export const auth → This allows us to use auth in other files.

🔹 Don’t forget to replace "YOUR_API_KEY" and other values with the correct Firebase credentials from the Firebase Console.

📌 Step 3: Create the Signup Screen

📂 Location: app/signup.tsx

Now, we will create a signup screen where users can register with their email and password.

1️⃣ Inside app/, create a new file called signup.tsx.

📍 Folder Structure:

kotlin
WordPuzzleGame/
│── app/
│ ├── signup.tsx <-- Create this

2️⃣ Add this code inside signup.tsx:

typescript
import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";
import { auth } from "../src/firebaseConfig";
import { createUserWithEmailAndPassword } from "firebase/auth";export default function SignupScreen() {
const [email, setEmail] = useState(“”);
const [password, setPassword] = useState(“”);
const router = useRouter();

const handleSignup = async () => {
try {
await createUserWithEmailAndPassword(auth, email, password);
alert(“Signup successful!”);
router.push(“../login”); // Navigates to the login screen
} catch (error: any) {
alert(error.message);
}
};

return (
<View style={styles.container}>
<Text style={styles.title}>Create an Account</Text>
<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 }
});

🔍 Explanation:

  • useState Hooks (useState("")) → Store user input (email & password).
  • useRouter() → Allows navigation between screens.
  • createUserWithEmailAndPassword(auth, email, password) → Creates a new Firebase user.
  • router.push("../login") → Redirects to login after signup.

📌 Step 4: Create the Login Screen

📂 Location: app/login.tsx

1️⃣ Inside app/, create a new file called login.tsx.

📍 Folder Structure:

kotlin
WordPuzzleGame/
│── app/
│ ├── login.tsx <-- Create this

2️⃣ Add this code inside login.tsx:

typescript
import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";
import { auth } from "../src/firebaseConfig";
import { signInWithEmailAndPassword } from "firebase/auth";export default function LoginScreen() {
const [email, setEmail] = useState(“”);
const [password, setPassword] = useState(“”);
const router = useRouter();

const handleLogin = async () => {
try {
await signInWithEmailAndPassword(auth, email, password);
alert(“Login successful!”);
router.push(“../(tabs)/index”); // Navigates to the home screen
} catch (error: any) {
alert(error.message);
}
};

return (
<View style={styles.container}>
<Text style={styles.title}>Login</Text>
<TextInput style={styles.input} placeholder=“Email” onChangeText={setEmail} value={email} />
<TextInput style={styles.input} placeholder=“Password” secureTextEntry onChangeText={setPassword} value={password} />
<Button title=“Log In” onPress={handleLogin} />
<Text onPress={() => router.push(“../signup”)} style={styles.link}>Don’t have an account? Sign up</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 5: Restart and Test

Run your app:

bash
npx expo start
  • Try opening:
    • http://localhost:19006/login
    • http://localhost:19006/signup
  • Test signing up and logging in.

🎯 Conclusion

✅ You now have Firebase Authentication working in your React Native app!
Next up: Storing user data and building the word puzzle game UI! 🚀

💡 Drop a comment below if you need help! 🔥

 

By the way, if you need to test in your mobile device, do the following:

📌 Step 1: Update index.tsx to Include Navigation

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

Replace the existing code in index.tsx with the following updated version:

typescript
import { View, Text, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";export default function HomeScreen() {
const router = useRouter();

return (
<View style={styles.container}>
<Text style={styles.title}>Welcome to Word Puzzle Game!</Text>
<Button title=“Go to Login” onPress={() => router.push(“/login”)} />
<Button title=“Go to Signup” onPress={() => router.push(“/signup”)} />
</View>
);
}

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

📌 Step 2: Why This Fix Works

🔹 useRouter() → Allows navigation between screens in Expo Router.
🔹 router.push("/login") → Navigates to the Login screen when the button is pressed.
🔹 router.push("/signup") → Navigates to the Signup screen when the button is pressed.

Now, when users open the mobile app, they will see two buttons:
✔️ “Go to Login” → Opens login.tsx
✔️ “Go to Signup” → Opens signup.tsx

📌 Step 3: Restart and Test

After updating index.tsx, restart your app:

bash
npx expo start

Now, try navigating:
✅ Open the app on your mobile device.
✅ Click “Go to Login” → It should take you to login.tsx.
✅ Click “Go to Signup” → It should take you to signup.tsx.

🚀 Now your navigation works properly! 🎉

RELATED ARTICLESMORE FROM AUTHOR