Update page.tsx

ArhanAnsari · Nov 4, 2024 · 1929a18 · 1929a18
1 parent e25b95c
commit 1929a18
Showing 1 changed file with 26 additions and 31 deletions.
diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
@@ -4,55 +4,46 @@ import { signIn, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 import { ToastContainer, toast } from "react-toastify";
-import { getUserData } from "@/firebaseFunctions";
 import "react-toastify/dist/ReactToastify.css";
 import SEO from "@/components/SEO";
+import { FaGoogle, FaGithub } from "react-icons/fa";
 
 export default function SignIn() {
   const router = useRouter();
   const { data: session } = useSession();
   const [loading, setLoading] = useState(false);
   const [showFallbackLink, setShowFallbackLink] = useState(false);
 
-  const handleSignIn = async () => {
+  const handleSignIn = async (provider: string) => {
     setLoading(true);
     try {
-      const result = await signIn("google", { redirect: false });
-
-      if (result?.error) {
-        throw new Error(result.error);
-      }
-
-      const userEmail = session?.user?.email;
-
-      if (userEmail) {
-        const userData = await getUserData(userEmail);
-        if (userData) {
-          toast.success(`Welcome back! You are on the ${userData.plan} plan.`);
+      await signIn(provider, {
+        callbackUrl: "/dashboard",
+      });
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message.includes("OAuthAccountNotLinked")) {
+          toast.info("This account is not linked. Please sign up first or sign in using the originally linked provider.");
+        } else {
+          toast.error("Sign-in failed. Please try again.");
+          console.error("Sign-in error:", error.message);
         }
+      } else {
+        console.error("An unexpected error occurred:", error);
       }
-
-      router.push("/dashboard");
-    } catch (error) {
-      toast.error("Sign-in failed. Please try again.");
     } finally {
       setLoading(false);
     }
   };
 
-  // Effect to handle automatic redirection
   useEffect(() => {
     if (session) {
-      // Redirect after a short delay if session exists
       const timer = setTimeout(() => {
         router.push("/dashboard");
       }, 2000);
-
-      // Show the fallback link if not redirected within 5 seconds
       const fallbackTimer = setTimeout(() => {
         setShowFallbackLink(true);
       }, 5000);
-
       return () => {
         clearTimeout(timer);
         clearTimeout(fallbackTimer);
@@ -62,19 +53,23 @@ export default function SignIn() {
 
   return (
     <>
-      <SEO
-        title="Sign In - InspireGem"
-        description="Sign in to InspireGem using your Google account to access AI-powered content generation."
-      />
+      <SEO title="Sign In - InspireGem" description="Sign in to InspireGem using your Google or GitHub account." />
       <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 text-gray-800 py-6 px-4">
         <h1 className="text-3xl sm:text-4xl font-bold mb-6">Sign In</h1>
-        <p className="text-base sm:text-lg mb-4">Sign in with your Google account.</p>
+        <p className="text-base sm:text-lg mb-4">Sign in with one of the options below.</p>
+        <button
+          onClick={() => handleSignIn("google")}
+          className={`bg-blue-500 text-white px-4 py-2 rounded flex items-center gap-2 ${loading ? "opacity-50" : "hover:bg-blue-600"}`}
+          disabled={loading}
+        >
+          <FaGoogle /> {loading ? "Signing in..." : "Sign in with Google"}
+        </button>
         <button
-          onClick={handleSignIn}
-          className={`bg-blue-500 text-white px-4 py-2 rounded ${loading ? "opacity-50" : "hover:bg-blue-600"}`}
+          onClick={() => handleSignIn("github")}
+          className={`bg-gray-800 text-white px-4 py-2 mt-4 rounded flex items-center gap-2 ${loading ? "opacity-50" : "hover:bg-gray-900"}`}
           disabled={loading}
         >
-         {loading ? "Signing in..." : "Sign in with Google"}
+          <FaGithub /> {loading ? "Signing in..." : "Sign in with GitHub"}
         </button>
         {showFallbackLink && (
           <p className="mt-4 text-blue-500">