Removed internal api from auth example

- addresses #119 - minor type fixes in shared
tidal-music · May 6, 2024 · 4712db6 · 4712db6
1 parent 652363b
commit 4712db6
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 30 deletions.
diff --git a/packages/auth/examples/authorization-code.html b/packages/auth/examples/authorization-code.html
@@ -12,6 +12,10 @@
     #forceRefreshBtn {
       max-width: 300px;
     }
+
+    #searchField {
+      margin-top: 20px;
+    }
   </style>
 </head>
 
@@ -42,10 +46,15 @@ <h1>Authorization code</h1>
   <div id="userInfo"></div>
 
   <button id="logoutBtn">Logout</button>
-  <button id="getUserBtn">Get user</button>
   <button id="forceRefreshBtn">Force Refresh (sub status)</button>
 
+  <label>
+    <input type="search" name="search" placeholder="search for artists" id="searchField" />
+  </label>
+
+  <ul id="searchResults"></ul>
+
   <script type="module" src="./authorization-code.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/packages/auth/examples/authorization-code.js b/packages/auth/examples/authorization-code.js
@@ -1,10 +1,11 @@
 import { finalizeLogin, init, initializeLogin, logout } from '../dist';
 
-import { getUserInfo } from './shared';
+import { debounce, getUserInfo, searchForArtist } from './shared';
 
 window.addEventListener('load', () => {
   const form = document.getElementById('authorizationCodeForm');
   const logoutButton = document.getElementById('logoutBtn');
+  const searchField = document.getElementById('searchField');
 
   form?.addEventListener('submit', event => {
     submitHandler(event).catch(error => console.error(error));
@@ -17,6 +18,17 @@ window.addEventListener('load', () => {
   });
 
   loadHandler().catch(error => console.error(error));
+
+  searchField?.addEventListener(
+    'keyup',
+    debounce(event => {
+      if (event.target.value.length > 0) {
+        searchForArtist(event.target.value).catch(error =>
+          console.error(error),
+        );
+      }
+    }, 500),
+  );
 });
 
 const submitHandler = async event => {
@@ -63,19 +75,12 @@ const loadHandler = async () => {
       window.location.replace('/examples/authorization-code.html');
     } else {
       await getUserInfo();
-      document.getElementById('getUserBtn').style.display = 'block';
+      document.getElementById('searchField').style.display = 'block';
       document.getElementById('forceRefreshBtn').style.display = 'block';
     }
   }
 };
 
-document.getElementById('getUserBtn')?.addEventListener('click', () => {
-  const userInfo = document.getElementById('userInfo');
-  // clear userInfo to make sure its filled again
-  userInfo.innerHTML = '';
-  getUserInfo().catch(error => console.error(error));
-});
-
 document.getElementById('forceRefreshBtn')?.addEventListener('click', () => {
   const userInfo = document.getElementById('userInfo');
   // clear userInfo to make sure its filled again

diff --git a/packages/auth/examples/shared.js b/packages/auth/examples/shared.js
@@ -1,41 +1,37 @@
 import { credentialsProvider } from '../dist';
 
 /**
- * fetch user info and display in DOM
+ * Gets the token from the SDK, extracts the user id and displays it
  *
  * @param {string?} apiSubStatus
  */
 export const getUserInfo = async apiSubStatus => {
   const credentials = await credentialsProvider.getCredentials(apiSubStatus);
 
-  const headers = new Headers({
-    Accept: 'application/json',
-    Authorization: `Bearer ${credentials.token}`,
-  });
-  const response = await window.fetch('https://login.tidal.com/oauth2/me', {
-    headers,
-  });
-  const userJson = await response.json();
-  const userInfo = document.getElementById('userInfo');
+  try {
+    const decodedToken = base64UrlDecode(credentials.token);
+    const userInfo = document.getElementById('userInfo');
 
-  if (userInfo && response.ok) {
-    userInfo.innerHTML = `<h3>User id: ${userJson.userId}</h3>`;
-    userInfo.innerHTML += `<h3>Email: ${userJson.email}</h3>`;
+    if (userInfo && decodedToken) {
+      userInfo.innerHTML = `<h3>User id: ${decodedToken.uid}</h3>`;
 
-    const logoutBtn = document.getElementById('logoutBtn');
-    logoutBtn.style.display = 'block';
+      const logoutBtn = document.getElementById('logoutBtn');
+      logoutBtn.style.display = 'block';
+    }
+  } catch (error) {
+    console.error(error);
   }
 };
 
 /**
  * Search for an artist and display the results in the DOM.
  *
- * @param {string} artistId
+ * @param {string} query
  */
-export const searchForArtist = async artistId => {
+export const searchForArtist = async query => {
   const searchResults = document.getElementById('searchResults');
   const credentials = await credentialsProvider.getCredentials();
-  const searchResult = await search(credentials.token, artistId, 'ARTISTS');
+  const searchResult = await search(credentials.token, query, 'ARTISTS');
 
   searchResults.innerHTML = '';
 
@@ -53,7 +49,8 @@ export const searchForArtist = async artistId => {
  * Fetches an artists and adds it name to DOM.
  *
  * @param {string} token
- * @param {string} artistId
+ * @param {string} query
+ * @param {string} type
  */
 export const search = async (token, query, type) => {
   const queryString = new URLSearchParams({
@@ -90,3 +87,18 @@ export function debounce(func, timeout = 300) {
     }, timeout);
   };
 }
+
+/**
+ * Decodes a base64 url encoded access token.
+ *
+ * @param {string} token
+ * @returns {{uid:number}}
+ */
+const base64UrlDecode = token => {
+  try {
+    const [, body] = token.split('.');
+    return JSON.parse(globalThis.atob(body));
+  } catch (error) {
+    console.error(error);
+  }
+};