How can I set a cookie after calling auth.authenticate?

[andersr]

I would like to allow for initiating a magic link login flow from an arbitrary page and then when the user clicks on the magic link take them back to the originally requested page.

I attempted to follow the instructions in this article, but could not get that to work in my context.

I have created a sample repo that demos the issue.

Key part of the code in that repo:

export const action = async ({ request }: ActionArgs) => {
  // GOAL: set cookie with current URL so user is taken back here when clicking magic link in the email.
  let url = new URL(request.url);
  const cookieHeader = request.headers.get("Cookie");
  const cookie = (await returnToCookie.parse(cookieHeader)) || { url: "/" };

  cookie.url = url.pathname;

  await auth.authenticate(emailLinkAuthStrategy, request, {
    successRedirect: url.pathname,
    failureRedirect: "/login",
  });


// The code below is not called, or at least the cookie is not set if the above auth.authenticate call is included

  return json(
    {},
    {
      headers: {
        "Set-Cookie": await returnToCookie.serialize(cookie),
      },
    }
  );
};

Any tip, pointers re. what I might be doing wrong? Thanks in advance!

[sergiodxa]

Check https://sergiodxa.com/articles/add-returnto-behavior-to-remix-auth, you will have to catch the thrown response to append the Set-Cookie header.

[nathankirk91]

Thank you very much @sergiodxa very helpful article!

[andersr]

Ok, got it. Not sure how I feel about using an exception as control flow. Thanks for your response.