feat: ✨ use /api_auth endpoint for token retrieval

-took some inspiration from the official readwise plugin to use the `/api_auth` endpoint to retrieve the token.
- improve the workflow in case the token becomes invalid (e.g. because of invalidation by the user)
- validate token whenever it changes

Author: johannrichard

src/main.ts

@@ -785,7 +785,7 @@ export default class ReadwiseMirror extends Plugin {
       id: 'test',
       name: 'Test Readwise API key',
       callback: async () => {
-        const isTokenValid = await this.readwiseApi.checkToken();
+        const isTokenValid = await this.readwiseApi.hasValidToken();
         this.notify.notice('Readwise: ' + (isTokenValid ? 'Token is valid' : 'INVALID TOKEN'));
       },
     });

src/services/readwise-api.ts

@@ -7,6 +7,7 @@ const API_PAGE_SIZE = 1000; // number of results per page, default 100 / max 100
 export default class ReadwiseApi {
   private apiToken: string;
   private notify: Notify;
+  private validToken: boolean = undefined;
 
   constructor(apiToken: string, notify: Notify) {
     if (!apiToken) {
@@ -15,10 +16,14 @@ export default class ReadwiseApi {
 
     this.setToken(apiToken);
     this.notify = notify;
+    this.checkToken().then((isValid) => {
+      this.validToken = isValid;
+    });
   }
 
   setToken(apiToken: string) {
     this.apiToken = apiToken;
+    this.validToken = undefined;
   }
 
   get headers() {
@@ -30,7 +35,14 @@ export default class ReadwiseApi {
     };
   }
 
-  async checkToken() {
+  async hasValidToken() {
+    if (this.validToken === undefined) {
+      this.validToken = await this.checkToken();
+    }
+    return this.validToken;
+  }
+
+  private async checkToken() {
     const results = await fetch(`${API_ENDPOINT}/auth`, this.headers);
 
     return results.status === 204; // Returns a 204 response if token is valid

src/ui/settings-tab.ts

@@ -77,6 +77,53 @@ export default class ReadwiseMirrorSettingTab extends PluginSettingTab {
     }
   }
 
+  // Button-based authentication inspired by the official Readwise plugin
+  private async getUserAuthToken(button: HTMLElement, attempt = 0): Promise<boolean> {
+    const baseURL = 'https://readwise.io';
+    const uuid = this.getReadwiseMirrorClientId();
+
+    if (attempt === 0) {
+      window.open(`${baseURL}/api_auth?token=${uuid}&service=readwise-mirror`);
+    }
+
+    let response, data;
+    try {
+      response = await fetch(`${baseURL}/api/auth?token=${uuid}`);
+      if (response.ok) {
+        data = await response.json();
+        if (data.userAccessToken) {
+          this.plugin.settings.apiToken = data.userAccessToken;
+          this.plugin.readwiseApi.setToken(data.userAccessToken);
+          await this.plugin.saveSettings();
+          this.display(); // Refresh the settings page
+          return true;
+        }
+      }
+    } catch (e) {
+      console.log("Failed to authenticate with Readwise:", e);
+    }
+
+    if (attempt > 20) {
+      this.notify.notice("Authentication timeout. Please try again.");
+      return false;
+    }
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    return this.getUserAuthToken(button, attempt + 1);
+  }
+
+  // Button-based authentication inspired by the official Readwise plugin
+  private getReadwiseMirrorClientId() {
+    let readwiseMirrorClientId = window.localStorage.getItem('readwise-mirror-obsidian-client-id');
+    if (readwiseMirrorClientId) {
+      return readwiseMirrorClientId;
+    } else {
+      readwiseMirrorClientId = Math.random().toString(36).substring(2, 15);
+      window.localStorage.setItem('readwise-mirror-obsidian-client-id', readwiseMirrorClientId);
+      return readwiseMirrorClientId;
+    }
+  }
+  
   private createTemplateDocumentation(title: string, variables: [string, string][]) {
     return createFragment((fragment) => {
       const documentationContainer = fragment.createDiv({
@@ -118,29 +165,82 @@ export default class ReadwiseMirrorSettingTab extends PluginSettingTab {
 
     containerEl.createEl('h1', { text: 'Readwise Sync Configuration' });
 
-    new Setting(containerEl)
-      .setName('Authentication')
-      .setHeading();
+    // Authentication section inspired by the official Readwise plugin
+    new Setting(containerEl).setName('Authentication').setHeading();
 
-    const apiTokenFragment = document.createDocumentFragment();
-    apiTokenFragment.createEl('span', null, (spanEl) =>
-      spanEl.createEl('a', null, (aEl) => (aEl.innerText = aEl.href = 'https://readwise.io/access_token'))
-    );
+   
+    const hasValidToken = await this.plugin.readwiseApi.hasValidToken();
+
+    const tokenValidationError = containerEl.createDiv({ 
+      cls: 'setting-item-description validation-error',
+      text: 'Invalid token. Please try authenticating again.',
+      attr: { 
+        style: 'color: var(--text-error); margin-top: 0.5em; display: none;'
+      }
+    });;
+    const tokenValidationSuccess = containerEl.createDiv({
+      cls: 'setting-item-description validation-success',
+      text: 'Token validated successfully',
+      attr: {
+        style: 'color: var(--text-success); margin-top: 0.5em; display: none;'
+      }
+    });
 
     new Setting(containerEl)
-      .setName('Enter your Readwise Access Token')
-      .setDesc(apiTokenFragment)
-      .addText((text) =>
+      .setName('Readwise Authentication')
+      .setDesc(createFragment((fragment) => {
+        fragment.createEl('br');
+        fragment.createEl('br');
+        fragment.createEl('strong', { text: 'Important: ' });
+        fragment.appendText('After successful authentication, a window with an error message will appear.');
+        fragment.createEl('br');
+        fragment.appendText('This is expected and can be safely closed.');
+        fragment.createEl('br');
+        fragment.createEl('br');
+        fragment.append(tokenValidationError);
+        fragment.append(tokenValidationSuccess);
+
+        // Show success or error message based on token validity
+        if(hasValidToken) {
+          tokenValidationSuccess.show();
+          tokenValidationError.hide();
+        } else {
+          tokenValidationSuccess.hide();
+          tokenValidationError.show();
+        } 
+      }))
+      .addButton((button) => {
+        button
+          .setButtonText(!hasValidToken ? 'Re-authenticate with Readwise' : 'Authenticate with Readwise')
+          .setCta()
+          .onClick(async (evt) => {
+            const buttonEl = evt.target as HTMLElement;
+            const token = await this.getUserAuthToken(buttonEl);
+            if (token) {
+              if (!hasValidToken) {
+                tokenValidationError.show();
+                tokenValidationSuccess.hide();
+              } else {
+                tokenValidationError.hide();
+                tokenValidationSuccess.show();
+              }
+            }
+          }).setDisabled(hasValidToken);
+        return button;
+      })
+      .addText((text) => {
+        const token = this.plugin.settings.apiToken;
+        const maskedToken = token 
+          ? token.slice(0, 6) + '*'.repeat(token.length - 6)
+          : '';
+        
         text
-          .setPlaceholder('Readwise Access Token')
-          .setValue(this.plugin.settings.apiToken)
-          .onChange(async (value) => {
-            if (!value) return;
-            this.plugin.settings.apiToken = value;
-            await this.plugin.saveSettings();
-            this.plugin.readwiseApi = new ReadwiseApi(value, this.notify);
-          })
-      );
+          .setPlaceholder('Token will be filled automatically after authentication')
+          .setValue(maskedToken)
+          .setDisabled(true);
+      });
+
+    
 
     new Setting(containerEl)
       .setName('Library Settings')