fix(login): improve login flow

Allows for login without 3rd party cookies

Author: TroyKomodo

src/ActorLogic.ts

@@ -6,12 +6,14 @@ import { GetEmoteSet, GetEmoteSetMin } from "@/apollo/query/emote-set.query";
 import { useObjectSubscription } from "@/composables/useObjectSub";
 import { GetCurrentUser } from "./apollo/query/user-self.query";
 import { GetUser } from "./apollo/query/user.query";
+import { useStore } from "./store/main";
 import { ObjectKind } from "./structures/Common";
 import { EmoteSet } from "./structures/EmoteSet";
 import { User } from "./structures/User";
 
 export function setupActor(refreshAuth: Ref<boolean>) {
 	const actor = useActor();
+	const store = useStore();
 	const { user } = storeToRefs(actor);
 	const { watchObject } = useObjectSubscription();
 
@@ -36,6 +38,7 @@ export function setupActor(refreshAuth: Ref<boolean>) {
 			const usr = res.data.user;
 			if (!usr) {
 				actor.setUser(null);
+				store.setAuthToken(null, false);
 				return;
 			}
 

src/App.vue

@@ -79,7 +79,9 @@ import { useWorker } from "@/composables/useWorker";
 import Nav from "@/components/Nav.vue";
 import ModalViewport from "@/components/modal/ModalViewport.vue";
 import ContextMenu from "@/components/overlay/ContextMenu.vue";
+import { log } from "./Logger";
 import Icon from "./components/utility/Icon.vue";
+import { WindowSelfMessage } from "./views/window.messages";
 import { setupActor } from "@/ActorLogic";
 
 const store = useStore();
@@ -100,13 +102,32 @@ const theme = computed(() => {
 const { createWorker } = useWorker();
 createWorker();
 
+setupActor(refreshAuth);
+
 // Set up client user
 provideApolloClient(apolloClient);
 
 // Set up the actor user
-setupActor(refreshAuth);
+window.addEventListener("message", (e) => {
+	if (e.origin === location.origin) {
+		const data = e.data as WindowSelfMessage;
+
+		log.info("Received message from popup", `${JSON.stringify(data)}`);
+
+		if (data.event === "LOGIN_TOKEN") {
+			store.setAuthToken(data.token);
+		} else if (data.event === "LOGIN_FAILED") {
+			store.setAuthToken(null);
+		} else if (data.event === "LOGIN_LINKED") {
+			store.refreshAuth = true;
+		} else if (data.event === "LOGOUT_SUCCESS") {
+			store.setAuthToken(null);
+		}
+	}
+});
 
 const { onResult: onClientRequiredData } = useQuery<AppState>(GetAppState);
+
 onClientRequiredData((res) => {
 	if (!res.data) {
 		return;

src/apollo/apollo.ts

@@ -1,13 +1,53 @@
-import { ApolloClient, ApolloLink, InMemoryCache, createHttpLink } from "@apollo/client/core";
+import { useStore } from "@/store/main";
+import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client/core";
+import { BatchHttpLink } from "@apollo/client/link/batch-http";
 
 // HTTP connection to the API
-const httpLink = createHttpLink({
+const httpLink = new BatchHttpLink({
 	// You should use an absolute URL here
 	uri: `${import.meta.env.VITE_APP_API_GQL}`,
 	credentials: "include",
+	batchMax: 20,
+	batchInterval: 20,
 });
 
-const link = ApolloLink.from([httpLink]);
+let cycleDetected = false;
+
+const authLink = new ApolloLink((operation, forward) => {
+	const store = useStore();
+
+	// Use the setContext method to set the HTTP headers.
+	operation.setContext({
+		headers: store.authToken
+			? {
+					authorization: `Bearer ${store.authToken}`,
+					// Allows to ignore auth failures and still get a response
+					"x-ignore-auth-failure": "true",
+			  }
+			: {},
+	});
+
+	// Call the next link in the middleware chain.
+	return forward(operation).map((response) => {
+		const { response: resp } = operation.getContext();
+
+		if (resp?.headers) {
+			const authFailure = resp.headers.get("x-auth-failure") === "true";
+			if (authFailure) {
+				if (!cycleDetected) {
+					store.setAuthToken(null);
+					cycleDetected = true;
+				}
+			} else {
+				cycleDetected = false;
+			}
+		}
+
+		return response;
+	});
+});
+
+const link = ApolloLink.from([authLink, httpLink]);
 
 // Cache implementation
 const cache = new InMemoryCache({

src/components/utility/LoginButton.vue

@@ -21,14 +21,12 @@
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useActor } from "@/store/actor";
-import { useStore } from "@/store/main";
 import { User } from "@/structures/User";
 import { useAuth } from "@/composables/useAuth";
 import { useContextMenu } from "@/composables/useContextMenu";
 import Icon from "./Icon.vue";
 import LoginButtonPlaformVue from "./LoginButtonPlaform.vue";
 
-const store = useStore();
 const actor = useActor();
 
 const { t } = useI18n();
@@ -38,9 +36,7 @@ const platform = ref<User.UserConnectionPlatform>("TWITCH");
 
 /** Request the user to authorize with a third party platform  */
 const oauth2Authorize = () => {
-	auth.prompt(platform.value).then(() => {
-		store.refreshAuth = true;
-	});
+	auth.prompt(platform.value, false);
 };
 
 const { open } = useContextMenu();

src/composables/useAuth.ts

@@ -1,36 +1,51 @@
+import { useStore } from "@/store/main";
 import { User } from "@/structures/User";
-import { log } from "@/Logger";
 
-export function useAuth() {
-	function prompt(provider: User.Connection.Platform, token?: string | null): Promise<void> {
-		const w = window.open(
-			`${import.meta.env.VITE_APP_API_REST}/auth?platform=${provider.toLowerCase()}` +
-				(token ? `&token=${token}` : ""),
-			"seventv-oauth2",
-			"_blank, width=850, height=650, menubar=no, location=no",
-		);
+let authWindow = null as WindowProxy | null;
+
+function popup(route: string): Promise<void> {
+	if (authWindow && !authWindow.closed) {
+		authWindow.close();
+	}
 
-		return new Promise((resolve) => {
-			const i = setInterval(async () => {
-				if (!w?.closed) {
-					return;
-				}
+	const popup = window.open(
+		`${import.meta.env.VITE_APP_API_REST}/${route}`,
+		"seventv-oauth2",
+		"_blank, width=850, height=650, menubar=no, location=no",
+	);
+
+	authWindow = popup;
+
+	if (!popup) {
+		return Promise.reject("Failed to open window");
+	}
 
-				clearInterval(i);
-				resolve();
-			}, 100);
-		});
+	return new Promise((resolve) => {
+		const i = setInterval(async () => {
+			if (!popup.closed) {
+				return;
+			}
+
+			clearInterval(i);
+			resolve();
+		}, 100);
+	});
+}
+
+export function useAuth() {
+	function prompt(provider: User.Connection.Platform, isLink: boolean): Promise<void> {
+		const store = useStore();
+
+		return popup(
+			`auth?platform=${provider.toLowerCase()}` +
+				(store.authToken ? `&token=${store.authToken}` : "") +
+				(isLink ? "&link_connection=true" : ""),
+		);
 	}
 
-	function logout() {
-		fetch(import.meta.env.VITE_APP_API_REST + "/auth/logout", {
-			method: "POST",
-			credentials: "include",
-		})
-			.then(() => {
-				log.info("Signed out");
-			})
-			.catch((err) => log.error("failed to sign out", err.message));
+	function logout(): Promise<void> {
+		const store = useStore();
+		return popup("auth/logout" + (store.authToken ? `?token=${store.authToken}` : ""));
 	}
 
 	return {

src/store/lskeys.ts

@@ -5,4 +5,5 @@ export enum LocalStorageKeys {
 	LOCALE = "7tv-locale",
 	IDENTITY = "7tv-identity",
 	DEFAULT_SET = "7tv-default-set",
+	AUTH_TOKEN = "7tv-auth-token",
 }

src/store/main.ts

@@ -4,10 +4,9 @@ import { correctLocale } from "@/i18n";
 import { EmoteSet } from "@/structures/EmoteSet";
 import { Role } from "@/structures/Role";
 
-export const SEASONAL_THEME_START = 1669852320734;
-
 export interface State {
 	refreshAuth: boolean;
+	authToken: string | null;
 	theme: Theme;
 	seasonalTheme: boolean;
 	themeTimestamp: number;
@@ -37,6 +36,7 @@ export const useStore = defineStore("main", {
 	state: () =>
 		({
 			refreshAuth: true,
+			authToken: window.localStorage.getItem(LocalStorageKeys.AUTH_TOKEN) || null,
 			theme: (localStorage.getItem(LocalStorageKeys.THEME) || "dark") as Theme,
 			seasonalTheme: false,
 			themeTimestamp: parseInt(localStorage.getItem(LocalStorageKeys.THEME_TIMESTAMP ?? "0") as string),
@@ -60,6 +60,15 @@ export const useStore = defineStore("main", {
 		roleList: (state): Role[] => Object.keys(state.roles).map((k) => state.roles[k]),
 	},
 	actions: {
+		setAuthToken(token: string | null, refresh = true) {
+			this.authToken = token;
+			this.refreshAuth = refresh;
+			if (token) {
+				localStorage.setItem(LocalStorageKeys.AUTH_TOKEN, token);
+			} else {
+				localStorage.removeItem(LocalStorageKeys.AUTH_TOKEN);
+			}
+		},
 		setTheme(newTheme: Theme) {
 			const now = Date.now();
 			this.noTransitions = true;