Firebase Authentication দিয়ে User Login/Sign-Up তৈরি

Firebase Authentication একটি শক্তিশালী সেবা যা ব্যবহারকারীদের লগইন এবং সাইন-আপ পরিচালনা করার জন্য সহজ পদ্ধতি প্রদান করে। এটি বিভিন্ন ধরনের লগইন পদ্ধতি সমর্থন করে, যেমন ইমেইল-পাসওয়ার্ড, গুগল, ফেসবুক, টুইটার, এবং আরও অনেক কিছু।

এখানে Firebase Authentication দিয়ে User Login এবং Sign-Up তৈরি করার একটি সঠিক উদাহরণ দেখানো হলো।

প্রথমে Firebase প্রকল্প তৈরি করুন:

1. Firebase Console এ যান: Firebase Console
2. একটি নতুন প্রকল্প তৈরি করুন বা পূর্বে তৈরি প্রকল্পে যান।
3. Authentication সেকশনে যান এবং Email/Password সাইন-ইন মেথডটি সক্রিয় করুন।

React এ Firebase Authentication ব্যবহার করার জন্য সেটআপ:

1. প্রথমে Firebase SDK ইনস্টল করুন:

npm install firebase

2. Firebase কনফিগারেশন সেটআপ করুন (Firebase Console থেকে পাওয়া কনফিগারেশন কোড ব্যবহার করুন):

// firebase-config.js

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

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

export { auth };

User Sign-Up (Registration):

// SignUp.js
import React, { useState } from 'react';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebase-config';

function SignUp() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      alert("User Registered Successfully!");
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <h2>Sign Up</h2>
      <form onSubmit={handleSignUp}>
        <input 
          type="email" 
          placeholder="Email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
        <input 
          type="password" 
          placeholder="Password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
        <button type="submit">Sign Up</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
}

export default SignUp;

User Login (Authentication):

// Login.js
import React, { useState } from 'react';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebase-config';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert("User Logged In Successfully!");
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <input 
          type="email" 
          placeholder="Email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
        <input 
          type="password" 
          placeholder="Password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
        <button type="submit">Login</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
}

export default Login;

Firebase Authentication দিয়ে ডেটা রিট্রিভ করা (Logged-in User):

// UserProfile.js
import React, { useState, useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from './firebase-config';

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
        setUser(currentUser);
      } else {
        setUser(null);
      }
    });
  }, []);

  return (
    <div>
      {user ? (
        <div>
          <h3>Welcome, {user.email}</h3>
          <p>User ID: {user.uid}</p>
        </div>
      ) : (
        <h3>Please log in to see the profile</h3>
      )}
    </div>
  );
}

export default UserProfile;

সারাংশ:

1. Firebase Authentication সেটআপ করতে Firebase কনসোল থেকে প্রজেক্ট তৈরি করে, Firebase SDK ব্যবহার করতে হয়।
2. Sign Up এবং Login পেজে ইমেইল-পাসওয়ার্ড ব্যবহার করে ব্যবহারকারীকে নিবন্ধন এবং লগইন করার জন্য createUserWithEmailAndPassword এবং signInWithEmailAndPassword ফাংশন ব্যবহৃত হয়।
3. UserProfile পেজে ব্যবহারকারীর তথ্য দেখতে onAuthStateChanged ফাংশন ব্যবহার করা হয়, যা ব্যবহারকারীর লগইন বা লগআউট স্টেট ট্র্যাক করে।

এই পদ্ধতিতে আপনি Firebase Authentication দিয়ে ব্যবহারকারীর সাইন-আপ এবং লগইন ফিচার সহজেই তৈরি করতে পারবেন।