Extracting implicit auth token from URL

API
1

I’m feeling like i have bigger holes in my understanding than i thought i had. I’ve been trying for hours to try and extract the #auth token from the redirect on localhost while trying to implement the OAuth/OIDC code flow. Ideally i want to use OIDC Implicit Code Flow as i don’t intend of having a backend. I just want this to run on a website.

Firstly, i am running a .html, .css, .js combo on my local PC.
I’ve set up a button in html to run a function in the javascript to redirect the user to the authentication.

<button type="button" onclick="OAuthLogin()">Twitch Login</button>

The function uses window.open() to redirect the user to a new tab. (I’m not using claims in the url yet for simplicity)
I do have the correct client id in place of in the url.

var AuthWindow = "";
function OAuthLogin()
{
	AuthWindow = window.open("https://id.twitch.tv/oauth2/authorize?client_id=<MyClientID>&redirect_uri=http://localhost&response_type=token&scope=user:edit");
}

This opens a new tab with ‘about:blank’ in the address bar initially. After a few moments it changes to:

http://localhost/#access_token=<token>&scope=user%3Aedit&token_type=bearer
I’ve tried to extract the url via the window object returned, such as: AuthWindow.location.href, AuthWIndow.document.url etc… but they all return as blank or about:blank. Hence why i think this is a timing issue, and then becomes a security issue?

I have tried to add code to see if the new page had finished loading, but even put immediately after the call, .onload and readystate trigger immediately and say it is complete whilst it still says ‘about:blank’ in the address bar.
EDIT: I forgot to mention i tried addind event listeners to the new windows document, but they never triggered, i tried checking for load, change, hashchange, message. None triggered, i believe because it was already considered to be readyState : complete.

I tried to have another button on the first page to access and check the details after it had finished loading by storing the return of the window.open() but then i get this error:

 scripts.js:85 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at GetAuthURL (file:///D:/Projects/HTML/CommunitySite/js/scripts.js:85:32)
    at HTMLButtonElement.onclick (file:///D:/Projects/HTML/CommunitySite/Community.html:44:47)

So i’m pretty stumped. I feel like i’m missing some basic knowledge which makes it painful to ask for help here, i’ve been trawling through many articles online but i can’t seem to find a solution to this.

The redirect i open up showed me originally the usual Twitch auth page i expected and i hit accept, but since then it now just shows the URL as i stated, but the content of the page itself says:

This site can’t be reached, localhost refused to connect

So is it also a big problem that i’m doing all this on my local machine?

Again, i’m trying to extract the # info from the URL, but due to timing/security/something… i can’t seem to get access to it to feed the token back to the original script as a variable.

Any help on this would be greatly appreciated… and sorry for my lack of basic knowledge on this.

2

Popping the new window is just confusing the matter, as you’ll have faff passing the token from your new window back to the first window.

This snippet will grab and parse the hash

<script>
        if (document.location.hash) {
            var parsedHash = new URLSearchParams(window.location.hash.substr(1));
            if (parsedHash.get('access_token')) {
                var access_token = parsedHash.get('access_token');
                document.getElementById('access_token').textContent = 'Your Access Key from the #url: ' + access_token;
~snip~

Skip the new window stuff and just have a <a href="LinkToTwitchWithRedirectBack">

I have written a full implicit auth one pager here, that might help

It’s not for OIDC, but “regular” oAuth.

I’ve not played with OIDC via implicit myself, but it’s the same.

The only real difference is validating the JWT which you can’t exactly do client side anyway, since that needs the secret, which you shouldn’t leak publicly, but you’d pass that up to a server for validation if you need to.

You probably don’t even need OIDC here, just request with no scopes, and then use the code I’ve linked to get the user in Client Side code via JS fetch.

1 Like
3

This looks like it’ll help a lot. Thank you so much.
I’ll give it a spin tomorrow and then drop some feedback in the thread. Thanks again.

4

I’ve just managed to get your example working locally. Thank you so much.

I had never dealt with webservers before and after reading around chose to install XAMPP. With a few config changes i managed to redirect back to the html successfully. I see that when using 127.0.0.1 the redirect work and the fields are successfully populated. Out of curiosity i changed the dev console and local variable back to localhost as the TwitchAPI usually recommends and then it stopped working. The redirect worked but the fields were not populated.

I don’t really understand why this is, are you able to explain why? or have a resource that i can read in to so that i can better understand why the webserver is needed to test this as opposed to using localhost? I’m assuming it has to do with security, but wish to fully understand.

Thanks again for your help as from here, i can seek to understand it all better and then will be able to experiment more.

5

localhost and 127.0.0.1 are the same thing. The example doesn’t work when running off file:// URL’s

But both need to be running off something that serves HTML on port 80, for http and port 443 for https (generally speaking). So it should work for localhost, assuming your localhost is configure correctly and nothing else is running that may grab it.

1 Like
6

btw, talking about oauth, something happened with the login, at least on android with WebView.
Previously https://id.twitch.tv/oauth2... this would land you on the desktop site, but since Feb. 20, it lands you on a mobile site (with the option to Facebook login). If you login like that i will not land you on https://localhost#access_token, but on some other site, although you still get your access_token.

I have to explicitly request the desktop site, to get the results https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow described here.

Was this an intentional change? I can make a separate post on this if not.

7

Separate post. it’s unrelated to this/op’s thread.

8

Thank you Barry, really appreciate the help.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.