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

Help
1

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 (Auth0 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!

2

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:

1 Like
3

Thanks so much for responding, @markd!

I created a rule in auth0:

image
image1688×752 63.4 KB

Then I was trying to figure out how to get at the ID token, so I looked at Auth0.js v9 Reference 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?

4

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.

1 Like
5

I’m having the same issue and wasn’t able to find a solution here or elsewhere:

  • My React app is wrapped in the Auth0Provider from @auth0/auth0-react.
  • I have an auth0 object in props with keys such as ‘error’, 'getAccessTokenSilently, ‘isAuthenticated’, ‘isLoading’… etc. including my ‘user’ object.
  • The user object contains the usual keys (email, name, nickname…etc), but NOT the user_metadata as I expect after setting a rule to do so.
  • The rule is:
function (user, context, callback) {
  user.user_metadata = user.user_metadata || {};
  context.idToken[`user_metadata`] = user.user_metadata;
  callback(null, user, context);
}

I want to be able to call this.props.auth0.user.user_metadata from my app as I can with the other key values from the user object that persist.

Thanks in advance for any help.

1 Like
6

If you’re still having this problem, I’ve found a slightly tricky and not quite correct way to pass data to the useAuth0 hook.

With this rule

function (user, context, callback) {
  context.user_metadata = user.user_metadata || {};
  callback(null, {...user, profile: user.user_metadata}, context);
}

You can use any key from the User class instead of profile (except for the custom key).
image
I’ve tried different solutions like updating context.idToken. But it didn’t work for me.
Hope this helps someone.

7

Hey there!

As this topic is related to Rules - Hooks - Actions and Rules & Hooks are being deprecated soon I’m excited to let you know about our next Ask me Anything session in the Forum on Thursday, January 18 with the Rules, Hooks and Actions team on Rules & Hooks and why Actions matter! Submit your questions in the thread above and our esteemed product experts will provide written answers on January 18. Find out more about Rules & Hooks and why Actions matter! Can’t wait to see you there!

Learn more here!