# Redirect To Live-Config Page

**URL:** <https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204>\
**Category:** Extensions\
**Created:** [June 21, 2023, 9:04pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204 "2023-06-21T21:04:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![hwlrya002](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@hwlrya002](https://discuss.dev.twitch.com/u/hwlrya002)\
**Post date:** [June 21, 2023, 9:04pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/1 "2023-06-21T21:04:58Z")

</div>

Hi there,

I was just wondering. Is it possible to have the configuration page show a button, when the user clicks on the button, it takes them to a live-configuration page outside of the twitch extensions dashboard tab.  
I coded this. Essentially just have a background image on my config page, with a button called “dashboard-button”. When the user clicks on this, it should take them to a new tab which is the live-config. This will be the page where they configure the functionality for their stream

document.getElementById(‘dashboard-button’).addEventListener(‘click’, function() {  
window.location.href = ‘config.html’; // The path to your live-config.html file  
});

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [June 21, 2023, 9:12pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/2 "2023-06-21T21:12:26Z")

</div>

> [@hwlrya002](#):
>
> document.getElementById(‘dashboard-button’).addEventListener(‘click’, function() {  
> window.location.href = ‘config.html’; // The path to your live-config.html file  
> });

Extensions cannot navigate interanlly but you can open a new window.

> [@hwlrya002](#):
>
> Is it possible to have the configuration page show a button, when the user clicks on the button, it takes them to a live-configuration page outside of the twitch extensions dashboard tab.

That would be `<a href="someurl" target="_blank">my link</a>`

---

<div class="post-metadata">

**Author:** ![hwlrya002](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@hwlrya002](https://discuss.dev.twitch.com/u/hwlrya002)\
**Post date:** [June 21, 2023, 9:16pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/3 "2023-06-21T21:16:25Z")

</div>

When opening the new window, just for testing purposes, I don’t need the user to authenticate their twitch account right?

Everything is going to be done in local testing. Just building a proof of concept. Been trying to follow similar practices to Stream Stickers. On their config page, its just a nice background with a button “Go to dashboard”. This opens up a new window where the streamer can live-configure during their stream and display the newly added stickers on stream in the component.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [June 21, 2023, 9:16pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/4 "2023-06-21T21:16:58Z")

</div>

> [@hwlrya002](#):
>
> I don’t need the user to authenticate their twitch account right?

if you don’t do an oAuth loop you won’t know who they are

---

<div class="post-metadata">

**Author:** ![hwlrya002](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@hwlrya002](https://discuss.dev.twitch.com/u/hwlrya002)\
**Post date:** [June 21, 2023, 9:17pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/5 "2023-06-21T21:17:09Z")

</div>

Shoutout to you Barry. Every time I have a question, you are great with responding. I really appreciate it

---

<div class="post-metadata">

**Author:** ![hwlrya002](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@hwlrya002](https://discuss.dev.twitch.com/u/hwlrya002)\
**Post date:** [June 21, 2023, 9:19pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/6 "2023-06-21T21:19:05Z")

</div>

So if the streamer is redirected to a new window, I will need the Twitch API to know which user it is. But if they configure in the extensions dashboard, I won’t need OAuth?

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [June 21, 2023, 9:23pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/7 "2023-06-21T21:23:19Z")

</div>

Inside the Twitch Dashboard/Extensions config view, onAuthorized provides a JWT to indentify the user.

When you click the button to open a new tab to your _big dashboard_ if you don’t pass anything over (like say the JWT as a query string var to decode), then you don’t know _who_ they are as it’s like loading your website from scratch.

The optimal approach is to do an oAuth loop

So for example EmoteMeter you can use its website to configure - [https://emotemeter.com/](https://emotemeter.com/) or you can use it’s dashboard config view.

The website will require oAuth login so the website knows who you are

EliteTrack has a “report bug” feature where I pass the JWT up to the URL so I will use that to verify the user _but only_ for reporting a bug no controls

 ![image](https://d2opxh93rbxzdn.cloudfront.net/original/3X/0/1/016155766e5a6ae02ec60efaac289800bbe5860a.png)

So you can decide waht do you, for your described use case, you would want to be doing an oAuth loop to idneityf the user and start a session on your external dashboard

---

<div class="post-metadata">

**Author:** ![hwlrya002](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@hwlrya002](https://discuss.dev.twitch.com/u/hwlrya002)\
**Post date:** [June 21, 2023, 9:37pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/8 "2023-06-21T21:37:24Z")

</div>

When using the OAuth for redirecting to a new window. I see a lot of extensions use a browser source. I assume the browser source that you add to Streamlabs has a connection to the window which communicates any changes made on the window into the video component, panel, layover etc.

How would I create a browser source URL? Or could you explain its purpose?

---

<div class="post-metadata">

**Author:** ![hwlrya002](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@hwlrya002](https://discuss.dev.twitch.com/u/hwlrya002)\
**Post date:** [June 21, 2023, 9:44pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/9 "2023-06-21T21:44:37Z")

</div>

Lastly, if I use redirection with OAuth, can i still use an EBS with the Configuration Service?

Or will I need to develop a database, API’s etc to talk to one another?

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [June 21, 2023, 9:59pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/10 "2023-06-21T21:59:04Z")

</div>

> [@hwlrya002](#):
>
> Lastly, if I use redirection with OAuth, can i still use an EBS with the Configuration Service?

yes

you can get/set the config service externally

> **[Reference](https://dev.twitch.tv/docs/api/reference/#get-extension-configuration-segment)**
>
> Twitch Developer tools and services to integrate Twitch into your development or create interactive experience on twitch.tv.

> [@hwlrya002](#):
>
> I see a lot of extensions use a browser source. I assume the browser source that you add to Streamlabs has a connection to the window which communicates any changes made on the window into the video component, panel, layover etc.

No, usually they talk to the EBS/server and get whatever from there, they don’t directly take to the other window.

---

<div class="post-metadata">

**Author:** ![hwlrya002](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@hwlrya002](https://discuss.dev.twitch.com/u/hwlrya002)\
**Post date:** [June 21, 2023, 10:11pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/11 "2023-06-21T22:11:07Z")

</div>

Perfect thank you Barry. In the configure page, if the streamer configures some photos to be displayed on their stream, they click submit and then it displays. Is it possible to re-configure the photos (ie change a photo) whilst live on the stream?

I don’t know if I am going crazy, but I remember reading that the onChanged() event only handles once. So from my understanding, if the user has selected 5 photos to show on their stream, and submitted it. They cannot re-configure these images to display different ones while live on stream.

Am i correct in saying this or is it possible to change the component page with new photos whilst live by configuring in the config page of the extension?

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [June 21, 2023, 10:13pm UTC](https://discuss.dev.twitch.com/t/redirect-to-live-config-page/46204/12 "2023-06-21T22:13:43Z")

</div>

> [@hwlrya002](#):
>
> In the configure page, if the streamer configures some photos to be displayed on their stream, they click submit and then it displays. Is it possible to re-configure the photos (ie change a photo) whilst live on the stream?

Of course

> [@hwlrya002](#):
>
> I don’t know if I am going crazy, but I remember reading that the onChanged() event only handles once. So from my understanding, if the user has selected 5 photos to show on their stream, and submitted it. They cannot re-configure these images to display different ones while live on stream.

That correct which is why if I _live change_ the contents of the config service, I push the same payload out over pubsub to running instances

Rough example [https://github.com/BarryCarlyon/twitch\_misc/tree/main/extensions/config\_service](https://github.com/BarryCarlyon/twitch_misc/tree/main/extensions/config_service)

> [@hwlrya002](#):
>
> Am i correct in saying this or is it possible to change the component page with new photos whilst live by configuring in the config page of the extension?

You push the same update to the config service and out over pubsub at the same time.
