@hexclave/next 1.0.3 → 1.0.6

package/src/components-page/forgot-password.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, Typography, cn } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp, useUser } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { StyledLink } from "../components/link";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { useTranslation } from "../lib/translations";
+
+export function ForgotPasswordForm({ onSent }: { onSent?: () => void }) {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    email: strictEmailSchema(t("Please enter a valid email")).defined().nonEmpty(t("Please enter your email"))
+  });
+
+  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const hexclaveApp = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+    try {
+      const { email } = data;
+      await hexclaveApp.sendForgotPasswordEmail(email);
+    onSent?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form
+      className="flex flex-col items-stretch stack-scope"
+      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+      noValidate
+    >
+      <Label htmlFor="email" className="mb-1">{t("Your Email")}</Label>
+      <Input
+        id="email"
+        type="email"
+        autoComplete="email"
+        {...register('email')}
+        onChange={() => clearErrors('email')}
+      />
+      <FormWarningText text={errors.email?.message?.toString()} />
+
+      <Button type="submit" className="mt-6" loading={loading}>
+        {t("Send Email")}
+      </Button>
+    </form>
+  );
+}
+
+
+export function ForgotPassword(props: { fullPage?: boolean }) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const user = useUser();
+  const [sent, setSent] = useState(false);
+
+  if (user) {
+    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;
+  }
+
+  if (sent) {
+    return <PredefinedMessageCard type='emailSent' fullPage={!!props.fullPage} />;
+  }
+
+  return (
+    <MaybeFullPage fullPage={!!props.fullPage}>
+      <div className={cn(
+        "stack-scope max-w-[380px] flex-basis-[380px]",
+        props.fullPage ? "p-4" : "p-0"
+      )}>
+        <div className="text-center">
+          <Typography type='h2'>{t("Reset Your Password")}</Typography>
+          <Typography>
+            {t("Don't need to reset?")}{" "}
+            <StyledLink href={hexclaveApp.urls['signIn']}>
+              {t("Sign in")}
+            </StyledLink>
+          </Typography>
+        </div>
+        <div className="mt-6">
+          <ForgotPasswordForm onSent={() => setSent(true)} />
+        </div>
+      </div>
+    </MaybeFullPage>
+  );
+};

package/src/components-page/hexclave-handler-client.test.tsx

@@ -0,0 +1,64 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { KnownErrors } from "@hexclave/shared";
+import { describe, expect, it, vi } from "vitest";
+import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app";
+import type { StackClientApp } from "../lib/hexclave-app/apps/interfaces/client-app";
+import { getRedirectToPageResult } from "./hexclave-handler-client";
+
+vi.mock("next/navigation", () => ({
+  RedirectType: {
+    replace: "replace",
+  },
+  notFound: () => {
+    throw new Error("notFound");
+  },
+  redirect: (url: string) => {
+    throw new Error(`redirect:${url}`);
+  },
+  usePathname: () => window.location.pathname,
+  useSearchParams: () => new URLSearchParams(window.location.search),
+}));
+
+function createAppTestDouble(options: {
+  redirectToHandler: (name: string, options: { replace: true }) => Promise<void>,
+}) {
+  const projectId = "00000000-0000-4000-8000-000000000000";
+  const app = {
+    projectId,
+    urls: {
+      handler: "http://localhost/handler",
+      signIn: `https://${projectId}.example-stack-hosted.test/handler/sign-in`,
+      home: "http://localhost",
+    },
+    redirectToHome: vi.fn(async () => {}),
+    [hexclaveAppInternalsSymbol]: {
+      getConstructorOptions: () => ({ urls: {} }),
+      redirectToHandler: options.redirectToHandler,
+    },
+  };
+
+  // This test double intentionally implements only the StackClientApp surface
+  // that HexclaveHandlerClient touches in this redirect path.
+  return app as unknown as StackClientApp<true>;
+}
+
+describe("HexclaveHandlerClient", () => {
+  it("returns known cross-domain redirect errors instead of treating them as unhandled async failures", async () => {
+    const redirectToHandler = vi.fn(async () => {
+      throw new KnownErrors.RedirectUrlNotWhitelisted();
+    });
+    const app = createAppTestDouble({ redirectToHandler });
+
+    const result = await getRedirectToPageResult(app, "signIn");
+
+    expect(redirectToHandler).toHaveBeenCalledWith("signIn", { replace: true });
+    expect(result.status).toBe("known-error");
+    if (result.status === "known-error") {
+      expect(result.error.errorCode).toBe("REDIRECT_URL_NOT_WHITELISTED");
+      expect(result.error.message).toContain("Redirect URL not whitelisted");
+    }
+  });
+});

package/src/components-page/hexclave-handler-client.tsx

@@ -0,0 +1,364 @@
+"use client";
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { KnownError } from "@hexclave/shared";
+import { captureError, HexclaveAssertionError } from "@hexclave/shared/dist/utils/errors";
+import { FilterUndefined, filterUndefined } from "@hexclave/shared/dist/utils/objects";
+import { use } from "@hexclave/shared/dist/utils/react";
+import { getRelativePart } from "@hexclave/shared/dist/utils/urls";
+import { notFound, redirect, RedirectType, usePathname, useSearchParams } from 'next/navigation'; // THIS_LINE_PLATFORM next
+import { Suspense, useMemo, useSyncExternalStore } from 'react';
+import { SignIn, SignUp, StackServerApp } from "..";
+import { useStackApp } from "../lib/hooks";
+import { HandlerUrls, StackClientApp, hexclaveAppInternalsSymbol } from "../lib/hexclave-app";
+import { isLocalHandlerUrlTarget, resolveUnknownHandlerPathFallbackUrl } from "../lib/hexclave-app/url-targets";
+import { AccountSettings } from "./account-settings";
+import { CliAuthConfirmation } from "./cli-auth-confirm";
+import { EmailVerification } from "./email-verification";
+import { ErrorPage } from "./error-page";
+import { ForgotPassword } from "./forgot-password";
+import { MagicLinkCallback } from "./magic-link-callback";
+import { MFA } from "./mfa";
+import { OAuthCallback } from "./oauth-callback";
+import { Onboarding } from "./onboarding";
+import { PasswordReset } from "./password-reset";
+import { SignOut } from "./sign-out";
+import { TeamInvitation } from "./team-invitation";
+
+import { KnownErrorMessageCard } from "../components/message-cards/known-error-message-card";
+import { MessageCard } from "../components/message-cards/message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+
+type Components = {
+  SignIn: typeof SignIn,
+  SignUp: typeof SignUp,
+  EmailVerification: typeof EmailVerification,
+  PasswordReset: typeof PasswordReset,
+  ForgotPassword: typeof ForgotPassword,
+  SignOut: typeof SignOut,
+  OAuthCallback: typeof OAuthCallback,
+  MagicLinkCallback: typeof MagicLinkCallback,
+  TeamInvitation: typeof TeamInvitation,
+  ErrorPage: typeof ErrorPage,
+  AccountSettings: typeof AccountSettings,
+  CliAuthConfirmation: typeof CliAuthConfirmation,
+  MFA: typeof MFA,
+  Onboarding: typeof Onboarding,
+};
+
+type RouteProps = {
+  params: Promise<{ stack?: string[] }> | { stack?: string[] },
+  searchParams: Promise<Record<string, string>> | Record<string, string>,
+};
+
+type RedirectToPageResult =
+  | { status: "success" }
+  | { status: "known-error", error: KnownError }
+  | { status: "unknown-error" };
+
+const availablePaths = {
+  signIn: 'sign-in',
+  signUp: 'sign-up',
+  emailVerification: 'email-verification',
+  passwordReset: 'password-reset',
+  forgotPassword: 'forgot-password',
+  signOut: 'sign-out',
+  oauthCallback: 'oauth-callback',
+  magicLinkCallback: 'magic-link-callback',
+  teamInvitation: 'team-invitation',
+  accountSettings: 'account-settings',
+  cliAuthConfirm: 'cli-auth-confirm',
+  mfa: 'mfa',
+  error: 'error',
+  onboarding: 'onboarding',
+} as const;
+
+const placeholderOrigin = "http://example.com";
+
+const pathAliases = {
+  // also includes the uppercase and non-dashed versions
+  ...Object.fromEntries(Object.entries(availablePaths).map(([key, value]) => [value, value])),
+  "log-in": availablePaths.signIn,
+  "register": availablePaths.signUp,
+} as const;
+
+export type BaseHandlerProps = {
+  fullPage: boolean,
+  componentProps?: {
+    [K in keyof Components]?: Parameters<Components[K]>[0];
+  },
+};
+
+function renderComponent(props: {
+  path: string,
+  searchParams: Record<string, string>,
+  fullPage: boolean,
+  componentProps?: BaseHandlerProps['componentProps'],
+  shouldRedirectToPage?: (name: keyof HandlerUrls) => boolean,
+  getDefaultUnknownPathUrl?: (path: string) => string | null,
+  onNotFound: () => any,
+  app: StackClientApp<any> | StackServerApp<any>,
+}) {
+  const { path, searchParams, fullPage, componentProps, shouldRedirectToPage, getDefaultUnknownPathUrl, onNotFound, app } = props;
+
+  switch (path) {
+    case availablePaths.signIn: {
+      if (shouldRedirectToPage?.('signIn')) return { redirectToPage: 'signIn' as const };
+      return <SignIn
+        fullPage={fullPage}
+        automaticRedirect
+        {...filterUndefinedINU(componentProps?.SignIn)}
+      />;
+    }
+    case availablePaths.signUp: {
+      if (shouldRedirectToPage?.('signUp')) return { redirectToPage: 'signUp' as const };
+      return <SignUp
+        fullPage={fullPage}
+        automaticRedirect
+        {...filterUndefinedINU(componentProps?.SignUp)}
+      />;
+    }
+    case availablePaths.emailVerification: {
+      if (shouldRedirectToPage?.('emailVerification')) return { redirectToPage: 'emailVerification' as const };
+      return <EmailVerification
+        searchParams={searchParams}
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.EmailVerification)}
+      />;
+    }
+    case availablePaths.passwordReset: {
+      if (shouldRedirectToPage?.('passwordReset')) return { redirectToPage: 'passwordReset' as const };
+      return <PasswordReset
+        searchParams={searchParams}
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.PasswordReset)}
+      />;
+    }
+    case availablePaths.forgotPassword: {
+      if (shouldRedirectToPage?.('forgotPassword')) return { redirectToPage: 'forgotPassword' as const };
+      return <ForgotPassword
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.ForgotPassword)}
+      />;
+    }
+    case availablePaths.signOut: {
+      if (shouldRedirectToPage?.('signOut')) return { redirectToPage: 'signOut' as const };
+      return <SignOut
+        searchParams={searchParams}
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.SignOut)}
+      />;
+    }
+    case availablePaths.oauthCallback: {
+      if (shouldRedirectToPage?.('oauthCallback')) return { redirectToPage: 'oauthCallback' as const };
+      return <OAuthCallback
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.OAuthCallback)}
+      />;
+    }
+    case availablePaths.magicLinkCallback: {
+      if (shouldRedirectToPage?.('magicLinkCallback')) return { redirectToPage: 'magicLinkCallback' as const };
+      return <MagicLinkCallback
+        searchParams={searchParams}
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.MagicLinkCallback)}
+      />;
+    }
+    case availablePaths.teamInvitation: {
+      if (shouldRedirectToPage?.('teamInvitation')) return { redirectToPage: 'teamInvitation' as const };
+      return <TeamInvitation
+        searchParams={searchParams}
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.TeamInvitation)}
+      />;
+    }
+    case availablePaths.accountSettings: {
+      return <AccountSettings
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.AccountSettings)}
+      />;
+    }
+    case availablePaths.error: {
+      return <ErrorPage
+        searchParams={searchParams}
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.ErrorPage)}
+      />;
+    }
+    case availablePaths.cliAuthConfirm: {
+      if (shouldRedirectToPage?.('cliAuthConfirm')) return { redirectToPage: 'cliAuthConfirm' as const };
+      return <CliAuthConfirmation
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.CliAuthConfirmation)}
+      />;
+    }
+    case availablePaths.mfa: {
+      if (shouldRedirectToPage?.('mfa')) return { redirectToPage: 'mfa' as const };
+      return <MFA
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.MFA)}
+      />;
+    }
+    case availablePaths.onboarding: {
+      if (shouldRedirectToPage?.('onboarding')) return { redirectToPage: 'onboarding' as const };
+      return <Onboarding
+        fullPage={fullPage}
+        {...filterUndefinedINU(componentProps?.Onboarding)}
+      />;
+    }
+    default: {
+      if (Object.values(availablePaths).includes(path as any)) {
+        throw new HexclaveAssertionError(`Path alias ${path} not included in switch statement, but in availablePaths?`, { availablePaths });
+      }
+      for (const [key, value] of Object.entries(pathAliases)) {
+        if (path.toLowerCase().replaceAll('-', '') === key.toLowerCase().replaceAll('-', '')) {
+          const redirectUrl = `${app.urls.handler}/${value}?${new URLSearchParams(searchParams).toString()}`;
+          return { redirect: redirectUrl };
+        }
+      }
+      const defaultUnknownPathUrl = getDefaultUnknownPathUrl?.(path);
+      if (defaultUnknownPathUrl != null) {
+        const defaultUnknownPathUrlObject = new URL(defaultUnknownPathUrl, "http://example.com");
+        for (const [key, value] of Object.entries(searchParams)) {
+          defaultUnknownPathUrlObject.searchParams.set(key, value);
+        }
+        return { redirect: toAbsoluteOrRelativeRedirectTarget(defaultUnknownPathUrlObject) };
+      }
+      return onNotFound();
+    }
+  }
+}
+
+export async function getRedirectToPageResult(
+  app: StackClientApp,
+  redirectToPage: keyof HandlerUrls,
+): Promise<RedirectToPageResult> {
+  try {
+    await app[hexclaveAppInternalsSymbol].redirectToHandler(redirectToPage, { replace: true });
+    return { status: "success" };
+  } catch (e) {
+    if (KnownError.isKnownError(e)) {
+      return { status: "known-error", error: e };
+    }
+    captureError("<HexclaveHandlerClient redirectToPage />", e);
+    return { status: "unknown-error" };
+  }
+}
+
+function RedirectToPage(props: {
+  app: StackClientApp,
+  fullPage?: boolean,
+  redirectToPage: keyof HandlerUrls,
+}) {
+  const redirectResultPromise = useMemo(
+    () => getRedirectToPageResult(props.app, props.redirectToPage),
+    [props.app, props.redirectToPage],
+  );
+
+  const redirectResult = use(redirectResultPromise);
+  if (redirectResult.status === "known-error") {
+    return <KnownErrorMessageCard error={redirectResult.error} fullPage={props.fullPage} />;
+  }
+  if (redirectResult.status === "unknown-error") {
+    return <PredefinedMessageCard type="unknownError" fullPage={props.fullPage} />;
+  }
+  return <MessageCard title="Redirecting..." fullPage={props.fullPage} />;
+}
+
+export function HexclaveHandlerClient(props: BaseHandlerProps & Partial<RouteProps> & { location?: string }) {
+  // Use hooks to get app
+  const hexclaveApp = useStackApp();
+  const clientOrigin = useClientOriginAfterHydration();
+
+  const pathname = usePathname();
+  const searchParamsFromHook = useSearchParams();
+  const currentLocation = pathname;
+  const searchParamsSource = searchParamsFromHook;
+
+  const { path, searchParams, handlerPath } = useMemo(() => {
+    const handlerPath = new URL(hexclaveApp.urls.handler, 'http://example.com').pathname;
+    const relativePath = currentLocation.startsWith(handlerPath)
+      ? currentLocation.slice(handlerPath.length).replace(/^\/+/, '')
+      : currentLocation.replace(/^\/+/, '');
+
+    return {
+      path: relativePath,
+      searchParams: Object.fromEntries(searchParamsSource.entries()),
+      handlerPath,
+    };
+  }, [currentLocation, searchParamsSource, hexclaveApp.urls.handler]);
+
+  const getDefaultUnknownPathUrl = (unknownPath: string): string | null => {
+    return resolveUnknownHandlerPathFallbackUrl({
+      defaultTarget: hexclaveApp[hexclaveAppInternalsSymbol].getConstructorOptions().urls?.default,
+      projectId: hexclaveApp.projectId,
+      unknownPath,
+    });
+  };
+
+  const shouldRedirectToPage = (name: keyof HandlerUrls): boolean => {
+    const url = hexclaveApp.urls[name];
+    const isCrossDomainLocalOauthCallback = name === "oauthCallback" && searchParams.hexclave_cross_domain_auth === "1";
+    if (isCrossDomainLocalOauthCallback) {
+      return false;
+    }
+    return !isLocalHandlerUrlTarget({
+      targetUrl: url,
+      handlerPath,
+      currentOrigin: clientOrigin,
+    });
+  };
+
+  const result = renderComponent({
+    path,
+    searchParams,
+    fullPage: props.fullPage,
+    componentProps: props.componentProps,
+    shouldRedirectToPage,
+    getDefaultUnknownPathUrl,
+    onNotFound: () =>
+      notFound()
+    ,
+    app: hexclaveApp,
+  });
+
+  const redirectToPage = (result != null && typeof result === 'object' && 'redirectToPage' in result) ? result.redirectToPage : undefined;
+
+  if (redirectToPage != null) {
+    return (
+      <Suspense fallback={<MessageCard title="Redirecting..." fullPage={props.fullPage} />}>
+        <RedirectToPage app={hexclaveApp} redirectToPage={redirectToPage} fullPage={props.fullPage} />
+      </Suspense>
+    );
+  }
+
+  if (result && 'redirect' in result) {
+    redirect(result.redirect, RedirectType.replace);
+  }
+
+
+  return result;
+}
+
+// filter undefined values in object. if object itself is undefined, return undefined
+function filterUndefinedINU<T extends {}>(value: T | undefined): FilterUndefined<T> | undefined {
+  return value === undefined ? value : filterUndefined(value);
+}
+
+function toAbsoluteOrRelativeRedirectTarget(url: URL): string {
+  return url.origin === "http://example.com" ? getRelativePart(url) : url.toString();
+}
+
+function useClientOriginAfterHydration(): string | undefined {
+  // The first hydrated render must match SSR. After hydration, React re-checks
+  // the snapshot and lets us distinguish same-path cross-origin handler URLs.
+  return useSyncExternalStore(
+    () => () => {},
+    () => window.location.origin,
+    () => undefined,
+  );
+}

package/src/components-page/hexclave-handler.tsx

@@ -0,0 +1,48 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+// This file exists solely so the following old, deprecated code from when StackHandler used to still take props:
+//     <StackHandler app={hexclaveServerApp} routeProps={props} />
+// does not throw the following error:
+//     Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
+// This file exists as a component that can be both client and server, ignores the non-serializable props, and returns <HexclaveHandlerClient />
+
+import { BaseHandlerProps, HexclaveHandlerClient } from "./hexclave-handler-client";
+
+type HexclaveHandlerProps = BaseHandlerProps & { location?: string } & {
+  /**
+   * @deprecated The app parameter is no longer necessary. You can safely remove it.
+   */
+  app?: any,
+
+  /**
+   * @deprecated The routeProps parameter is no longer necessary. You can safely remove it.
+   */
+  routeProps?: any,
+
+  /**
+   * @deprecated The params parameter is no longer necessary. You can safely remove it.
+   */
+  params?: any,
+
+  /**
+   * @deprecated The searchParams parameter is no longer necessary. You can safely remove it.
+   */
+  searchParams?: any,
+};
+
+function HandlerImpl({ app, routeProps, params, searchParams, ...props }: HexclaveHandlerProps) {
+  return <HexclaveHandlerClient {...props} />;
+}
+
+// Non-deprecated Hexclave-branded export.
+export const HexclaveHandler = HandlerImpl;
+
+/** @deprecated Use `HexclaveHandler` from the `@hexclave/*` package instead — same symbol, new brand name. See https://docs.hexclave.com/migration. */
+export const StackHandler = HandlerImpl;
+
+// Default export preserved for backwards compatibility (legacy `as`-rename re-exports).
+// Points at the deprecated alias so that `import StackHandler from ".../hexclave-handler"` still
+// surfaces the deprecation. Internal re-exports in template/src/index.ts use the named exports.
+export default StackHandler;

package/src/components-page/magic-link-callback.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { KnownErrors } from "@hexclave/shared";
+import { cacheFunction } from "@hexclave/shared/dist/utils/caches";
+import { throwErr } from "@hexclave/shared/dist/utils/errors";
+import React from "react";
+import { StackClientApp, useStackApp, useUser } from "..";
+import { MessageCard } from "../components/message-cards/message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { useTranslation } from "../lib/translations";
+
+const cacheSignInWithMagicLink = cacheFunction(async (hexclaveApp: StackClientApp<true>, code: string) => {
+  return await hexclaveApp.signInWithMagicLink(code);
+});
+
+export function MagicLinkCallback(props: {
+  searchParams?: Record<string, string>,
+  fullPage?: boolean,
+}) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const user = useUser();
+  const [result, setResult] = React.useState<Awaited<ReturnType<typeof hexclaveApp.signInWithMagicLink>> | null>(null);
+
+  if (user) {
+    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;
+  }
+
+  const invalidJsx = (
+    <MessageCard title={t("Invalid Magic Link")} fullPage={!!props.fullPage}>
+      <p>{t("Please check if you have the correct link. If you continue to have issues, please contact support.")}</p>
+    </MessageCard>
+  );
+
+  const expiredJsx = (
+    <MessageCard title={t("Expired Magic Link")} fullPage={!!props.fullPage}>
+      <p>{t("Your magic link has expired. Please request a new magic link if you need to sign-in.")}</p>
+    </MessageCard>
+  );
+
+  const alreadyUsedJsx = (
+    <MessageCard title={t("Magic Link Already Used")} fullPage={!!props.fullPage}>
+      <p>{t("The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.")}</p>
+    </MessageCard>
+  );
+
+  if (!props.searchParams?.code) {
+    return invalidJsx;
+  }
+
+  if (!result) {
+    return <MessageCard
+      title={t("Do you want to sign in?")}
+      fullPage={!!props.fullPage}
+      primaryButtonText={t("Sign in")}
+      primaryAction={async () => {
+        const result = await hexclaveApp.signInWithMagicLink(props.searchParams?.code || throwErr("No magic link provided"));
+        setResult(result);
+      }}
+      secondaryButtonText={t("Cancel")}
+      secondaryAction={async () => {
+        await hexclaveApp.redirectToHome();
+      }}
+    />;
+  } else {
+    if (result.status === 'error') {
+      if (KnownErrors.VerificationCodeNotFound.isInstance(result.error)) {
+        return invalidJsx;
+      } else if (KnownErrors.VerificationCodeExpired.isInstance(result.error)) {
+        return expiredJsx;
+      } else if (KnownErrors.VerificationCodeAlreadyUsed.isInstance(result.error)) {
+        return alreadyUsedJsx;
+      } else {
+        throw result.error;
+      }
+    }
+
+    return <MessageCard
+      title={t("Signed in successfully!")}
+      fullPage={!!props.fullPage}
+      primaryButtonText={t("Go home")}
+      primaryAction={async () => {
+        await hexclaveApp.redirectToHome();
+      }}
+    />;
+  }
+}