@overlaysymphony/twitch 0.1.1 → 0.2.1

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,10 +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)
 
-    this.render()
+    void this.render()
   }
 
   get clientId(): string {
@@ -82,7 +81,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 +89,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 +136,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 +171,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)
-  window.opener.postMessage({ type: "authentication", authentication }, "*")
+  const opener = window.opener as Window | undefined
+  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({
+    tokenType: result.token_type,
+    clientId,
+    accessToken: result.access_token,
+    scope: result.scope.split("+"),
+  })
+
+  return authentication
+}

package/src/ui/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />