Overview

Forward redirect_to and variant_id so users land in the right place or continue checkout after auth. When a user toggles between Sign In and Sign Up, these params must travel with them.

'use client'

import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { AppRoute } from '@/constants/routes'

export function SwitchAuthLink({ to }: { to: 'sign-in' | 'sign-up' }) {
  const sp = useSearchParams()
  const qp = new URLSearchParams()
  ;['redirect_to', 'variant_id'].forEach((k) => {
    const v = sp.get(k)
    if (v) qp.set(k, v)
  })
  const href =
    to === 'sign-in'
      ? `${AppRoute.SignInPage}?${qp}`
      : `${AppRoute.SignUpPage}?${qp}`

  return (
    <Link href={href}>
      {to === 'sign-in' ? 'Sign in' : 'Create account'}
    </Link>
  )
}

Key conventions

  • Always preserve redirect_to and variant_id when switching between auth screens — losing them means the user loses their checkout intent.
  • Only copy known params — don't forward arbitrary query strings to avoid open redirect vulnerabilities.
  • AppRoute.SignInPage / AppRoute.SignUpPage are type-safe constants from constants/routes.ts — never hardcode auth path strings.