Twitch Connect confusion

Hi,

I thought it was something merely simple but I’m having a hard time understanding what I should do.

So I’m working on a website/service where the users can only register via twitch : it is important that their twitch username is the same in my database. So I dig into OIDC flow. So far so good :

  • I have a “register with twitch button”,
  • I click i’m redirected to twitch that asks to login and/or permission if i’m not authenticated
  • then when i approve, i’m redirected to the redirect URI i gave.

but the infos are in the hash (#)
This part confuses me : I can retrieve the datas in javascript. But the fact that it is not sent in the query string kind of says “dont process the data server side” and I don’t get that. Am I supposed to show a form to the user with the data retrieved, base64 decoded ?
What If i retrieve said data in JS but sends the data in an hidden form ? Does it break some kind of rule ?
Also when I decode the id_token, it is actually several json concatenated together, and i don’t see why in the documentation

Working with API sometimes just ruin my day

This means you used the Implict Flow instead of the authorization code flow

So for OIDC you want

OIDC authorization code flow - Getting Tokens: OIDC | Twitch Developers

NOT

OIDC implicit code flow - Getting Tokens: OIDC | Twitch Developers

Becuase OIDC returns a JWT, and a JWT is exactly that, three sections seperated by a . where each section is base64 decodable

4) We respond with a JSON-encoded access token and an ID token. The payload of the JWT that is returned includes several default claims about the OIDC ID token, plus any additional claims you requested:

iss – Token issuer (Twitch)
sub – Subject or end-user identifier
aud – Audience or OAuth 2.0 client that is the intended recipient of the token
exp – Expiration time (note that when the JWT ID tokens expire, they cannot be refreshed)
iat – Issuance time
nonce – Value optionally specified in the request

See https://jwt.io/ for more on JWT’s

Here is a nodeJS example I wrote for OIDC Code Flow

It covers how to do the flow and to use the data from Twitch’s openid-configuration to get a full user payload from the specified userinfo_endpoint

Thanks a lot for the quick answer :slight_smile:
I’ll try to complete this tomorrow, my brain is fried for the day

Hello again,

So I’m progressing and managed to retrieve claims using said flow, (still encrypted). I’d like to do it the proper way and I’m concerned with security and authenticity.

I understood “state” parameter purpose.

In your example, you don’t seem to use nonce. Is it “optional” ? I can’t exactly how in the usage is it different from state. (which seems to be : Generating a random TOKEN-A and checking at some point of the process that returned value equals TOKEN-A)

I’m also curious to why we use a post request on an uri that contains query parameters ?

Correct it’s optional.

In my example I use state for what you would use nonce for.
They are two fields that do the same thing/can be used to do the same thing.

Some implementations of OIDC have a “forced use of nonce in their library”

But basically nonce and state are the same thing.

You can see here

In the parameters table that claims, nonce and state are all optional.

So since this is a custom script I use state like my other oAuth loops.
But if I was using a library or OIDC provider, it might force the usage of nonce

It’s a URL Encoded form. aka application/x-www-form-urlencoded which will accept from either post body or URL Parameters (depending on the reciever)

It is also what the documentation says to do in step 3.

1 Like

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