Merge pull request #152 from AADESHak007/passop/recoil

added recoil logic

package.json

@@ -26,6 +26,7 @@
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",
     "react-toastify": "^9.1.3",
+    "recoil": "^0.7.7",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

src/atoms/authState.js

@@ -0,0 +1,27 @@
+// authState.js
+import { atom } from "recoil";
+
+export const currentUserState = atom({
+    key: "currentUserState",
+    default: null,
+});
+
+export const userLoggedInState = atom({
+    key: "userLoggedInState",
+    default: false,
+});
+
+export const isEmailUserState = atom({
+    key: "isEmailUserState",
+    default: false,
+});
+
+export const isGoogleUserState = atom({
+    key: "isGoogleUserState",
+    default: false,
+});
+
+export const authLoadingState = atom({
+    key: "authLoadingState",
+    default: true,
+});

src/components/Navbar.jsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../contexts/authContext/index";
 import UserAccount from "./UserAccount";
+import { useRecoilValue } from "recoil";
+import { currentUserState, userLoggedInState } from "../atoms/authState";
 
 const Navbar = () => {
-  const { currentUser } = useAuth();
-  const { userLoggedIn } = useAuth();
+  const  currentUser  = useRecoilValue(currentUserState);
+  const  userLoggedIn  = useRecoilValue(userLoggedInState);
   const [isVisible, setIsVisible] = React.useState(false);
   const navigate = useNavigate();
   // function to download passwords

src/components/SignIn.jsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 import { Link, Navigate } from 'react-router-dom';
 import { doSignInWithEmailAndPassword, doSignInWithGoogle } from '../firebase/auth';
-import { useAuth } from '../contexts/authContext/index';
+
 import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai'; // Importing React Icons
+import { useRecoilValue } from 'recoil';
+import { userLoggedInState } from '../atoms/authState';
 
 const SignIn = () => {
-    const { userLoggedIn } = useAuth();
+    const { userLoggedIn } = useRecoilValue(userLoggedInState);
 
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');

src/components/SignUp.jsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
 import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai'
 import { Link, Navigate } from 'react-router-dom'
-import { useAuth } from '../contexts/authContext/index'
 import { doCreateUserWithEmailAndPassword } from '../firebase/auth'
+import { useRecoilValue } from 'recoil'
+import { userLoggedInState } from '../atoms/authState'
 
 const Register = () => {
 
@@ -14,7 +15,7 @@ const Register = () => {
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
-    const { userLoggedIn } = useAuth()
+    const { userLoggedIn } = useRecoilValue(userLoggedInState)
 
     const onSubmit = async (e) => {
         e.preventDefault()

src/contexts/authContext/index.jsx

@@ -1,20 +1,17 @@
-import React, { useContext, useState, useEffect } from "react";
-import { auth } from "../../firebase/firebase";
-// import { GoogleAuthProvider } from "firebase/auth";
+import React, { useEffect } from "react";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import { onAuthStateChanged } from "firebase/auth";
-
-const AuthContext = React.createContext();
-
-export function useAuth() {
-    return useContext(AuthContext);
-}
+import { auth } from "../../firebase/firebase";
+import { authLoadingState, currentUserState, isEmailUserState, isGoogleUserState, userLoggedInState } from "../../atoms/authState";
 
 export function AuthProvider({ children }) {
-    const [currentUser, setCurrentUser] = useState(null);
-    const [userLoggedIn, setUserLoggedIn] = useState(false);
-    const [isEmailUser, setIsEmailUser] = useState(false);
-    const [isGoogleUser, setIsGoogleUser] = useState(false);
-    const [loading, setLoading] = useState(true);
+    const setCurrentUser = useSetRecoilState(currentUserState);
+    const setUserLoggedIn = useSetRecoilState(userLoggedInState);
+    const setIsEmailUser = useSetRecoilState(isEmailUserState);
+    const setIsGoogleUser = useSetRecoilState(isGoogleUserState);
+    const setLoading = useSetRecoilState(authLoadingState);
+
+    const loading = useRecoilValue(authLoadingState); // Retrieve the loading state
 
     useEffect(() => {
         const unsubscribe = onAuthStateChanged(auth, initializeUser);
@@ -23,20 +20,19 @@ export function AuthProvider({ children }) {
 
     async function initializeUser(user) {
         if (user) {
-
             setCurrentUser({ ...user });
 
-            // check if provider is email and password login
+            // Check if provider is email and password login
             const isEmail = user.providerData.some(
                 (provider) => provider.providerId === "password"
             );
             setIsEmailUser(isEmail);
 
-            // check if the auth provider is google or not
-            //   const isGoogle = user.providerData.some(
+            // Uncomment and add GoogleAuthProvider if needed
+            // const isGoogle = user.providerData.some(
             //     (provider) => provider.providerId === GoogleAuthProvider.PROVIDER_ID
-            //   );
-            //   setIsGoogleUser(isGoogle);
+            // );
+            // setIsGoogleUser(isGoogle);
 
             setUserLoggedIn(true);
         } else {
@@ -47,17 +43,5 @@ export function AuthProvider({ children }) {
         setLoading(false);
     }
 
-    const value = {
-        userLoggedIn,
-        isEmailUser,
-        isGoogleUser,
-        currentUser,
-        setCurrentUser
-    };
-
-    return (
-        <AuthContext.Provider value={value}>
-            {!loading && children}
-        </AuthContext.Provider>
-    );
+    return <>{!loading && children}</>;
 }

src/main.jsx

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
 import { AuthProvider } from './contexts/authContext/index.jsx'
+import { RecoilRoot } from 'recoil'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <AuthProvider>
-      <App />
-    </AuthProvider>
+    <RecoilRoot>
+        <AuthProvider>
+            <App />
+        </AuthProvider>
+    </RecoilRoot>
   </React.StrictMode>,
 )