In Auth0, how do I pass information back to the Action in a redirect request flow?

Question

I'm using a post-login action to gather some information on first login with Auth0.

Their documentation shows that I should use the api.sendUserTo() method to return a user to the frontend, gather the information then send it back.

It's not sensitive information (it's a user handle, which will be public anyhow) but auth0 seems to suggest that data should be passed back to the continue endpoint in a session token. However, I don't have a secret for signing a session token in my front end; that would defeat the whole point... and if this were on the backend I'd just use the management API.

Is it possible and safe to add it as a query param and then get that in the continue action? (If so, how do I get that query param?)

Here's my frontend code (simplified to canonical) example):

import { useRouter } from "next/router";

/**
 * On first login, before granting the access token, gather extra user data
 *
 */
export default function ChooseHandle() {
  // Receive state data from the interrupted Auth0 login flow, then continuing that flow on submission
  const router = useRouter();
  const { state } = router.query;
  const auth0Domain = "whatever";

  // THIS IS THE VALUE I NEED TO GET BACK TO THE CONTINUE ACTION
  const handle = "the-value";

  const onSubmit = () => {
    fetch(`https://${auth0Domain}/continue?state=${state}`, {
      method: "GET"
    });
  };

  return <button onClick={onSubmit}>submit</button>;
}

And here's what I have for my Auth0 actions code:

exports.onExecutePostLogin = async (event, api) => {
  if (event.user.app_metadata.handle) {
    return;
  }

  // Redirect user to choose a handle
  api.redirect.sendUserTo(
    "https://strands.octue.com/onboarding/choose-handle",
    {
      query: {}
    }
  );
};

exports.onContinuePostLogin = async (event, api) => {
  // Once the /continue endpoint has been called, unpack the signed token
  // and store the handle as app metadata...
  // But I don't see how I can encode that payload into a token in the frontend??!
  const payload = api.redirect.validateToken({
    secret: event.secrets.HANDLE_REDIRECT_SECRET
  });
  // What other way do I have of getting the handle here?
  console.log(payload.handle);
};

Suggestions most welcome!

Answer 1

If you want to retrieve the queryParam in your onContinuePostLogin function, you can use the folowing code:

event.request.query.name_of_your_query_param

Make sure to iclude your query parameter in the callback URL.

const onSubmit = () => {
fetch(`https://${auth0Domain}/continue?state=${state}&name_of_your_query_param=value`, {
  method: "GET"
});

};