Rule for passing app_metadata (like user's moderator status) to profile payload in React SPA?

Hi! I’m confused about how to add my app_metadata object to my profile payload in my React single-page app.

This is what my payload currently looks like:

name: "luna lovegood"
nickname: "luna"
picture: "https://pbs.twimg.com/profile_images/9151685889/Z1AeI4_b_normal.jpg"
sub: "twitter|1116216"
updated_at: "2020-06-23T02:27:53.940Z"

This is what I would like the payload to return:

name: "luna lovegood"
nickname: "luna"
picture: "https://pbs.twimg.com/profile_images/9151685889/Z1AeI4_b_normal.jpg"
sub: "twitter|1116216"
updated_at: "2020-06-23T02:27:53.940Z",
app_metadata: { moderator: true }

In the Auth0 dashboard, I made sure to update the app_metadata for that particular user to include { moderator: true }. And I read in the docs that I’m supposed to create a rule (https://auth0.com/docs/rules).

I took the example rule Move User Metadata Attributes To Profile Root Attributes and changed the references to user_metadata to app_metadata, but couldn’t get it to work.

What am I missing? Is there another easy way to update the profile payload with custom user attributes like the users’s moderator status?

Thanks in advance!

Hello @lpatmo,

Welcome to the Community! You need to add the attributes you are interested in to the user’s access token and / or ID token, as demonstrated here:

I have another simple example at the link below, which adds an attribute from app_metadata to the ID token:

Thanks so much for responding, @markd!

I created a rule in auth0:

Then I was trying to figure out how to get at the ID token, so I looked at https://auth0.com/docs/libraries/auth0js/v9 and changed this bit in my code:

export function Auth0Provider({ children }) {
         domain: process.env.REACT_APP_DOMAIN,
         client_id: process.env.REACT_APP_clientId,
         redirect_uri: window.location.origin,
+        response_type: "id_token",
       });
       setAuth0Client(auth0);

(I am using import createAuth0Client from "@auth0/auth0-spa-js";)

But when I restarted the app and went to localhost:8888, I didn’t see the new moderator status in the profile response. Does anyone know what I’m doing wrong?

Maybe something related an active session? Rules only execute on login events … though even a silent auth0 will trigger rules so that’s probably not the issue. Still, you could call logout to make sure your session is terminated.

I’m not certain why it isn’t working, but I wanted to provide some feedback. The lines:

  user.app_metadata = user.app_metadata || {};
  user.app_metadata.uuid = user.app_metadata.uuid || {};

just check for the presence of app_metadata and uuid. There’s probably a better way to do this in javascript (I’m not a javascript expert), but you would want the second line to be:

  user.app_metadata.moderator = user.app_metadata.moderator || {};

Also the namespace doesn’t need to be the URL of your app. By convention we use a URL, but it does not need to be a resolvable address. For example, we use https://sso.ourcompany.com/claims, even though sso.ourcompany.com is not a resolvable address.