Skip to content

Conversation

@jordanarldt
Copy link
Contributor

@jordanarldt jordanarldt commented Dec 26, 2025

What/Why?

  • Add a console.error to the /login/token/ route error handling block, this ensures that the server logs will display the error that occurred during token login which is useful for troubleshooting.
  • Display a generic login error when this type of failure occurs. Previously, there was no user feedback during an invalid token login which is not great UX.
  • Add E2E tests for the functionality

Testing

E2E testing, manual testing

Migration

1. Add invalidToken translation key to the Auth.Login namespace:

"invalidToken": "Your login link is invalid or has expired. Please try logging in again.",

2. In core/app/[locale]/(default)/(auth)/login/token/[token]/route.ts, add a console.error in the catch block to log the error details:

} catch (error) {
  // eslint-disable-next-line no-console
  console.error(error);

  // ...
}

3. In core/app/[locale]/(default)/(auth)/login/page.tsx, add error prop to searchParams and pass it down into the SignInSection component:

export default async function Login({ params, searchParams }: Props) {
  const { locale } = await params;
  const { redirectTo = '/account/orders', error } = await searchParams;

  setRequestLocale(locale);

  const t = await getTranslations('Auth.Login');
  const vanityUrl = buildConfig.get('urls').vanityUrl;
  const redirectUrl = new URL(redirectTo, vanityUrl);
  const redirectTarget = redirectUrl.pathname + redirectUrl.search;
  const tokenErrorMessage = error === 'InvalidToken' ? t('invalidToken') : undefined;

  return (
    <>
      <ForceRefresh />
      <SignInSection
        action={login.bind(null, { redirectTo: redirectTarget })}
        emailLabel={t('email')}
        error={tokenErrorMessage}
        ...

4. Update core/vibes/soul/sections/sign-in-section/index.tsx and add the error prop, and pass it down to SignInForm:

interface Props {
  // ... existing props
  error?: string;
}

// ...

export function SignInSection({
  // ... existing variables
  error,
}: Props) {
  // ...
  <SignInForm
    action={action}
    emailLabel={emailLabel}
    error={error}

5. Update core/vibes/soul/sections/sign-in-section/sign-in-form.tsx to take the error prop and display it in the form errors:

interface Props {
  // ... existing props
  error?: string;
}

export function SignInForm({
  // ... existing variables
  error,
}: Props) {
  // ...
  useEffect(() => {
    // If the form errors change when an "error" search param is in the URL,
    // the search param should be removed to prevent showing stale errors.
    if (form.errors) {
      const url = new URL(window.location.href);

      if (url.searchParams.has('error')) {
        url.searchParams.delete('error');
        window.history.replaceState({}, '', url.toString());
      }
    }
  }, [form.errors]);

  const formErrors = () => {
    // Form errors should take precedence over the error prop that is passed in.
    // This ensures that the most recent errors are displayed to avoid confusion.
    if (form.errors) {
      return form.errors;
    }

    if (error) {
      return [error];
    }

    return [];
  };

  return (
    <form {...getFormProps(form)} action={formAction} className="flex grow flex-col gap-5">
      // ...
      <SubmitButton>{submitLabel}</SubmitButton>
      {formErrors().map((err, index) => (
        <FormStatus key={index} type="error">
          {err}
        </FormStatus>
      ))}
    </form>
  );
}

6. Copy all changes in the core/tests directory

@jordanarldt jordanarldt requested a review from a team as a code owner December 26, 2025 22:37
@changeset-bot
Copy link

changeset-bot bot commented Dec 26, 2025

🦋 Changeset detected

Latest commit: 7ee81e7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@bigcommerce/catalyst-core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Dec 26, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
catalyst Ready Ready Preview, Comment Dec 26, 2025 10:49pm
1 Skipped Deployment
Project Deployment Review Updated (UTC)
catalyst-uplift-vertex Ignored Ignored Dec 26, 2025 10:49pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants