🔒 React Native + Firebase Authentication (Google & Phone Login) - TypeScript

এই টিউটোরিয়ালে আমরা দেখব কিভাবে **React Native + Firebase** ব্যবহার করে Authentication implement করতে হয়। এখানে আমরা ব্যবহার করব **Google Sign-In** এবং **Phone Number Login**। কোড হবে **TypeScript** ফাইল-ভিত্তিক (File-based structure) এবং আমরা দেখব রিয়েল টাইম আউটপুট।

📌 ১. প্রজেক্ট সেটআপ & Firebase Integration

React Native + TypeScript প্রজেক্ট তৈরি করুন: npx react-native init MyAuthApp --template react-native-template-typescript
Firebase SDK install করুন: yarn add @react-native-firebase/app @react-native-firebase/auth
Google Sign-In package install করুন: yarn add @react-native-google-signin/google-signin
iOS & Android জন্য Firebase configuration যোগ করুন (GoogleService-Info.plist & google-services.json)

  // firebaseConfig.ts
  import { initializeApp } from 'firebase/app';

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

  export const app = initializeApp(firebaseConfig);

📌 ২. ফাইল-ভিত্তিক স্ট্রাকচার (Folder Structure)

আমরা আমাদের ফোল্ডার এমনভাবে সাজাবো যাতে ফাইল-ভিত্তিক এবং scalable হয়:

/src → সমস্ত সোর্স ফাইল
/src/screens → প্রতিটি স্ক্রিনের জন্য ফাইল
/src/components → রিইউজেবল কম্পোনেন্ট
/src/navigation → React Navigation setup
/src/services → Firebase / API services

📌 ৩. Google Login Implementation

প্রথমে Google SignIn configure করুন এবং তারপর Firebase auth এর সাথে integrate করুন।

  // src/services/auth.ts
  import auth from '@react-native-firebase/auth';
  import { GoogleSignin } from '@react-native-google-signin/google-signin';

  GoogleSignin.configure({
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
  });

  export const signInWithGoogle = async () => {
    try {
      const { idToken } = await GoogleSignin.signIn();
      const googleCredential = auth.GoogleAuthProvider.credential(idToken);
      return auth().signInWithCredential(googleCredential);
    } catch (error) {
      console.log('Google Sign-In Error:', error);
    }
  };

**Screen:**

  // src/screens/LoginScreen.tsx
  import React from 'react';
  import { View, Button } from 'react-native';
  import { signInWithGoogle } from '../services/auth';

  const LoginScreen = () => {
    return (

📌 ৪. Phone Number Authentication

Firebase Phone Auth ব্যবহার করে OTP verification করতে পারেন।

  // src/services/auth.ts
  export const signInWithPhone = async (phoneNumber: string, recaptchaVerifier: any) => {
    try {
      const confirmation = await auth().signInWithPhoneNumber(phoneNumber, recaptchaVerifier);
      return confirmation; // Use this for OTP verification
    } catch (error) {
      console.log('Phone Auth Error:', error);
    }
  };

**Screen:** OTP verification handle করতে:

  // src/screens/PhoneLoginScreen.tsx
  import React, { useRef, useState } from 'react';
  import { View, TextInput, Button, Text } from 'react-native';
  import auth from '@react-native-firebase/auth';
  import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
  import { firebaseConfig } from '../services/firebaseConfig';

  const PhoneLoginScreen = () => {
    const [phoneNumber, setPhoneNumber] = useState('');
    const [otp, setOtp] = useState('');
    const [confirmation, setConfirmation] = useState(null);
    const recaptchaVerifier = useRef(null);

    const handleSendOtp = async () => {
      try {
        const confirmationResult = await auth().signInWithPhoneNumber(phoneNumber, recaptchaVerifier.current);
        setConfirmation(confirmationResult);
      } catch (err) { console.log(err); }
    };

    const handleVerifyOtp = async () => {
      try {
        await confirmation.confirm(otp);
        alert('Phone Authenticated Successfully!');
      } catch (err) { console.log(err); }
    };

    return (

📌 ৫. Output & Behavior

Login Screen দেখাবে “Sign in with Google” button।
Google Login ক্লিক করলে Google Account Picker আসবে এবং লগইন হবে।
Phone Login Screen এ ফোন নাম্বার লিখলে OTP পাঠানো হবে।
OTP enter করলে user authenticated হবে।
Authenticated হলে রিয়েল টাইম user data Firebase থেকে পাওয়া যাবে।

✅ এইভাবে আপনি ফাইল-ভিত্তিক React Native + Firebase Authentication implement করতে পারবেন **TypeScript** ব্যবহার করে।

✨ Summary

Firebase + React Native দিয়ে Google & Phone Auth implement করা যায়।
File-based structure ব্যবহার করলে কোড clean এবং maintainable হয়।
TypeScript ব্যবহার করলে type safety এবং bug কম থাকে।
Tailwind CSS ব্যবহার করে responsive UI design করা যায়।

🔹 Student-friendly টিউটোরিয়াল – ব্যবহার করে আপনি সহজে Authentication feature React Native অ্যাপে যুক্ত করতে পারবেন।

Google ও Phone Login