Get viewer username inside extension

Extensions
1

How I can get username after viewer share their id?
I know about https://dev.twitch.tv/docs/api/reference#get-users endpoint, but it falls with “OAuth token is missing” message and I don’t see how I can get any valid token without extra OAuth authorization. And I also don’t want to use deprecated v5 api.

2

This example describes a suitable work flow:

You have to send it via an EBS

1 Like
3

I might be late to the party. But Helix API allows you to perform calls on extension frontend with helixToken provided by Twitch Extension Helper. Here’s how to get current viewer’s nickname:

Twitch.ext.onAuthorized(async (auth) => {
    if(!Twitch.ext.viewer.isLinked) return;
    const endpointUrl = "https://api.twitch.tv/helix/users";
    const url = `${endpointUrl}?id=${Twitch.ext.viewer.id}`;
    const response = await fetch(url, {
      headers: {
        "client-id": auth.clientId,
        Authorization: `Extension ${auth.helixToken}`,
      },
    });
    const body = await response.json();
    console.log("Username:", body.data.at(0)?.display_name)
})

See the official doc: Using the Twitch API in an Extension Front End | Twitch Developers

Edit: Updated code based on @BarryCarlyon’s corrections

4

Yes you are three years later (and on a post marked as solved)

When this post was originally posted the helix token didn’t exist. Things change in time and old posts stay as is

1 Like
5

When this post was originally posted the helix token didn’t exist

Oh now it makes sense lol. Leaving the frontend-only solution, just in case someone needs it

6

Your code is also incorrect auth.userID is the opaqueID not the users actual ID. So this will not fetch the user. And removing U leaves you with trash and shouldn’t be done. See also: Extensions Reference | Twitch Developers OpaqueID’s are (more like) session ID’s not userID’s

image

And your code doesn’t check if the viewing user has logged into the extension or not.

And assumes someone put the Twitch JS helper into a variable called Twitch.

So correcting your code: (not tested just corrected)

window.Twitch.ext.onAuthorized(async (auth) => {
    if (!window.Twitch.ext.viewer.isLinked) {
        return;
    }

    const endpointUrl = "https://api.twitch.tv/helix/users";
    const url = `${endpointUrl}?id=${window.Twitch.ext.viewer.id}`;
    const response = await fetch(url, {
      headers: {
        "client-id": auth.clientId,
        Authorization: `Extension ${auth.helixToken}`,
      },
    });
    const body = await response.json();
    console.log("Username:", body.data.at(0)?.display_name)
})
1 Like
7

Great! Thanks for the corrections