# Access User\_Metadata in React?

**URL:** <https://community.auth0.com/t/access-user-metadata-in-react/94766>\
**Category:** Get Help\
**Tags:** users, management-api\
**Created:** [November 19, 2022, 11:16pm UTC](https://community.auth0.com/t/access-user-metadata-in-react/94766 "2022-11-19T23:16:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![athome176](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/athome176/32/40591_2.png) [@athome176](https://community.auth0.com/u/athome176)\
**Post date:** [November 19, 2022, 11:16pm UTC](https://community.auth0.com/t/access-user-metadata-in-react/94766/1 "2022-11-19T23:16:47Z")

</div>

I added additionalSignUp fields for firstName and lastName to my custom Universal login. I can see the user\_metadata when looking at the user object in the dashboard - now I want to be able to reference it in my react app, e.g. show a welcome message with the user’s first name from metadata. I cannot quite figure out how to do this - is there a good working example somewhere than I can reference?

---

<div class="post-metadata">

**Author:** ![SaqibHussain](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/saqibhussain/32/42924_2.png) [@SaqibHussain](https://community.auth0.com/u/SaqibHussain)\
**Post date:** [November 20, 2022, 9:21pm UTC](https://community.auth0.com/t/access-user-metadata-in-react/94766/2 "2022-11-20T21:21:51Z")

</div>

Hi @athome176

Thanks for getting in touch with us at Auth0 Community.

To be able to access the user\_metadata via the SDK I believe you’ll need to add the user\_metadata to the users id\_token first via a Post Login Action, you can learn about Actions here [https://auth0.com/docs/customize/actions](https://auth0.com/docs/customize/actions)

For a more specific example you can review this community post [https://community.auth0.com/t/need-help-on-getting-idtoken-user-metadata-with-react-auth0-sdk/80740](https://community.auth0.com/t/need-help-on-getting-idtoken-user-metadata-with-react-auth0-sdk/80740)

Hopefully this will help you.

Warm regards.

---

<div class="post-metadata">

**Author:** ![athome176](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/athome176/32/40591_2.png) [@athome176](https://community.auth0.com/u/athome176)\
**Post date:** [November 21, 2022, 10:37pm UTC](https://community.auth0.com/t/access-user-metadata-in-react/94766/3 "2022-11-21T22:37:58Z")

</div>

Thanks for the reply Saqib! This is my post-login action:

```auto
exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'https://dev.my-app.com';
  const { firstName, lastName } = event.user.user_metadata;

  if (event.authorization) {
    // Set claims 
    api.idToken.setCustomClaim(`${namespace}/user_metadata.firstName`, firstName);
    api.idToken.setCustomClaim(`${namespace}/user_metadata.lastName`, lastName);
  }
};

```

But I still have no idea how to actually get anything from metadata in React. For example, here is my HomePage.js:

```auto
import React from "react";
import FadeIn from 'react-fade-in';

const HomePage = () => {

    return (
        <FadeIn>
            <div className="list row">
                <div className="col-md-6">
                    <h4>Welcome to your Home Page!</h4>
                </div>
            </div>
        </FadeIn>
    );
};

export default HomePage;

```

How would I grab the firstName from user\_metadata and insert it into the welcome message? This is where I have trouble - I cannot find any working examples of this anywhere and the documentation is not clear, so I have no idea. 😅

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [November 22, 2022, 5:57am UTC](https://community.auth0.com/t/access-user-metadata-in-react/94766/4 "2022-11-22T05:57:06Z")

</div>

Hey there @athome176!

Check out the useAuth0 hook, and in particular the getIdTokenClaims method since the metadata now exists as claims in the ID token:

> **[@auth0/auth0-react](https://auth0.github.io/auth0-react/modules.html#useAuth0)**
>
> Documentation for @auth0/auth0-react

It’s used to get profile information in our React quickstart here:

> **[Auth0 React SDK Quickstarts: Login](https://auth0.com/docs/quickstart/spa/react/01-login?_ga=2.74322321.229810830.1669091680-471938840.1666029771&_gl=1*9sma0b*rollup_ga*NDcxOTM4ODQwLjE2NjYwMjk3NzE.*rollup_ga_F1G3E656YZ*MTY2OTA5NTY5NS42OS4xLjE2NjkwOTU3MTQuNDEuMC4w#show-user-profile-information)**
>
> Auth0 allows you to add authentication to your React application quickly and to gain access to user profile information. This guide demonstrates how to integrate Auth0 with any new or existing React application using the Auth0 React SDK.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![athome176](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/athome176/32/40591_2.png) [@athome176](https://community.auth0.com/u/athome176)\
**Post date:** [November 23, 2022, 3:37am UTC](https://community.auth0.com/t/access-user-metadata-in-react/94766/5 "2022-11-23T03:37:30Z")

</div>

Thanks Tyf! It’s still not clear to me, unfortunately. I know how to get values like user.sub - but I am trying to fetch a value from user\_metadata, and that is what I don’t know how to do. How would I refer to my firstName value (for example) from user\_metadata after having used the rule to place it into the ID token?

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [December 7, 2022, 3:37am UTC](https://community.auth0.com/t/access-user-metadata-in-react/94766/6 "2022-12-07T03:37:57Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.