Include user and metadata in user object

[alex-zwingli]

Overview
I'd like the ability to access user_metadata and app_metadata in the user object.

Details
When accessing the user object as shown below, I'm only able to access email, email_verified, name, nickname, picture, sub, and updated_at.

const { user } = useAuth0();

However, I'd also like the ability to access user_metadata and app_metadata so that I don't have to make separate calls and figure out how to store it securely. (I run a subscription site and want the ability to check subscription status within the user object, which is updated via an API in response to subscription events.)

[Fronix]

Having the same problem, I've integrated my app with my slack workspace using the custom extensions.

Using a hook I managed to add the slack_id that is saved on the userprofile

function (user, context, callback) {
  const namespace = 'https://mydomain/';
  context.idToken[namespace + 'user_metadata'] = user.user_metadata;
  context.idToken[namespace + 'app_metadata'] = user.app_metadata;
  context.idToken[namespace + 'slack_id'] = user.slack_id;
  callback(null, user, context);
}

However using the scope property in Auth0Provider does not add the slack_id to the user object. But if I call /userinfo manually using the accessToken from getAccessTokenSilently i do get the slack_id

/userinfo response

{
    "sub": "oauth2|slack|U0000..",
    "nickname": "...",
    "name": "....",
    "picture": "https://...",
    "updated_at": "2020-09-06T21:09:15.154Z",
    "email": "...",
    "https://mydomain/slack_id": "U0135T69N5A"
    ^^^^^ this does not get added to the user object
}

I've tried not adding the namespace in the hook but then slack_id is not shown.

Auth0Provider

....
    <Auth0Provider
      clientId={config.clientId}
      domain={config.domain}
      audience={config.audience}
      redirectUri={`${window.location.origin}/callback`}
      skipRedirectCallback={window.location.pathname !== '/callback'}
      onRedirectCallback={onRedirectCallback}
      advancedOptions={{
        defaultScope: 'openid profile email'
      }}
      scope='user_metadata app_metadata slack_id'
    >
      {children}
    </Auth0Provider>
...

[alex-zwingli]

Actually, I looks like the functionality is already there; I just wasn't using rules.

I've implemented Auth0 into my app with the following configuration.

const Auth0ProviderWithHistory = ({ children }) => {
  const config = {
    domain: '...',
    clientId: '...',
  };

  const history = useHistory();

  const onRedirectCallback = appState => {
    history.push(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={config.domain}
      clientId={config.clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};

This is what the user profile looks like.

{
  "stripeCustomerId": "cus_123abc"
}

And this is the rule I created.

function (user, context, callback) {
  const namespace = 'https://example.com/';
  context.idToken[namespace + 'stripeCustomerId'] = user.user_metadata.stripeCustomerId;
  return callback(null, user, context);
}

With this configuration, I received the following in the returned user object.

{
     "https://example.com/stripeCustomerId": "cus_123abc",
     ...
}

Thank you @Fronix for sharing your code. Unfortunately, I don't know why your code isn't working.

[skipjack]

Feels so weird that it needs to be exposed that way and we can't just add arbitrary keys (or at least scope and expose them under something like app_metadata or user_metadata) in our user objects. Also this demo suggests otherwise (though I tried and it doesn't seem to work):

https://auth0.com/resources/videos/learn-how-to-use-auth0-rules

I see some documentation for idToken here but it doesn't provide any rationale for the limitation...

https://auth0.com/docs/rules/context-object#properties

If anyone finds a cleaner way to expose additional data via rules, please share!

[alex-zwingli]

@skipjack You can find an explanation for why you need to add namespaced custom claims here.

[altruong]

With rules getting deprecated in replacement for Actions, I've gotten it to work with Actions

1. Navigate to Auth0 Dashboard > Actions > Flows.
2. Select the "Login" flow.
3. Click on the "Add Action" button.
4. Click on "Build Custom".
5. Name your Action (e.g., "Add Metadata to ID Token").
6. Add the following code to the Action:

exports.onExecutePostLogin = async (event, api) => {
  api.idToken.setCustomClaim('user_metadata', event.user.user_metadata);
};

Metadata should now appear in the users object

const { user } = useAuth0();

[stenrdj]

Unforuntly i'm experiencing the same issue , i've added the customClaim user_metadata to the idToken and accessToken , no success with accessing

import {useUser} from "@auth0/nextjs-auth0/client"

// getting user profile : 
const {user} = useUser()

// user doesnt have metadata