const handleGithubLogin = (): void => {
   setIsLoading(true)
-  window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github`
+  const state = generateRandomString() // Implement this function to generate a random string
+  sessionStorage.setItem('githubAuthState', state)
+  window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github?state=${state}`
 }
 
 const handleGithubRedirect = async () => {
   const urlParams = new URLSearchParams(window.location.search)
   const code = urlParams.get('code')
+  const state = urlParams.get('state')
+  const storedState = sessionStorage.getItem('githubAuthState')
 
-  if (code) {
+  if (code && state === storedState) {
     try {
       const response = await fetch(
-        `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github/callback?code=${code}`,
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github/callback?code=${code}&state=${state}`,
         {
           method: 'GET',
           credentials: 'include'
         }
       )
       // ... rest of the function
     } catch (error) {
       // ... error handling
     }
   } else {
+    console.error('Invalid state or no authorization code found in the URL')
     // ... error handling
   }
+  sessionStorage.removeItem('githubAuthState')
 }

+const [error, setError] = useState<string | null>(null);
+
 const handleGithubRedirect = async () => {
   const urlParams = new URLSearchParams(window.location.search)
   const code = urlParams.get('code')
 
   if (code) {
     try {
       const response = await fetch(
         `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github/callback?code=${code}`,
         {
           method: 'GET',
           credentials: 'include'
         }
       )
 
       if (!response.ok) {
-        throw new Error('Network response was not ok')
+        throw new Error('Authentication failed')
       }
 
       const data = (await response.json()) as User
       setEmail(data.email)
 
       if (response.status === 200) {
         router.push('/auth/account-details')
       }
     } catch (error) {
-      // eslint-disable-next-line no-console -- we need to log the error
       console.error(`Failed to fetch user data: ${error}`)
+      setError('GitHub authentication failed. Please try again.')
     }
   } else {
-    // eslint-disable-next-line no-console -- we need to log the error
     console.error('No authorization code found in the URL')
+    setError('GitHub authentication failed. Please try again.')
   }
 }
 
+// In the JSX:
+{error && <div className="error-message">{error}</div>}
+

-const handleGithubLogin = (): void => {
-  setIsLoading(true)
-  window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github`
-}
+const useGithubAuth = () => {
+  const router = useRouter();
+  const [, setEmail] = useAtom(authEmailAtom);
 
-const handleGithubRedirect = async () => {
-  const urlParams = new URLSearchParams(window.location.search)
-  const code = urlParams.get('code')
+  const handleGithubLogin = (): void => {
+    window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github`;
+  };
 
-  if (code) {
-    try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github/callback?code=${code}`,
-        {
-          method: 'GET',
-          credentials: 'include'
+  const handleGithubRedirect = async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+
+    if (code) {
+      try {
+        const response = await fetch(
+          `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github/callback?code=${code}`,
+          {
+            method: 'GET',
+            credentials: 'include'
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
         }
-      )
 
-      if (!response.ok) {
-        throw new Error('Network response was not ok')
+        const data = (await response.json()) as User;
+        setEmail(data.email);
+
+        if (response.status === 200) {
+          router.push('/auth/account-details');
+        }
+      } catch (error) {
+        console.error(`Failed to fetch user data: ${error}`);
       }
+    } else {
+      console.error('No authorization code found in the URL');
+    }
+  };
 
-      const data = (await response.json()) as User
-      setEmail(data.email)
+  useEffect(() => {
+    void handleGithubRedirect();
+  }, []);
 
-      if (response.status === 200) {
-        router.push('/auth/account-details')
-      }
-    } catch (error) {
-      // eslint-disable-next-line no-console -- we need to log the error
-      console.error(`Failed to fetch user data: ${error}`)
-    }
-  } else {
-    // eslint-disable-next-line no-console -- we need to log the error
-    console.error('No authorization code found in the URL')
-  }
-}
+  return { handleGithubLogin };
+};
 
-useEffect(() => {
-  void handleGithubRedirect()
-}, [])
+// In the component:
+const { handleGithubLogin } = useGithubAuth();

+const [isGithubLoading, setIsGithubLoading] = useState(false);
+
+const handleGithubLogin = async (): Promise<void> => {
+  setIsGithubLoading(true);
+  try {
+    // Existing login logic
+  } catch (error) {
+    console.error('GitHub login failed:', error);
+  } finally {
+    setIsGithubLoading(false);
+  }
+};
+
 <Button
-  onClick={() => {
-    handleGithubLogin()
-  }}
+  onClick={handleGithubLogin}
+  disabled={isGithubLoading}
 >
-  <GithubSVG />
+  {isGithubLoading ? <LoadingSVG /> : <GithubSVG />}
 </Button>