Support adding additional state during OAtuh authorization flow

[outofthisworld]

Can't find anything about this in the docs, but I'd like to be able to attach some additional data to the state during the OAuth authorization flow.

I'd like to add the URL that triggered the authentication flow, so in my callback I can redirect the user back to the source url after authentication rather than a hardcoded 'successRedirect'

[willin]

same question

[sergiodxa]

Add a separate cookie with the current URL, then you can read it in your callback to know where to redirect the user. Remember to ensure it's a safe redirect target since it could be tampered.

// app/cookie.server.ts
const returnToCookie = createCookie("returnTo", { httpOnly: true })

// app/routes/login.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  let referrer = request.headers.get("referer"); // the typo on referee is correct here https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer
  try {
    await authenticator.authenticate("oauth2", request, {
      successRedirect: safeRedirect(referrer, "/"),
      failureRedirect: "/login",
    })
  } catch (exception) {
    // catch the thrown redirect and append a set-cookie header
    if (exception instanceof Response) {
      // use append and not set, otherwise it will remove any other set-cookie
      exception.headers.append("set-cookie", await returnToCookie.serialize(referrer));
    }
    throw exception;
  }
}

// app/routes/callback.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  let returnTo = await returnToCookie.parse(request.headers.get("cookie"))
  await authenticator.authenticate("oauth2", request, {
    successRedirect: safeRedirect(returnTo, "/"),
    failureRedirect: "/login",
  })
}