stay signed in

src/contexts/TwitchServiceContext.tsx

@@ -1,9 +1,11 @@
+import { ResourceComponent } from "@components/ResourceComponent";
 import { TwitchApiService } from "@services/twitch/TwitchApiService.ts";
 import {
 	type ParentComponent,
 	Show,
 	createContext,
 	createRenderEffect,
+	createResource,
 	createSignal,
 } from "solid-js";
 
@@ -13,15 +15,40 @@ const searchParams = new URLSearchParams({
 	response_type: "token",
 	scope: "moderator:read:chatters channel:read:subscriptions",
 });
-const url = new URL(
+const connectUrl = new URL(
 	`https://id.twitch.tv/oauth2/authorize?${searchParams.toString()}`,
 );
 
 export const TwitchServiceContext = createContext<TwitchApiService>();
 
 export const TwitchServiceContextProvider: ParentComponent = (props) => {
-	const [twitchApiService, setTwitchApiService] =
+	const [twitchApiService, setTwitchApiService] = createSignal<
-		createSignal<TwitchApiService>();
+		TwitchApiService | undefined
+	>(
+		import.meta.env["VITE_TOKEN_OVERRIDE"]
+			? new TwitchApiService(import.meta.env["VITE_TOKEN_OVERRIDE"])
+			: undefined,
+	);
+
+	const [resource] = createResource(async () => {
+		if (twitchApiService()) {
+			return;
+		}
+
+		const ls = localStorage.getItem("ACCESS_TOKEN");
+		if (ls) {
+			const response = await fetch("https://id.twitch.tv/oauth2/validate", {
+				headers: {
+					Authorization: `Bearer ${ls}`,
+				},
+			});
+			if (!response.ok) {
+				localStorage.removeItem("ACCESS_TOKEN");
+				return;
+			}
+			setTwitchApiService(new TwitchApiService(ls));
+		}
+	});
 
 	createRenderEffect(() => {
 		const devOverride = import.meta.env["VITE_TOKEN_OVERRIDE"];
@@ -33,24 +60,32 @@ export const TwitchServiceContextProvider: ParentComponent = (props) => {
 		const urlSearchParams = new URLSearchParams(location.hash.slice(1));
 		const accessToken = urlSearchParams.get("access_token");
 		if (accessToken) {
+			localStorage.setItem("ACCESS_TOKEN", accessToken);
 			setTwitchApiService(new TwitchApiService(accessToken));
 			window.location.hash = "";
 		}
 	}, []);
 
 	return (
-		<Show
+		<ResourceComponent
-			when={twitchApiService()}
+			resource={resource}
 			fallback={
-				<p>
+				<Show
-					To use this application, please{" "}
+					when={twitchApiService()}
-					<a href={url.toString()}>Connect with Twitch</a>
+					fallback={
-				</p>
+						<p>
+							To use this application, please{" "}
+							<a href={connectUrl.toString()}>Connect with Twitch</a>
+						</p>
+					}
+				>
+					<TwitchServiceContext.Provider value={twitchApiService()}>
+						{props.children}
+					</TwitchServiceContext.Provider>
+				</Show>
 			}
 		>
-			<TwitchServiceContext.Provider value={twitchApiService()}>
+			{() => <></>}
-				{props.children}
+		</ResourceComponent>
-			</TwitchServiceContext.Provider>
-		</Show>
 	);
 };