# Web based soundboard for chat **URL:** \ **Category:** Chat and IRC\ **Created:** [April 15, 2019, 8:22am UTC](https://staging-discuss.dev.twitch.com/t/web-based-soundboard-for-chat/20875 "2019-04-15T08:22:55Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![neobaldhornrich](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/neobaldhornrich/32/6160_2.png) [@neobaldhornrich](https://staging-discuss.dev.twitch.com/u/neobaldhornrich)\ **Post date:** [April 15, 2019, 8:22am UTC](https://staging-discuss.dev.twitch.com/t/web-based-soundboard-for-chat/20875/1 "2019-04-15T08:22:55Z")
Hey, I am dialogik from [HORNHAUT.tv](http://HORNHAUT.tv) which is an initiative to support small (German speaking) streamers. So one of our members (we call our members _Geiervögel_, which means _vultures_ in English – but I’m wandering from the subject), [Bloodemi](https://www.twitch.tv/bloodemi), has a web based [soundboard](https://sounds.bloodemi.net/). This is a simple HTML/CSS/JS website which shows all available sound commands that can be used by his viewers in the Twitch chat in order to play a sound: ![image](https://d2spem0quai2ol.cloudfront.net/original/2X/a/a41ea03854c1fb407f6043ae1040da4f8d8632e4.png) He asked if it would be possible to enable users to actually _chat_ these commands from the website into the Twitch chat. And here comes my problem: I am using the [TwitchJS](https://twitch-devs.github.io/twitch-js/) library for this feature. The [documentation says](https://twitch-devs.github.io/twitch-js/docs/messaging) that “_Connecting to Twitch chat requires a [token](https://twitch-devs.github.io/twitch-js/docs/authentication#obtaining-a-token) with `chat_login` scope and a username._” ![image](https://d2spem0quai2ol.cloudfront.net/original/2X/b/b032550c40aa54fbfdd5be1057a5aa8126847006.png) Since the `chat_login` scope is [deprecated](https://dev.twitch.tv/docs/authentication/#scopes) I am using the new `chat:edit` scope instead. So I created an app in my dev dashboard and call a simple OAuth flow in order to connect the user via twitch: ``` ``` Here I already added the `user_read` scope, and this is why: According to the documentation (see link above) I have to use the `token` _and_ `username` to create the TwitchJS instance. I get the token from the OAuth flow, no problem here: ``` var hash = window.location.hash.split('#')[1].split('&')[0].split('='); var token = null; if(hash[0] == 'access_token') { var token = hash[1]; console.log(token); // properly returns the token } ``` But I do not have the `username` that is also needed. The way I try to solve this problem is by creating a _pre-instance_, use this to ask for the username… ``` const fetch = new TwitchJs({ token }); fetch.api.get('user').then(response => { let username = response.name; console.log(token, username); // properly returns token and username // ... ``` … and use both credentials to create a second TwitchJS instance: ``` const channel = 'hornhauttv'; const send = new TwitchJs({ token, username }); send.chat.connect().then(() => { chat.join(channel).then(channelState => { chat.say(channel, 'Message'); // test, will be replaced by sound command }); }); ``` But all I get is a `Login unsuccessful` error message. ![image](https://d2spem0quai2ol.cloudfront.net/original/2X/7/758f39ede74598cc7ca40f8ddda9bae40a8c5baa.png) Any ideas what is wrong here? And is my pre-instance workaround redundant? Is there an easier way to achieve this? Any help appreciated, thanks in advance. # Sourcecode (gist) I have published the sourcecode to github’s gist service: > ---
**Author:** ![3ventic](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/3ventic/32/298_2.png) [@3ventic](https://staging-discuss.dev.twitch.com/u/3ventic)\ **Post date:** [April 17, 2019, 2:05pm UTC](https://staging-discuss.dev.twitch.com/t/web-based-soundboard-for-chat/20875/2 "2019-04-17T14:05:04Z")
1. You don’t need `user_read` to get the username for a token. You can call the [token validate endpoint](https://dev.twitch.tv/docs/authentication/#validating-requests) and it’ll be in the response. 2. You need `chat:read` to connect to chat. ---
**Author:** ![neobaldhornrich](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/neobaldhornrich/32/6160_2.png) [@neobaldhornrich](https://staging-discuss.dev.twitch.com/u/neobaldhornrich)\ **Post date:** [April 17, 2019, 5:40pm UTC](https://staging-discuss.dev.twitch.com/t/web-based-soundboard-for-chat/20875/3 "2019-04-17T17:40:28Z")
Thanks a lot, #2 helped me to make the script work! But how can I access the `oauth/validate` endpoint with the TwitchJS library? It seems to me that I can only access endpoints that follow the `https://api.twitch.tv/kraken/` scheme. OAuth validation’s endpoint is `https://id.twitch.tv/oauth2/validate`? ---
**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\ **Post date:** [April 18, 2019, 9:52am UTC](https://staging-discuss.dev.twitch.com/t/web-based-soundboard-for-chat/20875/4 "2019-04-18T09:52:09Z")
> [@neobaldhornrich](#): > > But how can I access the `oauth/validate` endpoint with the TwitchJS library? Ask the TwitchJS library people, can’t really help with library specifics in this forum since it’s a loss up if the TwitchJS people are here or not. ---
**Author:** ![system](https://d2spem0quai2ol.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://staging-discuss.dev.twitch.com/u/system)\ **Post date:** [May 18, 2019, 9:52am UTC](https://staging-discuss.dev.twitch.com/t/web-based-soundboard-for-chat/20875/5 "2019-05-18T09:52:12Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.