@overlaysymphony/twitch 0.1.0 → 0.2.0

package/src/helix/subscriptions/subscriptions.ts

@@ -1,10 +1,10 @@
-import { Authentication } from "../../authentication/index.js"
+import { type Authentication } from "../../authentication/index.js"
 import {
-  TwitchSubscription,
-  TwitchSubscriptionType,
+  type TwitchSubscription,
+  type TwitchSubscriptionType,
   buildSubscription,
 } from "../../eventsub/events/index.js"
-import { BaseSubscription } from "../../eventsub/events-helpers.js"
+import { type BaseSubscription } from "../../eventsub/events-helpers.js"
 import { helix } from "../helix.js"
 
 interface SubscriptionWebhookTransport {
@@ -22,7 +22,7 @@ type SubscriptionTransport =
   | SubscriptionWebhookTransport
   | SubscriptionWebsocketTransport
 
-export type SubscriptionRequest<Subscription extends BaseSubscription> = {
+export interface SubscriptionRequest<Subscription extends BaseSubscription> {
   type: Subscription["type"]
   version: Subscription["version"]
   condition: Subscription["condition"]
@@ -61,20 +61,11 @@ export async function createSubscription<
   authentication: Authentication,
   type: Type,
 ): Promise<ActiveSubscription<Subscription>> {
-  const subscription = buildSubscription(
-    type,
-    authentication.user.id,
-  ) as Subscription
+  const subscription = buildSubscription(type, authentication.user.id)
 
-  const [activeSubscription] = await helix<
-    ActiveSubscription<Subscription>,
-    never,
-    never,
-    SubscriptionRequest<Subscription>
-  >(authentication, {
+  const [activeSubscription] = await helix(authentication, {
     method: "post",
     path: "/eventsub/subscriptions",
-    // @ts-ignore
     body: {
       ...subscription,
       transport: {
@@ -91,7 +82,7 @@ export async function deleteSubscription(
   authentication: Authentication,
   id: string,
 ): Promise<void> {
-  await helix<never, never, { id: string }, never>(authentication, {
+  await helix<never, never, { id: string }>(authentication, {
     method: "delete",
     path: "/eventsub/subscriptions",
     params: {
@@ -111,8 +102,7 @@ export async function getSubscriptions(
       type?: TwitchSubscriptionType
       user_id?: string
       after?: string
-    },
-    never
+    }
   >(authentication, {
     method: "get",
     path: "/eventsub/subscriptions",

package/src/helix/users/users.ts

@@ -1,4 +1,4 @@
-import { Authentication } from "../../authentication/index.js"
+import { type Authentication } from "../../authentication/index.js"
 import { helix } from "../helix.js"
 
 export interface TwitchUser {

package/src/helpers/alerts/alerts.ts

@@ -1,7 +1,7 @@
-import createQueue, { Queue } from "@overlaysymphony/core/libs/queue"
+import createQueue, { type Queue } from "@overlaysymphony/core/libs/queue"
 
-import { TwitchNotificationMessage } from "../../eventsub/events/index.js"
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchNotificationMessage } from "../../eventsub/events/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export type Alert = TwitchNotificationMessage<
   | "channel.cheer"

package/src/helpers/charity/charity.ts

@@ -1,4 +1,4 @@
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export interface Charity {
   name: string

package/src/helpers/goal/goal.ts

@@ -1,4 +1,4 @@
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export interface Goal {
   type: string

package/src/helpers/hype-train/hype-train.ts

@@ -1,4 +1,4 @@
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export interface HypeTrain {
   level: number

package/src/helpers/poll/poll.ts

@@ -1,4 +1,4 @@
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export interface Poll {
   title: string

package/src/helpers/prediction/prediction.ts

@@ -1,4 +1,4 @@
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export interface Prediction {
   title: string

package/src/helpers/redemption/redemption.ts

@@ -1,4 +1,4 @@
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export interface Redemption {
   id: string

package/src/helpers/status/status.ts

@@ -1,4 +1,4 @@
-import { TwitchEventSub } from "../../eventsub/index.js"
+import { type TwitchEventSub } from "../../eventsub/index.js"
 
 export interface Status {
   online: boolean

package/src/ui/authentication.ts

@@ -1,16 +1,15 @@
 import {
-  BareAuthentication,
-  validateAuthentication,
+  clearCachedAuthentication,
+  getAuthentication,
+  popupAuthentication,
 } from "../authentication/index.js"
 
 declare global {
   interface Window {
-    overlaysymphonyTwitchScopes: string[]
+    overlaysymphonyTwitchScopes?: string[]
   }
 }
 
-const localStorageKey = "overlaysymphony:service:twitch"
-
 export class TwitchAuthentication extends HTMLElement {
   static get observedAttributes(): string[] {
     return ["client-id", "scopes-key", "popup-url"]
@@ -31,7 +30,7 @@ export class TwitchAuthentication extends HTMLElement {
     `)
 
     stylesheet.insertRule(`
-      button, .authenticating, .validating, .authenticated {
+      .authenticating, .validating, .authenticated, .unauthenticated {
         display: block;
         box-sizing: border-box;
         width: 100%;
@@ -47,13 +46,6 @@ export class TwitchAuthentication extends HTMLElement {
       }
     `)
 
-    stylesheet.insertRule(`
-      button {
-        background: #9146FF;
-        border: 2px outset buttonBorder;
-      }
-      `)
-
     stylesheet.insertRule(`
       .authenticating, .validating {
         background: #949494;
@@ -68,9 +60,17 @@ export class TwitchAuthentication extends HTMLElement {
       }
     `)
 
+    stylesheet.insertRule(`
+      .unauthenticated {
+        background: #9146FF;
+        border: 2px outset buttonBorder;
+      }
+    `)
+
     this.root = this.attachShadow({ mode: "open" })
     this.root.adoptedStyleSheets.push(stylesheet)
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.render()
   }
 
@@ -82,7 +82,7 @@ export class TwitchAuthentication extends HTMLElement {
     const key = (this.getAttribute("scopes-key") ??
       "overlaysymphonyTwitchScopes") as "overlaysymphonyTwitchScopes"
 
-    return window[key] || []
+    return window[key] ?? []
   }
 
   get popupUrl(): string {
@@ -90,53 +90,21 @@ export class TwitchAuthentication extends HTMLElement {
     const end = parent.lastIndexOf("/")
     const baseURL = window.location.href.slice(0, end)
 
-    return this.getAttribute("popupUrl") ?? `${baseURL}/popup-twitch.html`
+    return this.getAttribute("popup-url") ?? `${baseURL}/popup-twitch.html`
   }
 
   async authenticate(): Promise<void> {
     this.renderAuthenticating()
 
-    const url = new URL(
-      `${this.popupUrl}?scopes=${this.scopes.join("+")}&clientId=${this.clientId}`,
-    )
-
-    await new Promise<void>((resolve) => {
-      const listener = (event: MessageEvent) => {
-        if (event.origin !== url.origin) return
-
-        // const source = (event.source as Window | null)?.name
-        // if (source !== "OverlaySymphonyTwitchAuthenticationPopup") return
-
-        const { type, authentication } = event.data
-        if (type !== "authentication") return
+    await popupAuthentication(this.clientId, this.scopes, this.popupUrl)
 
-        window.removeEventListener("message", listener)
-
-        setCached(authentication)
-        this.render()
-        resolve()
-      }
-
-      window.addEventListener("message", listener)
-
-      window.open(
-        url,
-        "OverlaySymphonyTwitchAuthenticationPopup",
-        "width=520,height=840",
-      )
-    })
+    return this.render()
   }
 
-  async validate(authentication: BareAuthentication): Promise<void> {
-    this.renderValidating()
+  async unauthenticate(): Promise<void> {
+    clearCachedAuthentication()
 
-    try {
-      await validateAuthentication(authentication)
-      this.renderAuthenticated()
-    } catch (e) {
-      clearCached()
-      this.render()
-    }
+    return this.render()
   }
 
   clear(): void {
@@ -169,28 +137,31 @@ export class TwitchAuthentication extends HTMLElement {
   renderAuthenticated(): void {
     this.clear()
 
-    this.element = document.createElement("div")
+    this.element = document.createElement("button")
     this.element.classList.add("authenticated")
     this.element.innerText = "Authenticated"
-
     this.root.append(this.element)
+
+    this.element.addEventListener("click", () => this.unauthenticate())
   }
 
   renderUnauthenticated(): void {
     this.clear()
 
     this.element = document.createElement("button")
+    this.element.classList.add("unauthenticated")
     this.element.innerText = "Authenticate with Twitch"
     this.root.append(this.element)
 
     this.element.addEventListener("click", () => this.authenticate())
   }
 
-  render(): void {
-    const cached = getCached(this.scopes)
+  async render(): Promise<void> {
+    this.renderValidating()
 
-    if (cached) {
-      this.validate(cached)
+    const authentication = await getAuthentication(this.scopes)
+    if (authentication) {
+      this.renderAuthenticated()
     } else {
       this.renderUnauthenticated()
     }
@@ -201,30 +172,3 @@ window.customElements.define(
   "overlaysymfony-twitch-authentication",
   TwitchAuthentication,
 )
-
-export function getCached(scopes: string[]): BareAuthentication | undefined {
-  const cache = localStorage.getItem(localStorageKey)
-  if (cache) {
-    const authentication = JSON.parse(cache) as BareAuthentication
-    authentication.expires = new Date(authentication.expires)
-
-    for (const scope of scopes) {
-      if (!authentication.scope.includes(scope)) {
-        localStorage.removeItem(localStorageKey)
-        return undefined
-      }
-    }
-
-    return authentication
-  }
-
-  return undefined
-}
-
-export function setCached(authentication: BareAuthentication): void {
-  localStorage.setItem(localStorageKey, JSON.stringify(authentication))
-}
-
-export function clearCached(): void {
-  localStorage.removeItem(localStorageKey)
-}

package/src/ui/popup.ts

@@ -1,14 +1,14 @@
 import querystring from "@overlaysymphony/core/libs/querystring"
 
 import {
-  authenticateResult,
-  initiateAuthentication,
+  type BareAuthentication,
+  validateAuthentication,
 } from "../authentication/index.js"
 
 const state = getState()
 
 if (state.step === "initial") {
-  window.location.href = initiateAuthentication(
+  initiateAuthentication(
     state.clientId,
     `${window.location.origin}${window.location.pathname}`,
     state.scopes,
@@ -17,12 +17,13 @@ if (state.step === "initial") {
 
 if (state.step === "token") {
   const authentication = await authenticateResult(state.clientId, state)
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
   window.opener.postMessage({ type: "authentication", authentication }, "*")
   window.close()
 }
 
 if (state.step === "error") {
-  alert(`${state.error}. ${state.description || ""}`)
+  alert(`${state.error}. ${state.description ?? ""}`)
 }
 
 function getState():
@@ -101,15 +102,53 @@ function getState():
 
   return {
     step: "error",
-    error: validateString(query.error) || "Unknown Error",
+    error: validateString(query.error) ?? "Unknown Error",
     description: validateString(query.error_description),
   }
 }
 
-function validateString(input: string | unknown): string | undefined {
+function validateString(input: unknown): string | undefined {
   if (typeof input !== "string" || !input) {
     return undefined
   }
 
   return input
 }
+
+function initiateAuthentication(
+  clientId: string,
+  redirect: string,
+  scope: string[],
+): void {
+  window.location.href = `https://id.twitch.tv/oauth2/authorize?${querystring.stringify(
+    {
+      response_type: "token",
+      client_id: clientId,
+      redirect_uri: redirect,
+      scope: scope.join("+"),
+      state: clientId,
+    },
+  )}`
+}
+
+async function authenticateResult(
+  clientId: string,
+  result: {
+    token_type?: "bearer"
+    access_token?: string
+    scope?: string
+  },
+): Promise<BareAuthentication> {
+  if (!result.token_type || !result.access_token || !result.scope) {
+    throw new Error("Invalid result.")
+  }
+
+  const authentication = await validateAuthentication({
+    clientId,
+    tokenType: result.token_type,
+    accessToken: result.access_token,
+    scope: result.scope.split("+"),
+  })
+
+  return authentication
+}