How to pass redirectTo to the Auth0 callback loader

[piotrkulpinski]

Hi,
I'm trying to set up a system where I can pass the redirectTo param to the callback endpoint.
So there's a link pointing to /auth/login?redirectTo=/custom-redirect but I can't pass the value to the /auth/callback.

I tried setting a cookie in Login page loader but it's not being set due to the throw in the authenticator.

Here's what I have:

// app/routes/auth/login.tsx
export const loader = async ({ request }: LoaderArgs) => {
  const session = await getSession(request.headers.get('cookie'))
  const url = new URL(request.url)
  const redirectTo = url.searchParams.get('redirectTo') || '/'
  session.set('redirectTo', redirectTo)

  // This will throw a redirect so the cookie is never set
  await authenticator.authenticate('auth0', request)

  return json(null, {
    headers: {
      'Set-Cookie': await commitSession(session),
    },
  })
}

// app/routes/auth/callback.tsx
export const loader = async ({ request }: LoaderArgs) => {
  const session = await getSession(request.headers.get('cookie'))
  const redirectTo = session.get('redirectTo') || '/'

  return await authenticator.authenticate('auth0', request, {
    successRedirect: redirectTo,
    failureRedirect: '/',
  })
}

Is there any other way to pass a redirect value from login to callback loader?

Thanks

[sergiodxa]

You have to keep the redirectTo in a cookie, avoid sessions since authenticate will also set the session.

Check https://sergiodxa.com/articles/add-returnto-behavior-to-remix-auth, there I also used the Auth0 strategy while I add the redirectTo support.