refactor(auth): implement client-side github oauth flow to fix CORS i…

…ssue
JaleelB · Jul 26, 2024 · a0fc8cf · a0fc8cf
1 parent 49c5d1b
commit a0fc8cf
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 29 deletions.
diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
@@ -156,34 +156,8 @@ export default function SignInPage() {
           <Separator className="my-4 h-[1px] w-full shrink-0 bg-border" />
 
           <div className="space-y-4">
-            {/* <Link
-              href="/api/login/google"
-              className={cn(
-                buttonVariants({
-                  variant: "outline",
-                }),
-                "w-full",
-              )}
-            >
-              <Icons.google className="mr-2 h-4 w-4" />
-              Sign in with Google
-            </Link> */}
-            <OAuthButton provider="google">
-              <Icons.google className="mr-2 h-4 w-4" />
-              Sign in with Google
-            </OAuthButton>
-            <Link
-              href="/api/login/github"
-              className={cn(
-                buttonVariants({
-                  variant: "outline",
-                }),
-                "w-full",
-              )}
-            >
-              <Icons.github className="mr-2 h-4 w-4" />
-              Sign in with GitHub
-            </Link>
+            <OAuthButton provider="google">Sign in with Google</OAuthButton>
+            <OAuthButton provider="github">Sign in with Github</OAuthButton>
           </div>
           <div className="text-center text-sm">
             Don&apos;t have an account?{" "}

diff --git a/app/api/login/github/route.ts b/app/api/login/github/route.ts
@@ -16,5 +16,7 @@ export async function GET(): Promise<Response> {
     sameSite: "lax",
   });
 
-  return Response.redirect(url);
+  // return Response.redirect(url);
+  // Instead of redirecting, return the URL to the client
+  return Response.json({ url: url.toString() });
 }
diff --git a/components/oauth-button.tsx b/components/oauth-button.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import { LoaderButton } from "./loader-button";
+import { Icons } from "./icons";
 
 export function OAuthButton({
   provider,
@@ -42,6 +43,12 @@ export function OAuthButton({
       )}
       type="submit"
     >
+      {provider === "google" && !isLoading && (
+        <Icons.google className="mr-2 h-4 w-4" />
+      )}
+      {provider === "github" && !isLoading && (
+        <Icons.github className="mr-2 h-4 w-4" />
+      )}
       {children}
     </LoaderButton>
   );