add isConnecting status to Auth

Author: medyo

src/features/auth/stores/authModalStore.ts

@@ -8,16 +8,20 @@ type AuthError = {
 }
 interface AuthModalState {
   isAuthModalOpen: boolean
+  isConnecting: boolean
   authError: AuthError | null
   openAuthModal: () => void
   closeAuthModal: () => void
   setAuthError: (error: AuthError | null) => void
+  setConnecting: (isConnecting: boolean) => void
 }
 
 export const AuthModalStore = create<AuthModalState>((set) => ({
   isAuthModalOpen: false,
   authError: null,
+  isConnecting: false,
   setAuthError: (error) => set({ authError: error }),
   openAuthModal: () => set({ isAuthModalOpen: true }),
   closeAuthModal: () => set({ isAuthModalOpen: false }),
+  setConnecting: (isConnecting) => set({ isConnecting }),
 }))

src/providers/AuthProvider.tsx

@@ -8,36 +8,41 @@ import { firebaseAuth } from 'src/lib/firebase'
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
-  const { closeAuthModal, initState, setAuthError, openAuthModal } = useAuth()
+  const { closeAuthModal, initState, setAuthError, openAuthModal, setConnecting } = useAuth()
 
   const connectTheUser = useCallback((token?: string | null, provider?: string | null) => {
     const allowedProviders = ['google', 'github']
     if ((provider && !allowedProviders.includes(provider)) || !token) {
       return Promise.resolve()
     }
 
+    setConnecting(true)
     const authProvider =
       provider === 'google'
         ? GoogleAuthProvider.credential(null, token)
         : GithubAuthProvider.credential(token)
 
-    return signInWithCredential(firebaseAuth, authProvider).then((userCredential) => {
-      const user = userCredential.user
+    return signInWithCredential(firebaseAuth, authProvider)
+      .then((userCredential) => {
+        const user = userCredential.user
 
-      initState({
-        user: {
-          id: user.uid,
-          name: user.displayName || 'Anonymous',
-          imageURL: user.photoURL || '',
-        },
-        providerId: authProvider.providerId,
+        initState({
+          user: {
+            id: user.uid,
+            name: user.displayName || 'Anonymous',
+            imageURL: user.photoURL || '',
+          },
+          providerId: authProvider.providerId,
+        })
+        if (user.displayName) {
+          toast(`Welcome, ${user.displayName}`, { theme: 'successToast' })
+        }
+        closeAuthModal()
+        navigate(window.location.pathname, { replace: true })
+      })
+      .finally(() => {
+        setConnecting(false)
       })
-      if (user.displayName) {
-        toast(`Welcome, ${user.displayName}`, { theme: 'successToast' })
-      }
-      closeAuthModal()
-      navigate(window.location.pathname, { replace: true })
-    })
   }, [])
 
   /**