Popup window login flow using JavaScript SDK

[booleanfiasco]

I have the OAuth login flow described in the JavaScript SDK documentation working correctly in a single window. However, I’d like to use the popup style offered by the Twitch.login function as described here: http://stackoverflow.com/questions/1878529/twitter-oauth-via-a-popup/3602045

(That’s the same thread linked in the comment for the login function in the SDK itself!)

I have everything working up to the point where it suggests sending the auth token back to my main window. My problem is: what exactly am I supposed to do with that token back in the main window? I’ve combed through the SDK and I don’t see any option to set the auth token or otherwise let that window know that everything has been authenticated correctly.

As it stands now, the login flow “works” but then the main window can’t make any API calls because it doesn’t actually know about the auth token. There seems to be some auto-magical storing of the token for the SDK instance that I need to be able to hook into to make this work but hours of searching have yielded nothing. Am I just missing something obvious?

[JB940]

as described in your stackoverflow link; you’ll see step 4:

setTwitterAuthData(…)

This would basically be a javascript function that you define in the main page.
This function does not exist: you will have to create it and make it do something.

The pop-up can call this function on the original window. In the function you might store the OAUTH to a database or to a (global) variable.

This way you can now access it in the rest of your page.

[DallasNChains]

JB940 is correct with regards to that Stack Overflow post. Also, have you tried the getToken function in the JavaScript SDK to see if it returns anything?

[booleanfiasco]

This would basically be a javascript function that you define in the main page.
This function does not exist: you will have to create it and make it do something.

Yeah, I understand that. What I’m trying to figure out is what that function needs to do with the key in order for the SDK to have access to it on the main page. It’s possible that nothing normally needs to be done and my confusion is due to having misimplemented some aspect of the flow.

JB940 is correct with regards to that Stack Overflow post. Also, have you tried the getToken function3 in the JavaScript SDK to see if it returns anything?

getToken returns ‘undefined’, which is my problem. It seems like the assumption in the Stack Overflow post is that the Twitch SDK reference on the main page is somehow supposed to have access to the token, even though it’s the SDK reference on the redirect that actually received it. Am I understanding that correctly?

Here’s my code that actually logs in to Twitch, which is sitting in my index.html file:

Twitch.login({
	redirect_uri: 'http://mydomain.com/oauth_redirect.html',
	scope: ['user_read', 'channel_read'],
	popup: true
});

And then on the oauth_redirect.html I have the following code:

$(function() { 				
	if (window.location.hash.indexOf('access_token') != -1) {
		var accessToken = window.location.hash.replace("#access_token=", "");
		accessToken = accessToken.substr(0, accessToken.indexOf('&scope'));
		window.opener.setAuthToken(accessToken);
		window.close();
	} else {
		// This is executed if someone blindly accesses the page.
		alert("no token");
	}				
});

Both index.html and oauth_redirect.html have references to the Twitch SDK, like so:

<script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>

After the redirect page closes itself, however, my main page does not have a valid access token.

[DallasNChains]

I’m looking into this from the SDK perspective. That SDK hasn’t been updated or maintained in a while (3+ years), unfortunately, so this may be an unknown bug. The popup: false case works as expected but popup: true doesn’t.

Having said that, one thing you could do is store it in sessionStorage, which is what the SDK does. Something like this in setAuthToken:

  var SESSION_KEY = 'twitch_oauth_session';
  window.sessionStorage.setItem(SESSION_KEY, token);
  
  console.log(window.sessionStorage.getItem(SESSION_KEY));

You can use the Storage.getItem function (as shown above) to reference the key for API calls or into a persistent store. This should work for all recent browsers (IE8+).

[booleanfiasco]

Thanks for the reply, I’ll give session storage a shot and see what I can do there. Regarding this, though:

That SDK hasn’t been updated or maintained in a while (3+ years), unfortunately, so this may be an unknown bug.

Is there a different web/JavaScript SDK that I should be using instead? I didn’t see any indication that this one was deprecated but I’m happy to switch to a more supported one if it’s available…

[DallasNChains]

Unfortunately, no, there isn’t a better one that is made by Twitch. You could look for community-supported libraries, but I’ve never used any to recommend one. Personally, I just use core JavaScript or something like superagent or then-request in my integrations. If you need the DOM handling, jQuery also works.

[booleanfiasco]

Understood, thanks for clarifying all this for me. I used the SDK since it was linked from the developer portal site and it made getting started quicker, but perhaps I’ll end up forking it and rolling my own version once my project gets a bit further along.

Thanks a bunch for your help!

[DallasNChains]

No problem! That’s what I’m here for.