Dynamic developerToken

packages/lito/src/index.tsx

@@ -4,6 +4,14 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { createGlobalStyle, css } from 'styled-components'
 import App from './App'
+import { getDeveloperToken } from './utils'
+
+Sentry.init({
+  dsn: 'https://[email protected]/5992711',
+  integrations: [new Integrations.BrowserTracing()],
+
+  tracesSampleRate: 1.0,
+})
 
 const GlobalStyle = createGlobalStyle`${css`
   body {
@@ -51,16 +59,10 @@ const GlobalStyle = createGlobalStyle`${css`
 `}
 `
 
-Sentry.init({
-  dsn: 'https://[email protected]/5992711',
-  integrations: [new Integrations.BrowserTracing()],
-
-  tracesSampleRate: 1.0,
-})
 ;(async () => {
+  const developerToken = await getDeveloperToken()
   await MusicKit.configure({
-    developerToken:
-      'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IldlYlBsYXlLaWQifQ.eyJpc3MiOiJBTVBXZWJQbGF5IiwiaWF0IjoxNjMwNDI5NjUzLCJleHAiOjE2NDU5ODE2NTN9.YGzFdPFa5UVUIyIHTdqXMazr0-79NhdBp5DZ8yfvv-jIAZ6UyKvODwIrCx2C0_GeNVfivXrs6ueYZHyFAjm6tQ',
+    developerToken,
   })
 
   ReactDOM.render(

packages/lito/src/utils/auth.ts

@@ -1,5 +1,33 @@
 import { useState } from 'react'
 import { usePlayerEventCallback } from '.'
+import { developerToken } from '../../../../token.json'
+
+export const getDeveloperToken = async () => {
+  const key = 'developer_token'
+  const token = localStorage.getItem(key) || developerToken
+  const exp = (() => {
+    try {
+      const exp = JSON.parse(atob(token.split('.')[1] || 'null'))?.exp
+      if (typeof exp === 'number') return exp
+    } catch {}
+  })()
+  const now = Math.floor(Date.now() / 1000)
+  const shouldUpdate = !exp || exp - now <= 30 * 24 * 3600
+  if (shouldUpdate) {
+    const updateDeveloperToken = async () => {
+      const response = await fetch('https://api.litomusic.org/token')
+      if (!response.ok) throw new Error(`unexpected status: ${response.status}`)
+      const { developerToken } = response.json() as any
+      if (typeof developerToken !== 'string') throw new Error('failed to parse developerToken')
+      localStorage.setItem(key, developerToken)
+      return developerToken
+    }
+    const promise = updateDeveloperToken()
+    const expired = !exp || exp <= now
+    if (expired) return promise
+  }
+  return token
+}
 
 export const useAuthorized = () => {
   const [authorized, setAuthorized] = useState(() => MusicKit.getInstance().isAuthorized)

token.json

@@ -0,0 +1,3 @@
+{
+  "developerToken": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IldlYlBsYXlLaWQifQ.eyJpc3MiOiJBTVBXZWJQbGF5IiwiaWF0IjoxNjMwNDI5NjUzLCJleHAiOjE2NDU5ODE2NTN9.YGzFdPFa5UVUIyIHTdqXMazr0-79NhdBp5DZ8yfvv-jIAZ6UyKvODwIrCx2C0_GeNVfivXrs6ueYZHyFAjm6tQ"
+}