fix: extension auth

Author: lennartkloock

src/router/auth.route.ts

@@ -0,0 +1,7 @@
+import { RouteRecordRaw } from "vue-router";
+
+export const ExtensionAuthRoute = {
+	path: "/extension/auth",
+	name: "ExtensionAuth",
+	component: () => import("@/views/ExtensionAuth.vue"),
+} as RouteRecordRaw;

src/router/router.ts

@@ -1,5 +1,6 @@
 import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
 import { AdminRoute } from "./admin.route";
+import { ExtensionAuthRoute } from "./auth.route";
 import { CallbackRoute } from "./callback.route";
 import { EmoteSetRoute } from "./emote-sets.route";
 import { EmotesRoute } from "./emotes.route";
@@ -19,6 +20,7 @@ const routes: Array<RouteRecordRaw> = [
 	HelpRoute,
 	AdminRoute,
 	...CallbackRoute,
+	ExtensionAuthRoute,
 	{
 		path: "/:pathMatch(.*)*",
 		name: "Not Found",

src/views/ExtensionAuth.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="extension-auth-content">
+		<LoginButton v-if="!actor.user" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { useActor } from "@/store/actor";
+import { useStore } from "@/store/main";
+import LoginButton from "@/components/utility/LoginButton.vue";
+
+const store = useStore();
+const actor = useActor();
+window.addEventListener("message", function listener(e) {
+	if (e.origin !== "https://www.twitch.tv") return;
+	if (e.data !== "7tv-token-request") return;
+
+	window.removeEventListener("message", listener);
+	watch(
+		() => store.authToken,
+		(t) => {
+			if (!t) return;
+			e.source?.postMessage({ type: "7tv-token", token: t }, { targetOrigin: "https://www.twitch.tv/*" });
+		},
+		{ immediate: true },
+	);
+});
+</script>
+
+<style lang="scss">
+nav {
+	display: none;
+}
+.extension-auth-content {
+	display: flex;
+	margin: auto;
+	justify-content: center;
+}
+</style>