feat: use new api

Author: garredow

.prettierignore

@@ -0,0 +1,5 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+public/build

.prettierrc

@@ -0,0 +1,4 @@
+{
+	"singleQuote": true,
+	"printWidth": 100
+}

README.md

@@ -13,7 +13,7 @@ This is very much a work in progress. Keep your eye on the changelog to see what
 1. Connect your KaiOS device to your computer and make sure it appears in WebIDE (Waterfox Classic is recommended)
 2. Build the app with `npm run build`
 3. In WebIDE, load the `/public` folder as a packaged app
-4. On your computer, visit the [RainCloud website](https://app.vulpine.fm/) to sign into SoundCloud
+4. On your computer, visit the [RainCloud website](https://raincloud.fm/login/kaios) to sign into SoundCloud
 5. In the app, select 'Sign In via QR Code' and scan the code on your screen. \*You may have to exit and reopen the app to scan the code after giving permission
 6. When you scan the code, you're in!
 

package-lock.json

@@ -51,6 +51,7 @@
     "lodash.throttle": "^4.1.1",
     "numeral": "^2.0.6",
     "onyx-ui": "^0.10.0",
+    "openid-client": "^6.3.3",
     "sirv-cli": "^1.0.0",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.2.0"

package.json

@@ -53,7 +53,7 @@
     },
     "redirects": [
       {
-        "from": "https://app.vulpine.fm/oauth",
+        "from": "https://raincloud.fm/oauth",
         "to": "/index.html"
       }
     ]

public/manifest.en-US.webmanifest

@@ -40,7 +40,7 @@
   "default_locale": "en-US",
   "redirects": [
     {
-      "from": "https://app.vulpine.fm/oauth",
+      "from": "https://raincloud.fm/oauth",
       "to": "/index.html"
     }
   ]

public/manifest.webapp

@@ -53,7 +53,7 @@
     },
     "redirects": [
       {
-        "from": "https://app.vulpine.fm/oauth",
+        "from": "https://raincloud.fm/oauth",
         "to": "/index.html"
       }
     ]

public/manifest.webmanifest

@@ -2,7 +2,7 @@
   import OnyxApp from 'onyx-ui/components/app/OnyxApp.svelte';
   import { Priority } from 'onyx-ui/enums';
   import { KeyManager, Onyx } from 'onyx-ui/services';
-  import Router, { location, pop } from 'svelte-spa-router';
+  import Router, { location, pop, replace } from 'svelte-spa-router';
   import AppMenu from './components/AppMenu.svelte';
   import AudioPlayer from './components/AudioPlayer.svelte';
   import Dashboard from './components/Dashboard.svelte';
@@ -40,10 +40,10 @@
 
   console.log(`Env: ${process.env.NODE_ENV}`);
 
-  const code = window.location.href.match(/code=([A-Za-z0-9-_]+)/)?.[1];
+  const code = new URL(window.location.href).searchParams.get('code');
   if (code) {
     new Auth().fetchTokensFromCode(code).then((tokens) => {
-      window.close();
+      replace('/library');
     });
   }
 
@@ -102,7 +102,7 @@
         return true;
       },
     },
-    Priority.High
+    Priority.High,
   );
 
   $: Onyx.settings.update($settings);

src/App.svelte

@@ -1,23 +1,35 @@
 import KaiOS from 'kaios-lib';
+import { calculatePKCECodeChallenge, randomPKCECodeVerifier, randomState } from 'openid-client';
 import { push } from 'svelte-spa-router';
 import type { AuthSession, Tokens, User } from '../models';
 
 const AUTH_STORAGE_KEY = 'auth_session';
+const CODE_VERIFIER_KEY = 'code_verifier';
 
 type Options = {
   apiBaseUrl: string;
   clientId: string;
+  redirectUri: string;
 };
 export class Auth {
   private options: Options;
 
   constructor(options: Partial<Options> = {}) {
+    const baseOptions: Options =
+      process.env.NODE_ENV === 'production'
+        ? {
+            apiBaseUrl: 'https://raincloud.fm',
+            clientId: 'ttmRWSTGJ7pzm1s8znU3CSJ5mXSjtS0l',
+            redirectUri: 'https://raincloud.fm/oauth',
+          }
+        : {
+            apiBaseUrl: 'http://localhost:3001',
+            clientId: 'Gbv3N4cjTjVMwfaHVbCdEB7W5Y3JQM28',
+            redirectUri: 'http://localhost:3000',
+          };
+
     this.options = {
-      apiBaseUrl: 'https://api.raincloud.fm',
-      clientId:
-        process.env.NODE_ENV === 'production'
-          ? 'ttmRWSTGJ7pzm1s8znU3CSJ5mXSjtS0l'
-          : 'Gbv3N4cjTjVMwfaHVbCdEB7W5Y3JQM28',
+      ...baseOptions,
       ...options,
     };
   }
@@ -34,10 +46,8 @@ export class Auth {
       throw new Error('No session found! You must sign in first.');
     }
 
-    if (session.expires_at < Date.now() + 600000) {
-      console.log(
-        `Session expiring (${new Date(session.expires_at).toISOString()}), refreshing...`
-      );
+    if (session.expiresAt < Date.now() + 600000) {
+      console.log(`Session expiring (${new Date(session.expiresAt).toISOString()}), refreshing...`);
       await this.refreshSession(session);
       session = JSON.parse(window.localStorage.getItem(AUTH_STORAGE_KEY) as string);
     }
@@ -59,13 +69,35 @@ export class Auth {
     window.localStorage.removeItem(AUTH_STORAGE_KEY);
   }
 
+  async initiateWebLogin(): Promise<void> {
+    const url = new URL('https://secure.soundcloud.com/authorize');
+    url.searchParams.append('response_type', 'code');
+    url.searchParams.append('client_id', this.options.clientId);
+    url.searchParams.append('redirect_uri', this.options.redirectUri);
+
+    const codeVerifier = randomPKCECodeVerifier();
+    sessionStorage.setItem(CODE_VERIFIER_KEY, codeVerifier);
+    const codeChalenge = await calculatePKCECodeChallenge(codeVerifier);
+    url.searchParams.append('code_challenge', codeChalenge);
+    url.searchParams.append('code_challenge_method', 'S256');
+
+    const state = randomState();
+    url.searchParams.append('state', state);
+
+    console.log('url', url.toString());
+
+    window.location.href = url.toString();
+  }
+
   async fetchTokensFromQRCode(): Promise<void> {
     const qrCode = new KaiOS.QRCode();
     const text = await qrCode.readAsText();
-    const user: User = await this.fetchAuthUser(JSON.parse(text).access_token);
+    const payload = JSON.parse(text) as Tokens;
+
+    const user: User = await this.fetchAuthUser(payload.accessToken);
 
     this.setSession({
-      ...JSON.parse(text),
+      ...payload,
       user_id: user.id,
       user_name: user.full_name || user.username,
       user_avatar_url: user.avatar_url,
@@ -82,16 +114,18 @@ export class Auth {
         resolve(JSON.parse(xhr.responseText));
       });
       xhr.addEventListener('error', () => reject(new Error('Failed to fetch tokens')));
-      xhr.open('POST', `${this.options.apiBaseUrl}/getTokens`);
+      xhr.open('POST', `${this.options.apiBaseUrl}/api/v1/token`);
       xhr.setRequestHeader('Content-Type', 'application/json');
       xhr.send(
         JSON.stringify({
           clientId: this.options.clientId,
           code,
+          codeVerifier: sessionStorage.getItem(CODE_VERIFIER_KEY),
+          redirectUri: this.options.redirectUri,
         })
       );
     });
-    const user: User = await this.fetchAuthUser(tokens.access_token);
+    const user: User = await this.fetchAuthUser(tokens.accessToken);
 
     this.setSession({
       ...tokens,
@@ -134,12 +168,12 @@ export class Auth {
         resolve(JSON.parse(xhr.responseText));
       });
       xhr.addEventListener('error', () => reject(new Error('Failed to refresh tokens')));
-      xhr.open('POST', `${this.options.apiBaseUrl}/refreshTokens`);
+      xhr.open('POST', `${this.options.apiBaseUrl}/api/v1/token/refresh`);
       xhr.setRequestHeader('Content-Type', 'application/json');
       xhr.send(
         JSON.stringify({
           clientId: this.options.clientId,
-          refreshToken: session.refresh_token,
+          refreshToken: session.refreshToken,
         })
       );
     })