moved oauth url stuff to backend

packages/client/ui/react-ui/src/hooks/useAuthSignIn.ts

@@ -1,10 +1,12 @@
+import type { OAuthProvider } from "@/types/auth";
 import type { UseSignInData } from "@farcaster/auth-kit";
 
 export function useAuthSignIn() {
     return {
         onEmailSignIn,
         onConfirmEmailOtp,
         onFarcasterSignIn,
+        getOAuthUrl,
     };
 }
 
@@ -102,3 +104,23 @@ async function onFarcasterSignIn(data: UseSignInData, options: { baseUrl: string
         throw new Error("Error signing in via farcaster " + err);
     }
 }
+async function getOAuthUrl(provider: OAuthProvider, options: { baseUrl: string; apiKey: string }) {
+    try {
+        const queryParams = new URLSearchParams({
+            baseUrl: options.baseUrl,
+            apiKey: options.apiKey,
+            signinAuthenticationMethod: provider,
+        });
+        const response = await fetch(`${options.baseUrl}api/2024-09-26/session/sdk/auth/oauth?${queryParams}`);
+
+        if (!response.ok) {
+            throw new Error("Failed to get OAuth URL. Please try again or contact support.");
+        }
+
+        const data = (await response.json()) as { oauthUrl: string };
+        return data.oauthUrl;
+    } catch (error) {
+        console.error("Error fetching OAuth URL:", error);
+        throw new Error("Failed to get OAuth URL. Please try again or contact support.");
+    }
+}

packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts

@@ -1,9 +1,9 @@
 import type { OAuthProvider } from "@/types/auth";
-import { generateOAuthUrl } from "@/utils/generateOAuthUrl";
 import { ChildWindow, PopupWindow } from "@crossmint/client-sdk-window";
 import type { AuthMaterial } from "@crossmint/common-sdk-auth";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
+import { useAuthSignIn } from "./useAuthSignIn";
 
 export const useOAuthWindowListener = (
     provider: OAuthProvider,
@@ -13,6 +13,7 @@ export const useOAuthWindowListener = (
         fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterial>;
     }
 ) => {
+    const { getOAuthUrl } = useAuthSignIn();
     const [isLoading, setIsLoading] = useState(false);
     const childRef = useRef<ChildWindow<IncomingEvents, OutgoingEvents> | null>(null);
     const popupRef = useRef<PopupWindow<IncomingEvents, OutgoingEvents> | null>(null);
@@ -44,7 +45,8 @@ export const useOAuthWindowListener = (
             popupWindowWidth = 600;
         }
 
-        const popup = await PopupWindow.init(await generateOAuthUrl(provider, options.apiKey, options.baseUrl), {
+        const oauthUrl = await getOAuthUrl(provider, { apiKey: options.apiKey, baseUrl: options.baseUrl });
+        const popup = await PopupWindow.init(oauthUrl, {
             awaitToLoad: false,
             crossOrigin: true,
             width: popupWindowWidth,

packages/client/ui/react-ui/src/icons/poweredByLeaf.tsx

@@ -7,8 +7,8 @@ export const PoweredByLeaf = ({ color, size = "16" }: { color: string; size?: st
                 maskUnits="userSpaceOnUse"
                 x="0"
                 y="0"
-                width={size}
-                height={size}
+                width="16"
+                height="16"
             >
                 <mask id="path-1-inside-1_794_7000" fill="white">
                     <path