Retrieving token with new scope/audience for SPA

Hi everyone !

I hope you are all doing well!

I am trying to create a simple login system, with the ability for a user to update their user_metadata. Since I don’t want to carry a token with too many permissions when it’s not needed, I first create the following token:

const client = createAuth0Client({
    domain: config.auth.domain,
    client_id: config.auth.client_id,
    redirect_uri: config.auth.redirect_uri
});

As you can see, I don’t put any audience or scope in here. I take the default values.

Then, if the user wants, I run the following code:

    client.getTokenWithPopup({
        audience: "https://***.auth0.com/api/v2/",
        scope:
            "openid profile email read:current_user update:current_user_metadata",
    }).then((token) => {
        fetch(`https://***.auth0.com/api/v2/users/${user.sub}`, {
            method: "PATCH",
            headers: {
                Authorization: `Bearer ${token}`,
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                user_metadata: {
                    example: "sample data",
                },
            }),
        })
            .then((data) => data.json())
            .then(console.log);
    });

When I run the code like this, I get the following error:
Bad HTTP authentication header format

When I try to add the audience to the authentication part (first piece of code), I then get another error:
Insufficient scope, expected any of: update:users,update:users_app_metadata,update:current_user_metadata

When I put the right scope and audience in the first piece of code, everything works and I’m able to update the user_metadata properly.

My question is: Why can’t I update the scope/audience of my token? Is there a way to do it?

Thank you very much!

Emmanuel