From 7f850eedd961c3e221c41a98e7485869b886cbbd Mon Sep 17 00:00:00 2001 From: jmderby Date: Wed, 23 Oct 2024 10:59:21 -0700 Subject: [PATCH] made changes to correspond to recent backend changes --- .../auth/methods/email/EmailOTPInput.tsx | 13 +++++++---- .../auth/methods/email/EmailSignIn.tsx | 10 ++------- .../auth/methods/google/GoogleSignIn.tsx | 4 ++-- .../ui/react-ui/src/hooks/useAuthSignIn.ts | 4 ++-- .../src/hooks/useOAuthWindowListener.ts | 4 ++-- .../providers/auth/AuthFormProvider.test.tsx | 7 +++--- .../src/providers/auth/AuthFormProvider.tsx | 22 +++++++++---------- packages/client/ui/react-ui/src/types/auth.ts | 2 +- 8 files changed, 33 insertions(+), 33 deletions(-) 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 d10458cb..64bf4be1 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 @@ -22,10 +22,15 @@ export function EmailOTPInput({ const handleOnSubmit = async () => { setLoading(true); try { - const oneTimeSecret = await onConfirmEmailOtp(otpEmailData?.email ?? "", otpEmailData?.state ?? "", token, { - baseUrl, - apiKey, - }); + const oneTimeSecret = await onConfirmEmailOtp( + otpEmailData?.email ?? "", + otpEmailData?.emailId ?? "", + token, + { + baseUrl, + apiKey, + } + ); await fetchAuthMaterial(oneTimeSecret as string); setDialogOpen(false); 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 dd0ca908..e74b413e 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 @@ -28,15 +28,9 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm try { const trimmedEmailInput = emailInput.trim().toLowerCase(); - const createSignInTokenRes = (await onEmailSignIn(trimmedEmailInput, { baseUrl, apiKey })) as { - user: { - email: string; - emailId: string; - userId: string; - }; - }; + const emailSignInRes = (await onEmailSignIn(trimmedEmailInput, { baseUrl, apiKey })) as { emailId: string }; - setOtpEmailData({ email: createSignInTokenRes.user.email, state: createSignInTokenRes.user.emailId }); + setOtpEmailData({ email: trimmedEmailInput, emailId: emailSignInRes.emailId }); setStep("otp"); } catch (_e: unknown) { setIsLoading(false); 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 22a362cf..6024e789 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 @@ -6,13 +6,13 @@ import { useAuthForm } from "@/providers/auth/AuthFormProvider"; import { classNames } from "@/utils/classNames"; export function GoogleSignIn({ ...props }: ButtonHTMLAttributes) { - const { step, apiKey, baseUrl, appearance, isLoadingOauthUrl, fetchAuthMaterial } = useAuthForm(); + const { step, apiKey, baseUrl, appearance, isLoadingOauthUrlMap, fetchAuthMaterial } = useAuthForm(); const { createPopupAndSetupListeners, isLoading: isLoadingOAuthWindow } = useOAuthWindowListener("google", { apiKey, baseUrl, fetchAuthMaterial, }); - const isLoading = isLoadingOauthUrl || isLoadingOAuthWindow; + const isLoading = isLoadingOauthUrlMap || isLoadingOAuthWindow; if (step !== "initial") { return null; diff --git a/packages/client/ui/react-ui/src/hooks/useAuthSignIn.ts b/packages/client/ui/react-ui/src/hooks/useAuthSignIn.ts index 37cce05c..3a209285 100644 --- a/packages/client/ui/react-ui/src/hooks/useAuthSignIn.ts +++ b/packages/client/ui/react-ui/src/hooks/useAuthSignIn.ts @@ -36,7 +36,7 @@ async function onEmailSignIn(email: string, options: { baseUrl: string; apiKey: async function onConfirmEmailOtp( email: string, - state: string, + emailId: string, token: string, options: { baseUrl: string; apiKey: string } ) { @@ -47,7 +47,7 @@ async function onConfirmEmailOtp( apiKey: options.apiKey, token, locale: "en", - state, + state: emailId, callbackUrl: `${options.baseUrl}api/2024-09-26/session/sdk/auth/we-dont-actually-use-this-anymore`, }); const response = await fetch(`${options.baseUrl}api/2024-09-26/session/sdk/auth/authenticate?${queryParams}`, { diff --git a/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts b/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts index 104eb162..c2ca3c51 100644 --- a/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts +++ b/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts @@ -13,7 +13,7 @@ export const useOAuthWindowListener = ( fetchAuthMaterial: (refreshToken: string) => Promise; } ) => { - const { oauthUrl } = useAuthForm(); + const { oauthUrlMap } = useAuthForm(); const [isLoading, setIsLoading] = useState(false); const childRef = useRef | null>(null); @@ -37,7 +37,7 @@ export const useOAuthWindowListener = ( throw new Error("Child window not initialized"); } setIsLoading(true); - const popup = await PopupWindow.init(oauthUrl[provider], { + const popup = await PopupWindow.init(oauthUrlMap[provider], { awaitToLoad: false, crossOrigin: true, width: 400, diff --git a/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.test.tsx b/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.test.tsx index 93c05f47..d92634a7 100644 --- a/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.test.tsx +++ b/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.test.tsx @@ -5,7 +5,8 @@ import type { LoginMethod } from ".."; // Mock component to test the AuthFormProvider function TestComponent() { - const { step, apiKey, baseUrl, loginMethods, setStep, setDialogOpen, oauthUrl, isLoadingOauthUrl } = useAuthForm(); + const { step, apiKey, baseUrl, loginMethods, setStep, setDialogOpen, oauthUrlMap, isLoadingOauthUrlMap } = + useAuthForm(); return (
@@ -19,8 +20,8 @@ function TestComponent() { -
{JSON.stringify(oauthUrl)}
-
{isLoadingOauthUrl.toString()}
+
{JSON.stringify(oauthUrlMap)}
+
{isLoadingOauthUrlMap.toString()}
); } diff --git a/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.tsx b/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.tsx index fc3b36d9..303c7cd2 100644 --- a/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.tsx +++ b/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.tsx @@ -16,8 +16,8 @@ interface AuthFormContextType { fetchAuthMaterial: (refreshToken: string) => Promise; appearance?: UIConfig; loginMethods: LoginMethod[]; - oauthUrl: OAuthUrlMap; - isLoadingOauthUrl: boolean; + oauthUrlMap: OAuthUrlMap; + isLoadingOauthUrlMap: boolean; setStep: (step: AuthStep) => void; setDialogOpen: (open: boolean) => void; } @@ -46,30 +46,30 @@ export const AuthFormProvider = ({ initialState, }: { children: ReactNode; initialState: ContextInitialStateProps }) => { const [step, setStep] = useState("initial"); - const [oauthUrl, setOauthUrl] = useState(initialOAuthUrlMap); - const [isLoadingOauthUrl, setIsLoadingOauthUrl] = useState(true); + const [oauthUrlMap, setOauthUrlMap] = useState(initialOAuthUrlMap); + const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = useState(true); const { loginMethods, apiKey, baseUrl } = initialState; useEffect(() => { const preFetchAndSetOauthUrl = async () => { - setIsLoadingOauthUrl(true); + setIsLoadingOauthUrlMap(true); try { const oauthProviders = loginMethods.filter( (method): method is OAuthProvider => method in initialOAuthUrlMap ); - const OAuthPromiseList = oauthProviders.map(async (provider) => { + const oauthPromiseList = oauthProviders.map(async (provider) => { const url = await getOAuthUrl(provider, { apiKey, baseUrl }); return { [provider]: url }; }); - const oauthUrlMap = Object.assign({}, ...(await Promise.all(OAuthPromiseList))); - setOauthUrl(oauthUrlMap); + const oauthUrlMap = Object.assign({}, ...(await Promise.all(oauthPromiseList))); + setOauthUrlMap(oauthUrlMap); } catch (error) { console.error("Error fetching OAuth URLs:", error); } finally { - setIsLoadingOauthUrl(false); + setIsLoadingOauthUrlMap(false); } }; preFetchAndSetOauthUrl(); @@ -82,8 +82,8 @@ export const AuthFormProvider = ({ fetchAuthMaterial: initialState.fetchAuthMaterial, appearance: initialState.appearance, loginMethods, - oauthUrl, - isLoadingOauthUrl, + oauthUrlMap, + isLoadingOauthUrlMap, setDialogOpen: initialState.setDialogOpen ?? (() => {}), setStep, }; diff --git a/packages/client/ui/react-ui/src/types/auth.ts b/packages/client/ui/react-ui/src/types/auth.ts index 684f011c..8a8064d0 100644 --- a/packages/client/ui/react-ui/src/types/auth.ts +++ b/packages/client/ui/react-ui/src/types/auth.ts @@ -1,4 +1,4 @@ export type OtpEmailPayload = { email: string; - state: string; + emailId: string; };