How to pass custom parameters to the auth0 post-login actions using React SDK.

Hi Folks!!! Hope you all are doing great. I was bumping my head into the desk when I tried to figure out a way to pass custom parameters to the auth0 actions.

Here's my use case. I want to execute a post-login action that sets a custom picture for users on their user metadata on their first login. But I want to execute this action only for certain apps on my auth0 tenant with a feature flag.

Since there is no official documentation available on the auth0 page or in the community, I have no other choice but to find a solution by trial-and-error method. Luckily, I succeeded in that on my third attempt.

In case, if you wonder what auth0 action is, and how it works, Here's the well-explained official documentation.

Now, let's see how to pass and retrieve feature flags in actions.

Step 1: Add feature flags/Custom parameters to the Auth0 provider as mentioned in the below code.

     <Auth0Provider
        domain="your domain id"
        clientId="your app client id"
        authorizationParams={{redirect_uri: window.location.origin}}
        setCustomPicture="true"
        CustomParams="x" 
      >
        <App />
      </Auth0Provider>

Step 2: Login into your auth0 tenant dashboard and Select Actions -> Flows -> Login -> Add Action ->Build Custom. Create Action prompt will open, Enter the action name and select Login/Post Login trigger and click on the Create button.

Step 3: You can retrieve all custom params passed from auth0SDK from event.request.query object and user_metadata from the event.user object.

function getCustomPicture(email){
   // custom function logic to fetch user picture using mail.
   //returns picture for a user
}

exports.onExecutePostLogin = async (event, api) => {
 const {setCustomPicture,CustomParams1} = event?.request?.query || {};
 console.log(setCustomPicture, CustomParams1); // output: true x y
 const{ email, user_metadata } = event.user;

 if(!user_metadata?.custom_picture && setCustomPicture === "true"){
    let picture = getCustomPicture(email);
    api.user.setUserMetadata("custom_picture", picture);
  }
}

Step 4: Deploy your action and application again and verify that your action produces desired results.

Notes:

If you want to debug the actions, use the console logs and enable the Real-time Webtask Logs extension on your tenant.