Get Viewer Display Name using Extension Frontend Helix Token

[ohadialex]

Hi,

I wanted to get the extension username and displayname using the Twitch Frontend Helix Token, I’m using ‘Extension’ instead of the ‘Bearer’, because I want my frontend to make the extension call. I was looking at some online resources, and some recommend generating an API token that will last for 60 days, and renew it. I was wondering why we have to do it that way, instead of using the Extension api token in my code below:

const getTwitchUserName = (userid) => {

    console.log("JWT Token = " + authentication.getToken())
    console.log("clientID = " + clientID)

    const defaultOptions = {
        headers: {
            'Authorization': authentication.getToken() ? `Extension ${authentication.getToken()}` : '',
            'client-id': clientID ? `${clientID}` : '',
        }
    }

    api.getTwitchUserName(userid, defaultOptions).then(response => {

        if (response != false) {
            let userData = JSON.parse(JSON.stringify(response))
            console.log("Twitch name data = " + userData)
            return userData['data']['data'][0]["login"] + " (" + userData['data']['data'][0]["display_name"] + ")"
        }
        else {
            return null
        }
    }).catch(error => {
        return null
    })
}

This fails for me.

I’ve checked the log, and I have the correct client-id as well as the authenticated helix token passed in.

What am I doing wrong?

[BarryCarlyon]

You cannot and should not generate a token in the front end of an extension. (And you can’t generate a helixToken yourself anyway)

Just use the helixToken. There is no reason to use another token for this use case of getting a users display name in the front end of an extension without a server.

Twitch will handle the generation of a new helixToken for you if needed.

[ohadialex]

Ok got it.

So if i’m not generating a token in the frontend as referenced in the code here:
Here it is recommended to use the client secret/extension secret to generate a 60 day api token:

BarryCarlyon/twitch_profile_extension/blob/main/ebs/server.js

So you are saying to use this method that I am currently using in my code & referenced here:

Using the Twitch API in an Extension Front End

However, my getToken() method will return the helix token stored in the Authentication.js, but my requests are complaining about an Invalid token (401)

GET https://api.twitch.tv/helix/users?id=xxxxx 401

[BarryCarlyon]

The top thing (which is mine) refers to getting a users username/display name on the server

If you are on the server then you wouldn’t (generlaly) use helixToken as you are not in the front end any more you would use a Client Credentials token.

My Example is what you did before helixToken existed and needed to get the users profile, but is still a valid approach today.

So if you need a display name in the front end you can either

• use helixToken to get it in the front end
• make your front end call your backend and pass up the helixToken and the backend then uses that token to make the call, no need for any other token (Extension prefix)
• make your front end call your backend load/generate a client credentials token and do the lookup (Bearer prefix)

I think you are mixing/matching tokens/proceedures and getting confused.

If you are calling your server, ignore helixToken and have the server use a clientCredntials token, as my example shows, which uses the Bearer prefix

TLDR:

If you are generating a client cretentials token, the prefix is Bearer
The Extension prefix only applies if the token is the helixToken.

I suspect you are 401-ing becuase you generated a client Creds and using the Extension prefix.

[ohadialex]

I’m not generating client credentials, i’m just uses the extensions client-id, for the extension (found in dev console) and i’m using the ‘Extension’ prefix here with the Helix Token.

Let me dig deeper into your response to see what I’m missing.

[BarryCarlyon]

Then it sounds like

@ohadialex

However, my getToken() method will return the helix token stored in the Authentication.js,

The helixToken expired, since you stored it, and it only has a lifetime of an hour or so (not sure have not chcked)… it’s not designed to be retained, and reused for too long.

So you’d have a user open your extension, extensions calls your EBS with the current helixToken, you use that token to make calls and discard it.

Since each user calling your EBS will call with their own JWT/HelixToken

[ohadialex]

I see. Yes maybe this is the case.

I just had a success with postman, so i’m going to follow the trail in my code to see where the mistake is.

[ohadialex]

Updated code - Using most recent Helix Token –

const getTwitchUserName = (userid) => {


    window.Twitch.ext.onAuthorized(function (auth) {

        const defaultOptions = {
            headers: {
                'Authorization': auth.helixToken ? `Extension ${auth.helixToken}` : '',
                'client-id': clientID ? `${clientID}` : '',
            }
        }

        api.getTwitchUserName(userid, defaultOptions).then(response => {

            if (response != false) {
                return response.data.data[0]["login"] + " (" + response.data.data[0]["display_name"] + ")"
            }
            else {
                return null
            }
        }).catch(error => {
            return null
        })
    })
}

Also its a good idea to check that the user granted permissions first :

        let viewer_id = authentication.getUserId() 

       if(viewer_id != null) {

        // Note this runs an api call so the viewerName won't be populated until the 
         api call has a response, so adjust code accordingly
        let viewerName = getTwitchUserName(viewer_id)

       }