fix: Code reviews.

Author: zouhir96

src/config/index.tsx

@@ -50,3 +50,12 @@ export const dateRanges: DateRangeType[] = [
   { label: 'the week', value: 'weekly' },
   { label: 'the month', value: 'monthly' },
 ]
+
+export const FIREBASE_API_KEY = import.meta.env.VITE_FIREBASE_API_KEY as string
+export const FIREBASE_AUTH_DOMAIN = import.meta.env.VITE_FIREBASE_AUTH_DOMAIN as string
+export const FIREBASE_PROJECT_ID = import.meta.env.VITE_FIREBASE_PROJECT_ID as string
+export const FIREBASE_STORAGE_BUCKET = import.meta.env.VITE_FIREBASE_STORAGE_BUCKET as string
+export const FIREBASE_MESSAGING_SENDER_ID = import.meta.env
+  .VITE_FIREBASE_MESSAGING_SENDER_ID as string
+export const FIREBASE_APP_ID = import.meta.env.VITE_FIREBASE_APP_ID as string
+export const FIREBASE_MEASUREMENT_ID = import.meta.env.VITE_FIREBASE_MEASUREMENT_ID as string

src/features/auth/api/FirebaseConfig.ts

@@ -3,7 +3,7 @@ import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
 import { useAuth } from 'src/features/auth'
-import { auth, githubProvider, googleProvider } from '../api/FirebaseConfig'
+import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
 
 type AuthModalProps = {
   showAuth: boolean
@@ -14,17 +14,17 @@ export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
   const { closeAuthModal, initState } = useAuth()
 
   const signIn = (provider: AuthProvider, providerName: string) => {
-    signInWithPopup(auth, provider)
+    signInWithPopup(firebaseAuth, provider)
       .then((result) => {
         const credential = OAuthProvider.credentialFromResult(result)
-        const accessToken = credential?.accessToken
+        const idToken = credential?.idToken
         const email = result.user.displayName
         const name = result.user.displayName
         const imageURL = result.user.photoURL
-        if (accessToken && name && email && imageURL) {
+        if (idToken && name && email && imageURL) {
           closeAuthModal()
           initState({
-            accessToken: accessToken,
+            idToken: idToken,
             user: {
               name: name,
               email: email,
@@ -65,14 +65,16 @@ export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
           </p>
         </div>
         <div>
-          <button className="extraTextWithIconBtn" onClick={() => signIn(githubProvider, 'Github')}>
+          <button
+            className="extraTextWithIconBtn"
+            onClick={() => signIn(githubAuthProvider, 'Github')}>
             <FaGithub />
             Sign in with Github
           </button>
           <button
             className="extraTextWithIconBtn"
             style={{ marginLeft: 10 }}
-            onClick={() => signIn(googleProvider, 'Google')}>
+            onClick={() => signIn(googleAuthProvider, 'Google')}>
             <FaGoogle />
             Sign in with Google
           </button>

src/features/auth/components/AuthModal.tsx

@@ -1,15 +1,12 @@
 import { AuthModalStore, AuthStore } from 'src/features/auth'
-import { useBookmarks } from 'src/stores/bookmarks'
 
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
-  const bookmarksStore = useBookmarks()
-  const { accessToken, user, initState } = authStore
+  const { idToken, user, initState, clear } = authStore
   const isConnected = () => user != null
   const logout = () => {
-    bookmarksStore.clear()
-    authStore.clear()
+    clear()
   }
 
   return {
@@ -19,7 +16,7 @@ export const useAuth = () => {
     isConnected,
     logout,
     isAuthModalOpen,
-    accessToken,
+    idToken,
     user,
   }
 }

src/features/auth/hooks/useAuth.ts

@@ -1,4 +1,3 @@
-export * from './api/FirebaseConfig'
 export * from './components/AuthModal'
 export * from './hooks/useAuth'
 export * from './stores/authStore'

src/features/auth/index.ts

@@ -9,7 +9,7 @@ interface AuthModalState {
 }
 
 type AuthState = {
-  accessToken: string | null
+  idToken: string | null
   user: User | null
 }
 
@@ -27,11 +27,11 @@ export const AuthModalStore = create<AuthModalState>((set) => ({
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
-      accessToken: null,
+      idToken: null,
       user: null,
       initState: (newState: AuthState) =>
         set({
-          accessToken: newState.accessToken,
+          idToken: newState.idToken,
           user: newState.user,
         }),
       clear: () => set({ user: null }),

src/features/auth/stores/authStore.ts

@@ -0,0 +1,29 @@
+import { initializeApp } from 'firebase/app'
+import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
+import {
+  FIREBASE_API_KEY,
+  FIREBASE_APP_ID,
+  FIREBASE_AUTH_DOMAIN,
+  FIREBASE_MEASUREMENT_ID,
+  FIREBASE_MESSAGING_SENDER_ID,
+  FIREBASE_PROJECT_ID,
+  FIREBASE_STORAGE_BUCKET,
+} from 'src/config'
+
+const firebaseConfig = {
+  apiKey: FIREBASE_API_KEY,
+  authDomain: FIREBASE_AUTH_DOMAIN,
+  projectId: FIREBASE_PROJECT_ID,
+  storageBucket: FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
+  appId: FIREBASE_APP_ID,
+  measurementId: FIREBASE_MEASUREMENT_ID,
+}
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig)
+const firebaseAuth = getAuth(app)
+const googleAuthProvider = new GoogleAuthProvider()
+const githubAuthProvider = new GithubAuthProvider()
+
+export { firebaseAuth, githubAuthProvider, googleAuthProvider }