نحوه تنظیم احراز هویت FIREBASE در یک پروژه REACT

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyARMzfqJbdwtsPVQCiR0qEM96P_fj1acuE",
  authDomain: "my-auth-project-744de.firebaseapp.com",
  projectId: "my-auth-project-744de",
  storageBucket: "my-auth-project-744de.appspot.com",
  messagingSenderId: "908733099316",
  appId: "1:908733099316:web:089d2658ec0910dc148961"
};

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

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyARMzfqJbdwtsPVQCiR0qEM96P_fj1acuE",
  authDomain: "my-auth-project-744de.firebaseapp.com",
  projectId: "my-auth-project-744de",
  storageBucket: "my-auth-project-744de.appspot.com",
  messagingSenderId: "908733099316",
  appId: "1:908733099316:web:089d2658ec0910dc148961"
};

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

// Initialize Firebase Authentication and get a reference to the service
export const auth = getAuth(app);
export default app;

import React, {useState} from 'react';
import {  createUserWithEmailAndPassword  } from 'firebase/auth';
import { auth } from '../firebase';

const Signup = () => {
   const [email, setEmail] = useState('')
    const [password, setPassword] = useState('');

    const userSignUp = (e) => {
      e.preventDefault()
createUserWithEmailAndPassword(auth, email, password).then((userCredential) => {
            // Signed in
            const user = userCredential.user;
            console.log(user);

        }) .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode, errorMessage);

        });


    }

  return (
<section>
   <div>
      <div>                  
        <h1> Create Account <h1>                                                                            

<form onSubmit=“userSignUp”>                                                                                          
 <div>
  <input type="email"
  value={email}
  onChange={(e) =>      setEmail(e.target.value)}  
 required                                    
  placeholder="Enter your email address…"/>
 </div>

<div>
 <input type="password"
 value={password}
 onChange={(e) => setPassword(e.target.value)} 
required                                 
placeholder="Enter your password…" />
 </div>                                             
 <button type="submit" 
onClick={userSignUp}>  
    Sign up                                
 </button>
                                                                     </form>
</div>
 </div>
 </section>
  )
}

export default Signup

import React, {useState} from 'react';
import {  signInWithEmailAndPassword   } from 'firebase/auth';
import { auth } from '../firebase';

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

    const userLogin = (e) => {
        e.preventDefault();
        signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Signed in
            const user = userCredential.user;
             console.log(user);
        }) .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode, errorMessage)
        });

    }

    return(
        <>

                <section>
                    <div>                                            
                        <p>Login into your account</p>                       

                        <form>                                              
                            <div>

                                <input 
                                    Value=“email”
                                    type="email"                                    
                                    required                                                                                
                                    placeholder="Enter your email address…"
                                    onChange={(e)=>setEmail(e.target.value)}
                                />
                            </div>

                            <div>
                             <input 
                                value=“password”
                                type="email"
                                required
                                placeholder="Enter your password…"
                                onChange={(e)=>setPassword(e.target.value)}/>
                            </div>

                            <div>
                                <button onClick={userLogin}>      
                                    Login                                                                  
                                </button>
                            </div>                               
                        </form>


                    </div>
                </section>

        </>
    )
}

export default Login

import React, { useState, useEffect } from 'react';
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from '../firebase';

const AuthDetails = () => {
Const [authUser, setAuthUser]=useState(null)

    useEffect(()=>{
        onAuthStateChanged(auth, (user) => {
            if (user) {
              setAuthUser(user)
              // User is signed in, see docs for a list of available properties
              // https://firebase.google.com/docs/reference/js/firebase.User
              const uid = user.uid;
              // ...
              console.log("uid", uid)
            } else {
              setAuthUser(null)
              // User is signed out
              // ...
              console.log("user is logged out")
            }
          });
        return ()=>{
            listen()
          }
    }, [])
 //this logic is for logging out a signed in user
const handleLogout = () => {               
        signOut(auth).then(() => {
        // Sign-out successful.
           console.log("Signed out successfully")
        }).catch((error) => {
        // An error happened.
        });
    }
  return (
    <div>        
//this shows if a user is signed in and the user email.
     {authUser ? <p>{`user is signed in as ${authUser.email}`}</p>
//this button is for logging out a signed in user
<button onClick={handleLogout}>Sign Out</button>
: <p>User signed Out</p>
//if the second condition is met, that means user is signed out, the text “User signed Out” will show.
    </div>
  )
}

export default AuthDetails