Feature/kick - Auth + Linking

src/site/kick.com/KickSite.vue

@@ -34,8 +34,9 @@ document.body.setAttribute("seventv-kick", "true");
 
 const cookies = useCookies();
 const auth = cookies.get("XSRF-TOKEN");
+const sessionToken = cookies.get("session_token");
 
-const user = auth ? await useUserdata(auth) : null;
+const user = auth ? await useUserdata(auth, sessionToken) : null;
 
 if (user) {
 	const updateIdentity = (data: typeof user) => {
@@ -58,6 +59,8 @@ if (user) {
 		actor.setPlatformUserID("KICK", data.id.toString());
 	};
 
+	//TODO: subscribe for allowing new login
+
 	updateIdentity(user);
 }
 

src/site/kick.com/composable/useUserdata.ts

@@ -1,4 +1,7 @@
-export async function useUserdata(auth: string): Promise<{
+export async function useUserdata(
+	auth: string,
+	sessionToken: string | undefined,
+): Promise<{
 	id: number;
 	username: string;
 	bio: string;
@@ -15,6 +18,7 @@ export async function useUserdata(auth: string): Promise<{
 }> {
 	const data = await fetch("https://kick.com/api/v1/user", {
 		headers: {
+			Authorization: "Bearer " + sessionToken,
 			"X-XSRF-TOKEN": auth,
 		},
 		method: "GET",

src/site/kick.com/modules/auth/AuthButton.vue

@@ -191,15 +191,15 @@ function closePopup(): void {
 }
 
 watchEffect(() => {
-	const navBlock = document.querySelector(".main-navbar");
+	const navBlock = document.getElementsByTagName("nav")[0];
 	if (navBlock) {
-		navBlock.lastElementChild?.insertAdjacentElement("beforebegin", navContainer);
+		navBlock.lastElementChild?.insertAdjacentElement("afterbegin", navContainer);
 	}
 
 	if (props.slug) {
-		const channelInfoBlock = document.querySelector(".channel-info, .stream-info");
+		const channelInfoBlock = document.getElementById("channel-content");
 		if (channelInfoBlock) {
-			channelInfoBlock.insertAdjacentElement("afterend", channelContainer);
+			channelInfoBlock.firstElementChild?.insertAdjacentElement("afterend", channelContainer);
 		}
 	}
 });

src/site/kick.com/modules/auth/AuthModule.vue

@@ -0,0 +1,72 @@
+<template>
+	<AuthButton :slug="currentSlugDbc" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { debouncedRef, useLocalStorage } from "@vueuse/core";
+import { useStore } from "@/store/main";
+import { LOCAL_STORAGE_KEYS } from "@/common/Constant";
+import { useCookies } from "@/composable/useCookies";
+import { declareModule } from "@/composable/useModule";
+import { setBioCode } from "./Auth";
+import AuthButton from "./AuthButton.vue";
+
+const { markAsReady } = declareModule<"KICK">("auth", {
+	name: "Auth",
+	depends_on: [],
+});
+
+const cookies = useCookies();
+const store = useStore();
+
+const currentSlug = ref("");
+const currentSlugDbc = debouncedRef(currentSlug, 1e3);
+
+function updateSlug() {
+	const path = location.pathname.split("/");
+	if (path[1] == "popout") {
+		currentSlug.value = path[2];
+	} else {
+		currentSlug.value = path[1];
+	}
+}
+
+const observer = new MutationObserver((mutationList) => {
+	for (const mutation of mutationList) {
+		for (let i = 0; i < mutation.addedNodes.length; i++) {
+			if (mutation.addedNodes.item(i)?.nodeName == "TITLE") {
+				updateSlug();
+				break;
+			}
+		}
+	}
+});
+
+const head = document.getElementsByTagName("head")[0];
+observer.observe(head, { childList: true, subtree: true });
+
+const appToken = useLocalStorage(LOCAL_STORAGE_KEYS.APP_TOKEN, "");
+const urlParams = new URLSearchParams(window.location.search);
+
+if (urlParams.get("seventv_token")) {
+	watch(
+		() => store.identity,
+		(identity) => {
+			if (!urlParams.get("seventv_token")) return;
+
+			appToken.value = urlParams.get("seventv_token");
+
+			setBioCode(identity as KickIdentity, "", cookies).then(() => {
+				setTimeout(() => {
+					window.close();
+				}, 250);
+			});
+		},
+		{ immediate: true },
+	);
+}
+
+updateSlug();
+markAsReady();
+</script>