From 1e47f5820f2a4414bca089d9b6bdd542e3807932 Mon Sep 17 00:00:00 2001
From: Lennart Kloock <lennart.kloock@protonmail.com>
Date: Fri, 25 Oct 2024 10:41:11 +0200
Subject: [PATCH] fix: extension auth

---
 src/router/auth.route.ts    |  7 +++++++
 src/router/router.ts        |  2 ++
 src/views/ExtensionAuth.vue | 40 +++++++++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/router/auth.route.ts
 create mode 100644 src/views/ExtensionAuth.vue

diff --git a/src/router/auth.route.ts b/src/router/auth.route.ts
new file mode 100644
index 00000000..3fb069b1
--- /dev/null
+++ b/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;
diff --git a/src/router/router.ts b/src/router/router.ts
index af8cca1d..0996c033 100644
--- a/src/router/router.ts
+++ b/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",
diff --git a/src/views/ExtensionAuth.vue b/src/views/ExtensionAuth.vue
new file mode 100644
index 00000000..3468479e
--- /dev/null
+++ b/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>