Vue js - invalid csrf token in /oauth2/authorize

[Treasm]

Hey !
I want to make a Vue.js app in which i can connect with my twitch account and write my username in the console.

I have this code :

 getCode = async () => {
          const tokenResponse = await fetch(
            'https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=*****&scope=channel%3Amanage%3Apolls+channel%3Aread%3Apolls&state=c3ab8aa609ea11e793ae92361f002671&redirect_uri=http://localhost:8080', 
            {
              method: "POST",
            }
          );
        
          const tokenJson = await tokenResponse.json();
          const token = tokenJson.access_token;
          return token;
        };


          getData = async () => {
          const url = `https://api.twitch.tv/helix/users`
          let token = await this.getCode();
          const res = await fetch(url, {
            method: "GET",
            headers: {
              "client-id": '**********',
              "Authorization": `Bearer ${token}`,
            }
          })
          let twitch_data = await res.json();
          
          console.log(twitch_data);
        }

When i click my button and run getData(), i don’t even get the twitch dialog to autorize twitch to access my account and when i run the getCode() request into postman, it say “invalid csrf token”

Checked a lot of topic but i didn’t find a solution for me.

Thanks !!

[Dist]

You don’t make a POST request to the auth endpoint, you need to redirect the user to that URL, and if they agree to connect to your app and the scopes you’re requesting from them they’ll be redirected to your redirect uri

[Treasm]

Thanks for your answer !

I tried and it seems to work. But now …

When i’m at the URL http://localhost:8080/about#access_token=*******&scope=channel%3Amanage%3Apolls+channel%3Aread%3Apolls&state=c3ab8aa609ea11e793ae92361f002671&token_type=bearer

What am i supposed to do ? Just catch the “access_token” param value from the URL ?

[Dist]

Yes, the whole point of the ‘token’ auth flow is that the access token is provided in the URL hash, so you would use window.location.hash to get the params from hash which you can then use for API requests in the frontend.

[Treasm]

Thank you ! Every thing is working now