??? ??? ??? ?? ???? ??? ?????. ? ??? ???? ???? ???? ?? ??? ?? ??? ???? ?? ???? ??? ??????. Firebase?? ????? ?? ????? ??? ID ??? ??? ? ?? ??? ?????. ? ???? FireBase V9? ?? ? API? ???? ??? ??, ?? ? ??? ???? ??? ?????.

? ????? React, React Hooks ? Firebase V8? ?? ?? ?? ?????. Google ?? ? Node.js? ???????.

??

• Firebase ??
• ???? ??
• ?????? ??
• ??? ??
• ??? ?? ?? (RACT CONTEXT API)
• ??? ??
• ??? ???
• ?? ?? ??
• ??? ??
• ??
• ?? ??

Firebase ??

1. Google ??? ????? Firebase ??? ???????.
2. ??? Firebase ???? (? : "Firebase-User-Reg-Auth")? ????. ? ????? ?? Google ? ?? ??? ?? ? ? ????.
3. Firebase ?? ??? ?? ?? ???? ??????.
4. ???/?? ??? ??????.

???? ??

??? ??? ?? :

 git ?? -B ??? https://github.com/tammibriggs/firebase_user_auth.git
CD FIREBASE_USER_AUTH
NPM ??

This includes Firebase v9 in package.json . Run npm start to launch the application.

?????? ??

1. Firebase ???? ????? ? ?? ??? ?????.
2. Create firebase.js in your React app's src directory.
3. ??? ?? ?? ?? :

 // src/firebase.js
'Firebase/App'?? {initializeapp} ?? ??;
'Firebase/Auth'?? {getauth} ?? ??;

4. FireBaseConfig ??? ?? ?? Firebase? ???????.

 // src/firebase.js
const firebaseconfig = { / * ???? ?? * /};
const app = initializeapp (firebaseconfig);
const auth = getauth (app);
???? {auth};

??? ??

The Register.js component uses createUserWithEmailAndPassword (Firebase v9). ???? ??? ??? ???? ???? ?? ?????. ?? ??? ??? ?? ? ?? ??? ?????. The form's onSubmit event triggers the registration process.

??? ?? ?? (RACT CONTEXT API)

An AuthContext.js file provides a context for managing user state. AuthProvider shares the user state, and useAuthValue accesses it. App.js wraps components with AuthProvider , and onAuthStateChanged updates the user state.

??? ??

After registration, sendEmailVerification sends a verification email. The user is redirected to a /verify-email page. This page displays the user's email and a "Resend Email" button with a 60-second cooldown using useEffect and state management to prevent rate limiting. ???? ???? ???? ???? ???????.

??? ???

The Profile.js component displays user email and verification status using useAuthValue . The "Sign Out" button utilizes signOut from Firebase.

?? ?? ??

PrivateRoute.js restricts access to the profile page to verified users using Redirect . App.js ??? ???? ?? ??? PrivateRoute ????? ???????.

??? ??

The Login.js component uses signInWithEmailAndPassword . After login, it checks email verification and redirects to /verify-email if necessary, starting the 60-second countdown.

??

? ???? FireBase V9? ???? React ?? ?????? ??? ??? ??? ?????? ??? ? ???? ?????. Firebase? ??? ????? ?? ????? ???? ???? ???? ?????.

?? ??

• Firebase ?? ??
• ???? API ??? ?????

? ??? Firebase ? React? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!