feat: implement dynamic redirect on auth (#1240)

open-sauced · Jun 6, 2023 · 548cc4d · 548cc4d
1 parent 0f0b7c3
commit 548cc4d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/components/molecules/AuthSection/auth-section.tsx b/components/molecules/AuthSection/auth-section.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/router";
 import Link from "next/link";
 
 import { IoNotifications } from "react-icons/io5";
@@ -26,11 +27,20 @@ import { authSession } from "lib/hooks/authSession";
 import { Spinner } from "components/atoms/SpinLoader/spin-loader";
 
 const AuthSection: React.FC = ({}) => {
+  const router = useRouter();
+  const currentPath = router.asPath;
+
   const { signIn, signOut, user, sessionToken } = useSupabaseAuth();
   const { onboarded } = useSession();
   const [notifications, setNotifications] = useState<DbUserNotification[]>([]);
   const [loading, setLoading] = useState(false);
   const [userInfo, setUserInfo] = useState<DbUser | undefined>(undefined);
+  const [host, setHost] = useState<string>("");
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setHost(window.location.origin as string);
+    }
+  }, []);
 
   // Fetch user notifications
   const fetchNotifications = async () => {
@@ -158,7 +168,12 @@ const AuthSection: React.FC = ({}) => {
             </DropdownList>
           </>
         ) : (
-          <Button variant="primary" onClick={async () => await signIn({ provider: "github" })}>
+          <Button
+            variant="primary"
+            onClick={async () =>
+              await signIn({ provider: "github", options: { redirectTo: `${host}/${currentPath}` } })
+            }
+          >
             Connect with GitHub <Icon IconImage={GitHubIcon} className="ml-2" />
           </Button>
         )}

diff --git a/lib/hooks/useSupabaseAuth.ts b/lib/hooks/useSupabaseAuth.ts
@@ -6,10 +6,10 @@ import { supabase } from "../utils/supabase";
 
 const useSupabaseAuth = (loadSession = false) => {
   const store = useStore();
-  const user = useStore(state => state.user);
-  const sessionToken = useStore(state => state.sessionToken);
-  const providerToken = useStore(state => state.providerToken);
-  const userId = useStore(state => state.userId);
+  const user = useStore((state) => state.user);
+  const sessionToken = useStore((state) => state.sessionToken);
+  const providerToken = useStore((state) => state.providerToken);
+  const userId = useStore((state) => state.userId);
 
   useEffect(() => {
     async function getUserSession() {
@@ -24,7 +24,9 @@ const useSupabaseAuth = (loadSession = false) => {
       getUserSession();
     }
 
-    const { data: { subscription: listener } } = supabase.auth.onAuthStateChange((_, session) => {
+    const {
+      data: { subscription: listener },
+    } = supabase.auth.onAuthStateChange((_, session) => {
       store.setUser(session?.user ?? null);
       store.setSessionToken(session?.access_token);
       store.setProviderToken(session?.provider_token);
@@ -37,17 +39,18 @@ const useSupabaseAuth = (loadSession = false) => {
   }, []);
 
   return {
-    signIn: (data: SignInWithOAuthCredentials) => supabase.auth.signInWithOAuth({
-      ...data,
-      options: {
-        redirectTo: process.env.NEXT_PUBLIC_BASE_URL ?? "/"
-      }
-    }),
+    signIn: (data: SignInWithOAuthCredentials) =>
+      supabase.auth.signInWithOAuth({
+        ...data,
+        options: data.options ?? {
+          redirectTo: process.env.NEXT_PUBLIC_BASE_URL ?? "/",
+        },
+      }),
     signOut: () => supabase.auth.signOut(),
     user,
     sessionToken,
     providerToken,
-    userId
+    userId,
   };
 };