Reflect the user_metadata updates in real-time in React

Help
1

Hello,

I apologize if this question has been answered before

I’m new to Auth0 and I happened to implement it in my newly created React application and after a couple of reads through the docs I managed to figure out how to update the user_metadata through the client

My only issue is that the changes are not being reflected on the screen unless I manually refresh the page

Does anybody have an idea where I could’ve messed up?

Thanks in advance

3

Hi @Skia,

Welcome to the Auth0 Community!

How are you getting the metadata to the screen? Are you getting it from the token?

4

Hello @dan.woda,

Thank you for getting back to me

I think i managed to solve it by implementing these 2 functions on the fly (it needs a lot of clean up, i’m aware haha) - I was just trying to make it work at a bare minimum level before i polish it

This is how i’m fetching the user_metadata

 useEffect(() => {
    const getUserMetadata = async () => {
      const domain = "##########";

      try {
        const accessToken = await getAccessTokenSilently({
          audience: `https://${domain}/api/v2/`,
          scope: "read:current_user",
          ignoreCache: true,
        });

        const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`;

        const metadataResponse = await fetch(userDetailsByIdUrl, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });

        const { user_metadata } = await metadataResponse.json();

        setUserMetadata(user_metadata);
      } catch (e) {
        console.log(e.message);
      }
    };

    getUserMetadata();
  }, [getAccessTokenSilently, user]);

And this is how i’m updating the user_metadata

 const updateUserMetadata = async () => {
    const domain = "##########";

    try {
      const accessToken = await getAccessTokenSilently({
        audience: `https://${domain}/api/v2/`,
        scope: "update:current_user_metadata",
        ignoreCache: true,
      });

      const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`;

      const { user_metadata } = await (
        await fetch(userDetailsByIdUrl, {
          method: "PATCH",
          headers: {
            Authorization: `Bearer ${accessToken}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            user_metadata: { testData: "testData" },
          }),
        })
      ).json();
 
      setUserMetadata(user_metadata);
    } catch (e) {
      console.log(e.message);
    }
  };

I’m not really sure if there is a better way to go about it
Am i making use of the getAccessTokenSilently function properly?

5

This looks like a valid solution. There are other ways to get metadata, but this would be a good way if you need the most up-to-date version of the metadata.

6

@dan.woda thank you for your response

Would you please point me towards where i can read more about how to fetch metadata in other ways?

7
1 Like