CORS error on Authentication

#1

Hello,

I’m building an app to manage streamers clips (list, delete one or many, rename, share, download etc).
I’ve built a simple front-end with Vuejs and now I’m looking to authenticate to the New Twitch Api as a user. After reading the documentation I found multiple ways to do authentication.

twitch-auth
twitch-auth.PNG741×357 21 KB

I think that for my use case I need OIDC Authorization Code Flow or OAuth Authorization Code Flow (as far as I understood, OIDC is built on top of OAuth2 to get even more informations on the user returning asked user’s data).

I made a function to authenticate like so

    const rp = require('request-promise');
    export function OAuth(client_id) {
      const options = {
        uri: 'https://id.twitch.tv/oauth2/authorize',
        qs: {
          client_id,
          redirect_uri: 'http://localhost:8080/dashboard',
          response_type: 'code',
          scope: 'clips:edit',
        },
        headers: {
          'Access-Control-Allow-Origin': 'http://localhost:8080',
          accept: 'application/vnd.twitchtv.v5+json',
        },
        json: true,
      };
      return rp(options);
    }

But for some kind of reason my browser keep telling me that access-control-allow-origin is missing from the headers. I also tryied to replace http://localhost:8080 by * but nothing is changing.
Before posting here, i red about this post on the forum CORS - Wrong ‘Access-Control-Allow-Origin’ header but I could not find any result who help me.

If you have some hints or advices I would love you read them, thank you.

#2

Step 1 of oAuth is to redirect the user to the Service

You need to GET Redirect the user to Twitch. So they can accept/decline the connection between Twitch and your Application

#3

Man you are fast ! thank you for being this active !

In the description I can read
Send the user you want to authenticate to your registered redirect URI. Then, an authorization page will ask the user to sign up or log into Twitch and allow the user to choose whether to authorize your application/identity system.
I thought Twitch would handle this and send me an iframe to Accept or Decline the authorization and then redirect to the redirect_uri to my dashboard.
I think I’m missing something but I don’t understand : Is the user redirected to Twitch at a specific uri to accept/decline and the redirected to my dashboard ? how is this related to my CORS issue ?

#4

You are getting a CORS issue because you are doing something wrong, and it’s a can’t fix because you are not supposed to be doing it.

Correct.

You dispaly a link to “login” that will either redirect the user to Twitch or is the URL to twitch.

No

Step 1) Send user off site to Twitch
Step 2) they accept/decline
Step 3) Twitch redirects them back to your Redirect_URI

No, you send the user you want to Authenticate, out to Twitch. You don’t send them to your own redirect URI

#5

How exactly do you plan on doing some of those functions? The only supported Clips API functions are to retrieve a list of clips, and to create a new clip.

#6

How exactly do you plan on doing some of those functions? The only supported Clips API functions are to retrieve a list of clips, and to create a new clip.

For now I’m only focusing to build a dashboard in vuejs with a list of user’s clips :smile: it’s to explore Twitch Api and maybe in the future if the api allows me to edit / delete / download add theses features.

#7

I managed to use it !

To help a bit more on my case : I was triggering a function with an onclick button. But as @BarryCarlyon told me it’s a redirection, I simply changed it for a link to this href

https://id.twitch.tv/oauth2/authorize?client_id=my_awesome_client_id&redirect_uri=http://localhost:8080/dashboard&response_type=code&scope=clips:edit

By redirecting the user I saw the Accept/Deny webpage and bringed back the user to my dashboard with a url containing items in query like

http://localhost:8080/dashboard?code=another_code&scope=clips%3Aedit

Now I still have to figure out what do I have to do with this new code (I think I have to pass it to every requests I make to say that this request I allowed by Twitch to be performed and avoid CORS issues, please correct me if I’ve misunderstood something).

Hope it helps

#8

use the code with step 3

3) On your server, get an access token by making this request:

POST https://id.twitch.tv/oauth2/token
    ?client_id=<your client ID>
    &client_secret=<your client secret>
    &code=<authorization code received above>
    &grant_type=authorization_code
    &redirect_uri=<your registered redirect URI>
#9

I planned to use my site in a static way and not use any server. Do I really need one ?

#10

If you don’t intend to use a server then you need to use implicit auth:

#11

Thank you so much for your help, I switched to an Implicit Auth and it works like a charm. Can I put it in browser storage without any fear of lack of security ?

#12

Access Tokens should be ok, they’ll only be valid for four hours or so (generally speaking)

The validate endpoint provides details about a token