Login with Twitch issue

[Pixel]

Hi everyone,
I’m having an issue with my “local website” trying to login with twitch. I’m using the JS SDK as shown:

$(function() {

	Twitch.init({clientId: 'pr18msmhk9mv82w4d73rizb9tgzk712'}, function(error, status) {
    	if (error) {
	    // error encountered while loading
	    console.log(error);
	    }

		if (status.authenticated) {
		  $('.twitch-connect').hide();
		}

		else{
			$('.twitch-disconnect').hide();
		}

  	});

  	var login = function() {
  		Twitch.login({
	    scope: ['user_read', 'channel_read']
	  	});
  	}

  	var logout = function() {
  		//not written yet
  	}
		
	$('.twitch-connect').click(function(e){
		e.preventDefault();
		login();
	})

	$('.twitch-disconnect').click(function(e){
		e.preventDefault();
		logout();
	})
})

And when I hit the connect button nothing happens and I’m getting this error in the network manager:

Do you guys have any idea ?
(sorry for my bad english btw, do not hesitate to tell me if you need more clues)

[DallasNChains]

Are there any console errors? That is just saying the download of the Twitch JS SDK failed, which is likely why you don’t see anything when you click.

[Pixel]

Nope, there is absolutely nothing printed in the console, before and after “hiting” the connect button. Is my code correct at least ? I didn’t mention it but “twitch-connect” and “twitch-disconnect” stand for the class i apply on my buttons. I think you already all guessed that.

[IllusionaryOne]

I do not see a redirect_uri specified on the Twitch.init() which I believe, if I remember right, is required for the authentication method. This is how I call Twitch.init():

    Twitch.init({ popup: true, redirect_uri: $.panel.config.redirectURI, clientId: $.panel.config.clientId },

Since you are trying to login, that would require verifying the identity of your application, which the redirect_uri provides.I could also be entirely wrong too

[3ventic]

It uses the URL of the page you’re on if it’s not specified. The sdk isn’t really meant for multipage apps.

[Pixel]

UPDATE

After many retries I managed to debug my project. I have 1 more question though:

What’s the difference between state= and client_id= in my

[DallasNChains]

@Pixel state is for cross-site request forgery checking. client_id is required to identify your application to the Twitch API.

[Pixel]

So, basicaly I’m supposed to get the ID client at https://www.twitch.tv/settings/connections ->my app registered

But what should I put in the state field ?

[DallasNChains]

@Pixel That’s an exercise for you to figure out and not something prescriptive from the Twitch API. I would recommend reading up on OAuth 2 and CSRF. There are a lot of articles covering state and how to implement it properly. It’s a security concern. If you’re interested in standards, you can read about state here: https://tools.ietf.org/html/rfc6749#section-10.12