Creating a redirect query param - how to handle proper URL encoding?

[shawngustaw]

I have a route for my auth flow that has multiple query params for managing state, and a redirect param for where to go upon successfully authenticating:

  const [step, setStep] = useQueryState(
    'step',
    parseAsStringLiteral(signInSteps).withDefault('email'),
  );
  const [redirect] = useQueryState('redirect');

When the user gets pushed to this route, the query param looks like this:
"?redirect=${encodeURIComponent('/some/route?with=params'}"`

which correctly lands me on

/sign-in?redirect=%2Fsome%2Froute%3Fwith%3Dparams

but then as soon as I call setStep('password'), my query param now gets decoded and results in

/sign-in?redirect=/some/route?with=params which obviously is breaking the parsing of the query.

Is there a way to work around this? I essentially just want to have the URL perform no encoding/decoding on my behalf. I'd like to throw it into the URL already encoded, and then when I pull it from the URL I can decode it manually. Is this currently possible?

[franky47]

when I pull it from the URL I can decode it manually

The thing is anything in the URL is automatically decoded when reading from location.search.

I ran an experiment using your example and the value is indeed shown un-encoded in the URL, but is correctly interpreted when read back (either via nuqs or location.search):

Screen.Recording.2024-06-18.at.21.14.43.mov

// page.tsx

'use client'

import Link from 'next/link'
import { parseAsStringLiteral, useQueryState } from 'nuqs'
import { Suspense } from 'react'

export default function Page() {
  return (
    <>
      <Link
        href={`/app/repro-576?redirect=${encodeURIComponent('/from?a=b&c=/')}`}
      >
        Apply redirect
      </Link>
      <Suspense>
        <Client />
      </Suspense>
    </>
  )
}

const signInSteps = ['email', 'password']

function Client() {
  const [, setStep] = useQueryState(
    'step',
    parseAsStringLiteral(signInSteps).withDefault('email')
  )
  const [redirectFromNuqs] = useQueryState('redirect')
  const redirectFromLocation = new URLSearchParams(
    typeof location === 'undefined' ? '' : location.search
  ).get('redirect')
  console.dir({
    redirectFromNuqs,
    redirectFromLocation
  })
  return (
    <>
      <p>Redirect from nuqs: {redirectFromNuqs}</p>
      <p>Redirect from location: {redirectFromLocation}</p>
      <button id="start" onClick={() => setStep('password')}>
        Go to password step
      </button>
    </>
  )
}

[shawngustaw]

agh interesting. I am actually seeing the same behavior and just had a different app router problem that made it seem like it was coming from the url encoding. I had a server side auth redirect and the browser cache kept that page cached (with the redirect) and because I'd log in quickly and I'd hit that cached page again with the redirect back to auth again :). Fun NextJS stuff!

Thanks for the quick response though! Much appreciated!

[franky47]

Yeah caching in Next.js is painful, looking forward to 15. Glad you figured it all out!