From 17566f518eac13345c7b9768696f2bb37fd8a1c4 Mon Sep 17 00:00:00 2001
From: jmderby <jonathan.temp@paella.dev>
Date: Tue, 15 Oct 2024 15:26:12 -0700
Subject: [PATCH] fixed styles and added stytch token call

---
 .../next/src/app/_lib/providers.tsx           |  2 +-
 .../react-ui/src/components/auth/AuthForm.tsx | 15 ++++--
 .../src/components/auth/AuthFormDialog.tsx    |  4 +-
 .../auth/methods/discord/DiscordSignIn.tsx    |  9 +++-
 .../auth/methods/email/EmailOTPInput.tsx      | 11 +++--
 .../auth/methods/email/EmailSignIn.tsx        | 10 ++--
 .../methods/farcaster/FarcasterSignIn.tsx     | 18 +++++---
 .../auth/methods/google/GoogleSignIn.tsx      |  9 +++-
 .../react-ui/src/components/common/Dialog.tsx | 21 ++++++---
 .../src/components/common/Divider.tsx         |  9 ++--
 .../src/components/common/InputOTP.tsx        |  2 +-
 .../src/components/common/Spinner.tsx         |  4 +-
 .../src/hooks/useOAuthWindowListener.ts       |  2 +-
 .../client/ui/react-ui/src/twind.config.ts    |  9 ++++
 .../ui/react-ui/src/utils/generateOAuthUrl.ts | 46 +++++++++++++++----
 15 files changed, 122 insertions(+), 49 deletions(-)

diff --git a/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx b/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx
index 65890097..3663eb22 100644
--- a/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx
+++ b/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx
@@ -19,7 +19,7 @@ export function Providers({ children }: { children: ReactNode }) {
                     }}
                     appearance={{
                         spacingUnit: "8px",
-                        borderRadius: "12px",
+                        borderRadius: "16px",
                         colors: {
                             inputBackground: "#fffdf9",
                             buttonBackground: "#fffaf2",
diff --git a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx
index c213b277..b2dc194e 100644
--- a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx
+++ b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx
@@ -15,17 +15,17 @@ export function AuthForm({ loginMethods }: { loginMethods: LoginMethod[] }) {
     const { step, appearance, baseUrl } = useAuthForm();
 
     return (
-        <div className="flex flex-col gap-4 max-w-[396px]">
+        <div className="flex flex-col gap-4 max-w-[448px]">
             {step === "initial" ? (
                 <div>
                     <h1
-                        className="text-2xl font-semibold text-custom-text-primary"
+                        className="text-2xl font-semibold text-cm-text-primary"
                         style={{ color: appearance?.colors?.textPrimary }}
                     >
                         Sign In
                     </h1>
                     <p
-                        className="text-base font-normal mb-5 text-[#67797F]"
+                        className="text-base font-normal mb-5 text-cm-text-secondary"
                         style={{ color: appearance?.colors?.textSecondary }}
                     >
                         Sign in using one of the options below
@@ -59,14 +59,19 @@ export function AuthForm({ loginMethods }: { loginMethods: LoginMethod[] }) {
 export const AuthFormBackButton = ({
     className,
     iconColor,
+    ringColor,
     ...props
-}: React.HTMLAttributes<HTMLButtonElement> & { iconColor?: string }) => {
+}: React.HTMLAttributes<HTMLButtonElement> & { iconColor?: string; ringColor?: string }) => {
     return (
         <button
             className={classNames(
-                "relative rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "relative rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-ring focus:ring-offset-2 disabled:pointer-events-none",
                 className
             )}
+            style={{
+                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
+                "--tw-ring-color": ringColor ?? "#1A73E8",
+            }}
             {...props}
         >
             <LeftArrowIcon className="w-6 h-6" style={{ color: iconColor }} />
diff --git a/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx b/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx
index 026ef226..df96a0fd 100644
--- a/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx
+++ b/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx
@@ -12,10 +12,12 @@ export default function AuthFormDialog({ open, loginMethods }: { open: boolean;
             <DialogContent
                 onInteractOutside={(e) => e.preventDefault()}
                 onOpenAutoFocus={(e) => e.preventDefault()}
-                className="py-12 px-10 rounded-t-lg"
+                closeButtonColor={appearance?.colors?.textPrimary}
+                closeButtonRingColor={appearance?.colors?.accent}
                 style={{
                     borderTopLeftRadius: appearance?.borderRadius,
                     borderTopRightRadius: appearance?.borderRadius,
+                    backgroundColor: appearance?.colors?.background,
                 }}
             >
                 <VisuallyHidden asChild>
diff --git a/packages/client/ui/react-ui/src/components/auth/methods/discord/DiscordSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/discord/DiscordSignIn.tsx
index 65b1c1e1..1369e46d 100644
--- a/packages/client/ui/react-ui/src/components/auth/methods/discord/DiscordSignIn.tsx
+++ b/packages/client/ui/react-ui/src/components/auth/methods/discord/DiscordSignIn.tsx
@@ -20,7 +20,7 @@ export function DiscordSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonEleme
     return (
         <button
             className={classNames(
-                "relative flex text-base p-4 bg-[#F0F2F4] text-[#00150D] border items-center w-full rounded-xl justify-center",
+                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary border border-cm-border items-center w-full rounded-xl justify-center",
                 "transition-all duration-200 ease-in-out", // Add smooth transition
                 "focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
                 isLoading ? "cursor-not-allowed" : ""
@@ -38,7 +38,12 @@ export function DiscordSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonEleme
             <>
                 <DiscordIcon className="h-[25px] w-[25px] absolute left-[18px]" />
                 {isLoading ? (
-                    <Spinner />
+                    <Spinner
+                        style={{
+                            color: appearance?.colors?.textSecondary,
+                            fill: appearance?.colors?.textPrimary,
+                        }}
+                    />
                 ) : (
                     <span
                         className="font-medium"
diff --git a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailOTPInput.tsx b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailOTPInput.tsx
index c42e8e0a..5fd1f870 100644
--- a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailOTPInput.tsx
+++ b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailOTPInput.tsx
@@ -41,12 +41,13 @@ export function EmailOTPInput() {
 
     return (
         <div>
-            <AuthFormBackButton onClick={handleOnBack} iconColor={appearance?.colors?.textPrimary} />
+            <AuthFormBackButton
+                onClick={handleOnBack}
+                iconColor={appearance?.colors?.textPrimary}
+                ringColor={appearance?.colors?.accent}
+            />
 
-            <div
-                className="flex flex-col items-center justify-start w-full bg-console-bg-default"
-                style={{ backgroundColor: appearance?.colors?.background }}
-            >
+            <div className="flex flex-col items-center justify-start w-full">
                 <div className="relative left-3">
                     <EmailOtpIcon
                         customAccentColor={appearance?.colors?.accent}
diff --git a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx
index 53d7421c..7c504f78 100644
--- a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx
+++ b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx
@@ -48,7 +48,7 @@ export function EmailSignIn() {
             <div className="flex flex-col items-start justify-start w-full rounded-lg">
                 <div className="w-full">
                     <p
-                        className="text-sm font-inter font-medium text-[#20343E] pb-2"
+                        className="text-sm font-inter font-medium text-cm-text-primary pb-2"
                         style={{ color: appearance?.colors?.textPrimary }}
                     >
                         Email
@@ -64,7 +64,7 @@ export function EmailSignIn() {
                         </label>
                         <input
                             className={classNames(
-                                "flex-grow text-left pl-[16px] pr-[80px] h-[56px] w-full border rounded-xl bg-console-bg-default placeholder:text-sm placeholder:text-opacity-60",
+                                "flex-grow text-left pl-[16px] pr-[80px] h-[58px] w-full border border-cm-border rounded-xl bg-cm-background-primary placeholder:text-sm placeholder:text-opacity-60",
                                 "transition-all duration-200 ease-in-out", // Add smooth transition
                                 "focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
                                 emailError ? "border-red-500" : ""
@@ -92,8 +92,10 @@ export function EmailSignIn() {
                             {emailError && <AlertIcon customColor={appearance?.colors?.danger} />}
                             {isLoading && (
                                 <Spinner
-                                // customPrimaryColor={uiConfig?.colors?.textPrimary}
-                                // customSecondaryColor={uiConfig?.colors?.border}
+                                    style={{
+                                        color: appearance?.colors?.textSecondary,
+                                        fill: appearance?.colors?.textPrimary,
+                                    }}
                                 />
                             )}
                             {!emailError && !isLoading && (
diff --git a/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx
index 1c605ccc..bde48c65 100644
--- a/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx
+++ b/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx
@@ -37,7 +37,7 @@ export function FarcasterSignIn() {
             <div>
                 <button
                     className={classNames(
-                        "relative flex text-base p-4 bg-[#F0F2F4] text-[#00150D] border items-center w-full rounded-xl justify-center",
+                        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary border border-cm-border items-center w-full rounded-xl justify-center",
                         "transition-all duration-200 ease-in-out", // Add smooth transition
                         "focus:outline-none focus:ring-1 focus:ring-opacity-50" // Add focus ring
                     )}
@@ -77,18 +77,19 @@ export function FarcasterSignIn() {
                         setStep("initial");
                     }}
                     iconColor={appearance?.colors?.textPrimary}
+                    ringColor={appearance?.colors?.accent}
                 />
 
                 <div className="flex flex-col items-center gap-4 mt-6">
                     <div className="text-center">
                         <h3
-                            className="text-lg font-semibold text-custom-text-primary"
+                            className="text-lg font-semibold text-cm-text-primary"
                             style={{ color: appearance?.colors?.textPrimary }}
                         >
                             Sign in with Farcaster
                         </h3>
                         <p
-                            className="text-base font-normal text-[#67797F]"
+                            className="text-base font-normal text-cm-text-secondary"
                             style={{ color: appearance?.colors?.textSecondary }}
                         >
                             Scan with your phone's camera to continue.
@@ -105,14 +106,19 @@ export function FarcasterSignIn() {
                             <QRCode uri={qrCodeUrl} size={280} />
                         ) : (
                             <div className="min-h-[246px] flex items-center justify-center">
-                                <Spinner />
+                                <Spinner
+                                    style={{
+                                        color: appearance?.colors?.textSecondary,
+                                        fill: appearance?.colors?.textPrimary,
+                                    }}
+                                />
                             </div>
                         )}
                     </div>
                     {qrCodeUrl ? (
                         <>
                             <p
-                                className="text-base text-center font-normal text-[#67797F]"
+                                className="text-base text-center font-normal text-cm-text-secondary"
                                 style={{ color: appearance?.colors?.textSecondary }}
                             >
                                 Alternatively, click on this link to open Warpcast.
@@ -121,7 +127,7 @@ export function FarcasterSignIn() {
                                 href={qrCodeUrl}
                                 rel="noopener noreferrer"
                                 target="_blank"
-                                className="text-base font-normal text-[#67797F]"
+                                className="text-base font-normal text-cm-ring"
                                 style={{ color: appearance?.colors?.textLink }}
                             >
                                 Open Warpcast
diff --git a/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx
index 3b365bbd..4b294d21 100644
--- a/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx
+++ b/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx
@@ -20,7 +20,7 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
     return (
         <button
             className={classNames(
-                "relative flex text-base p-4 bg-[#F0F2F4] text-[#00150D] border items-center w-full rounded-xl justify-center",
+                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary border border-cm-border items-center w-full rounded-xl justify-center",
                 "transition-all duration-200 ease-in-out", // Add smooth transition
                 "focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
                 isLoading ? "cursor-not-allowed" : ""
@@ -38,7 +38,12 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
             <>
                 <GoogleIcon className="h-[25px] w-[25px] absolute left-[18px]" />
                 {isLoading ? (
-                    <Spinner />
+                    <Spinner
+                        style={{
+                            color: appearance?.colors?.textSecondary,
+                            fill: appearance?.colors?.textPrimary,
+                        }}
+                    />
                 ) : (
                     <span
                         className="font-medium"
diff --git a/packages/client/ui/react-ui/src/components/common/Dialog.tsx b/packages/client/ui/react-ui/src/components/common/Dialog.tsx
index ab7fdf60..6cb2975a 100644
--- a/packages/client/ui/react-ui/src/components/common/Dialog.tsx
+++ b/packages/client/ui/react-ui/src/components/common/Dialog.tsx
@@ -26,22 +26,24 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     showCloseButton?: boolean;
+    closeButtonColor?: string;
+    closeButtonRingColor?: string;
 }
 
 const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
-    ({ className, children, showCloseButton = true, ...props }, ref) => (
+    ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
         <DialogPortal>
             <DialogOverlay />
             <DialogPrimitive.Content
                 ref={ref}
                 className={classNames(
-                    "fixed z-50 bg-background p-6 shadow-lg transition ease-in-out",
+                    "fixed z-50 p-6 pb-2 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
                     // Small viewport styles (bottom sheet)
-                    "inset-x-0 bottom-0 w-full border-t rounded-t-lg",
+                    "inset-x-0 bottom-0 w-full border-t rounded-t-xl",
                     "data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
                     // Regular viewport styles (centered modal)
-                    "xs:inset-auto xs:p-10 xs:left-[50%] xs:top-[50%] xs:translate-x-[-50%] xs:translate-y-[-50%]",
-                    "xs:max-w-[396px] xs:rounded-lg",
+                    "xs:inset-auto !xs:p-10 xs:left-[50%] xs:top-[50%] xs:translate-x-[-50%] xs:translate-y-[-50%]",
+                    "xs:max-w-[448px] xs:rounded-xl",
                     "xs:data-[state=closed]:animate-fade-out xs:data-[state=closed]:animate-zoom-out-95",
                     "xs:data-[state=open]:animate-fade-in xs:data-[state=open]:animate-zoom-in-95",
                     // Duration for animations
@@ -52,7 +54,14 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
             >
                 {children}
                 {showCloseButton && (
-                    <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-muted-foreground">
+                    <DialogPrimitive.Close
+                        className="absolute right-4 top-4 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary"
+                        style={{
+                            color: closeButtonColor,
+                            // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
+                            "--tw-ring-color": closeButtonRingColor ?? "#1A73E8",
+                        }}
+                    >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
                             width="24"
diff --git a/packages/client/ui/react-ui/src/components/common/Divider.tsx b/packages/client/ui/react-ui/src/components/common/Divider.tsx
index ed9401d5..2b902dd0 100644
--- a/packages/client/ui/react-ui/src/components/common/Divider.tsx
+++ b/packages/client/ui/react-ui/src/components/common/Divider.tsx
@@ -10,13 +10,16 @@ export function Divider({ appearance, text }: { appearance?: UIConfig; text?: st
 
     return (
         <div className="flex items-center justify-center w-full pt-1 pb-2">
-            <span className="w-full h-[1px] bg-[#E7E9ED]" style={{ backgroundColor: appearance?.colors?.border }} />
+            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
             {text != null ? (
-                <p className="flex-none px-2 text-sm text-[#00150D]" style={{ color: appearance?.colors?.textPrimary }}>
+                <p
+                    className="flex-none px-2 text-sm text-cm-text-primary"
+                    style={{ color: appearance?.colors?.textSecondary }}
+                >
                     {text}
                 </p>
             ) : null}
-            <span className="w-full h-[1px] bg-[#E7E9ED]" style={{ backgroundColor: appearance?.colors?.border }} />
+            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
         </div>
     );
 }
diff --git a/packages/client/ui/react-ui/src/components/common/InputOTP.tsx b/packages/client/ui/react-ui/src/components/common/InputOTP.tsx
index 47370343..cf7a251f 100644
--- a/packages/client/ui/react-ui/src/components/common/InputOTP.tsx
+++ b/packages/client/ui/react-ui/src/components/common/InputOTP.tsx
@@ -57,7 +57,7 @@ const InputOTPSlot = React.forwardRef<
         <div
             ref={ref}
             className={classNames(
-                "relative flex h-14 w-12 items-center justify-center border text-lg transition-all rounded-md text-custom-text-primary",
+                "relative flex h-14 w-12 items-center justify-center border text-lg transition-all rounded-md text-cm-text-primary",
                 isActive && `z-10 ring-2 ring-offset-background`,
                 className
             )}
diff --git a/packages/client/ui/react-ui/src/components/common/Spinner.tsx b/packages/client/ui/react-ui/src/components/common/Spinner.tsx
index 828af3de..d49919d4 100644
--- a/packages/client/ui/react-ui/src/components/common/Spinner.tsx
+++ b/packages/client/ui/react-ui/src/components/common/Spinner.tsx
@@ -1,10 +1,10 @@
 import type React from "react";
 import { classNames } from "@/utils/classNames";
 
-export const Spinner = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+export const Spinner = ({ className, style }: { className?: string; style?: React.CSSProperties }) => (
     <svg
         aria-hidden="true"
-        className={classNames("w-6 h-6 fill-secondary-foreground animate-spin text-primary-foreground", className)}
+        className={classNames("w-6 h-6 fill-cm-text-primary text-cm-text-secondary animate-spin", className)}
         style={style}
         viewBox="0 0 100 101"
         fill="none"
diff --git a/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts b/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts
index f7442dbf..24985881 100644
--- a/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts
+++ b/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts
@@ -45,7 +45,7 @@ export const useOAuthWindowListener = (
             popupWindowWidth = 600;
         }
 
-        const popup = await PopupWindow.init(generateOAuthUrl(provider, options.apiKey, options.baseUrl), {
+        const popup = await PopupWindow.init(await generateOAuthUrl(provider, options.apiKey, options.baseUrl), {
             awaitToLoad: false,
             crossOrigin: true,
             width: popupWindowWidth,
diff --git a/packages/client/ui/react-ui/src/twind.config.ts b/packages/client/ui/react-ui/src/twind.config.ts
index 51ae9bde..1bd58287 100644
--- a/packages/client/ui/react-ui/src/twind.config.ts
+++ b/packages/client/ui/react-ui/src/twind.config.ts
@@ -8,6 +8,15 @@ export default defineConfig({
             xs: "480px",
         },
         extend: {
+            colors: {
+                // Crossmint colors (cm- prefix)
+                "cm-text-primary": "#00150D",
+                "cm-text-secondary": "#67797F",
+                "cm-background-primary": "#FFFFFF",
+                "cm-muted-primary": "#F0F2F4",
+                "cm-border": "#D9D9D9",
+                "cm-ring": "#1A73E8",
+            },
             keyframes: {
                 "caret-blink": {
                     "0%,70%,100%": { opacity: "1" },
diff --git a/packages/client/ui/react-ui/src/utils/generateOAuthUrl.ts b/packages/client/ui/react-ui/src/utils/generateOAuthUrl.ts
index a2bc0deb..5712af68 100644
--- a/packages/client/ui/react-ui/src/utils/generateOAuthUrl.ts
+++ b/packages/client/ui/react-ui/src/utils/generateOAuthUrl.ts
@@ -1,21 +1,47 @@
 import type { OAuthProvider } from "@/types/auth";
 
-export function generateOAuthUrl(provider: OAuthProvider, apiKey: string, baseUrl: string) {
-    const redirectCallbackUrl = `${baseUrl}sdk/2024-09-26/auth/callback`;
+export async function generateOAuthUrl(provider: OAuthProvider, apiKey: string, baseUrl: string): Promise<string> {
+    const stytchPublicToken = await fetchStytchPublicToken(baseUrl, apiKey);
+    const redirectUrl = buildRedirectUrl(baseUrl, provider, apiKey);
+    const stytchDomain = getStytchDomain(baseUrl);
+    return buildOAuthUrl(stytchDomain, provider, stytchPublicToken, redirectUrl);
+}
+
+async function fetchStytchPublicToken(baseUrl: string, apiKey: string): Promise<string> {
+    try {
+        const response = await fetch(
+            `${baseUrl}api/2024-09-26/session/sdk/auth/stytch-public-token?${new URLSearchParams({ apiKey })}`
+        );
+        const data = await response.json();
+        return data.stytchPublicToken;
+    } catch (error) {
+        console.error("Error fetching stytch public token", error);
+        return "";
+    }
+}
 
-    const redirectUrl = `${baseUrl}api/2024-09-26/session/sdk/auth/authenticate?${new URLSearchParams({
+function buildRedirectUrl(baseUrl: string, provider: OAuthProvider, apiKey: string): string {
+    const redirectCallbackUrl = `${baseUrl}sdk/2024-09-26/auth/callback`;
+    return `${baseUrl}api/2024-09-26/session/sdk/auth/authenticate?${new URLSearchParams({
         callbackUrl: redirectCallbackUrl,
         signinAuthenticationMethod: provider,
         apiKey,
-    }).toString()}`;
+    })}`;
+}
 
-    const stytchDomain = baseUrl.includes("localhost") ? "test.stytch.com" : "api.stytch.com";
+function getStytchDomain(baseUrl: string): string {
+    return baseUrl.includes("localhost") ? "test.stytch.com" : "api.stytch.com";
+}
 
-    const oauthUrl = `https://${stytchDomain}/v1/public/oauth/${provider}/start?${new URLSearchParams({
-        public_token: "add <NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN> here",
+function buildOAuthUrl(
+    stytchDomain: string,
+    provider: OAuthProvider,
+    stytchPublicToken: string,
+    redirectUrl: string
+): string {
+    return `https://${stytchDomain}/v1/public/oauth/${provider}/start?${new URLSearchParams({
+        public_token: stytchPublicToken,
         login_redirect_url: redirectUrl,
         signup_redirect_url: redirectUrl,
-    }).toString()}`;
-
-    return oauthUrl;
+    })}`;
 }