ext.onAuthorized never fires so token is always undefined in fetch requests

Extensions
1

I’ve tried this a few different ways but on my config js i have onAuthorized configuration.onChanged, onContext and onError all created and defined.

The issue is none of them ever fire as I have nothing in my console.

The part that causes the most issues right now is that my token which is set in onAuthorized (as token = auth.token) is always undefined, so when I send out my fetch we fail JWT authorization because undefined will never pass validation.

I was told that you can be in local test and those should work. But it doesn’t look like they are.

Any ideas?

2

Sounds like you either

  • have a 404 error and your JS never loaded
  • you didn’t include the JS Helper library

The “simplest” example

index.html set to load in a given view

<html>
<head>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="script.js"></script>
</head>
<body>
Hello
</body>
</html>

script.js in the same directory as the HTML

window.Twitch.ext.onAuthorized((auth) => {
    console.log('got auth');
});
3

I have all of those set in every single page.

<head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="config.css" rel="stylesheet" />
        <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
 </head>

var token, userID, secret;
twitch.onAuthorized((auth) =>{
    console.log("onAuthorized Fired!!!");
    token = auth.token;
    userID = auth.userID;
});

I did finally have onError Fire

TWITCH ERROR:  Error: Twitch.ext.configuration.set attempted before onAuthorized returned
    at Object.setConfiguration (:30:82223)
    at setConfig (F:\Local Documents\Documents\VisualStudioCodeProjects\FG Character Sheet Viewer Twitch Extension\config.js:74:30)
    at HTMLInputElement.<anonymous> (https://localhost:5501/config.js:55:9) {stack: 'Error: Twitch.ext.configuration.set attempted…mous> (https://localhost:5501/config.js:55:9)', message: 'Twitch.ext.configuration.set attempted before onAuthorized returned'}

So was this a timing thing? Should I give the page some time before running tests through it? Or is it since the page script is at the footer?

4

a config set would normally be done in response to the broadcaster clicking a button to save config.

so you’d have to have passed onAuth in order for the extension to be visible.

as if an extension doesn’t onAuth Tiwtch tends to hide the iFrame all together and throw a suitable “extension not loaded (clientID)” console log (I forget the specific wording)

a script with a src tag or a script with JS

Inline JS won’t work on hosted test/release. So would be wise to emulate that in local test to ensuire you test environment matches production.

Not sure why you are referencing a secret, secrets should never be in the frontend/visible to the end user.

if you didn’t get an onAuthorized then things are not ready to go.

onAuthorized is similar to document.onload so you know that everything is loaded.

If you are not getting an onAuthorized, you are actually loading/testing this on a Twitch Page and not direct loading your HTML?

Additionally if you are utilising hot reload, that will prevent the Twitch Extension helper operating correctly

5

yes between the body and html end tags

    </body>
    <script src="./config.js"></script>
</html>

The secret is old code that has no bearing anymore. I should have removed it, and did right after my last post.

Ok yeah so VS is injecting reloading. So I need to disable that.

I’m loading this in my webbrowser pointing to my liveserver running the extension.

Since this is a video component I didn’t want to go live just for testing. Unless OBS test stream will activate the extension?

6

You have to go live for an extension to be visible.

If you don’t want to go live on main just use a second account.

I do my extension testing on barrycarlyonbot for example

It will not, bandwidthtest will not activate the Twitch player and thus the extension will not load. BWTest gets as far as the Twitch server and then doesn’t send it further on then you open up https://inspector.twitch.tv/ and see what the server sees.

I suspect thats the culprit, might be loading then instant reloading to enable hot reload, and thus killing your Extension “connectivity” (for want of a better term) to the helper.

I don’t know too much about hot reload as I never use it.

That won’t invoke the extension helper.

Since the extension helper will try to talk to the supervisor frame around it, which doesn’t exist as you loaded it directly.

So the Extension helper cannot boot as it wasn’t loaded in the normal way

7

Cool, so either I test on my bot account OR, I bring back code streams. Easy enough. This also explains why my config set and config.broadcaster were all failing as well. I’m at the point where I have to be in the twitch environment.