feat(settings): persist credentials for services

Author: dvcol

src/services/tmdb-client/clients/tmdb-client.ts

@@ -2,7 +2,6 @@ import type { TmdbClientAuthentication } from '~/models/tmdb/tmdb-client.model';
 
 import { BaseTmdbClient } from '~/services/tmdb-client/clients/base-tmdb-client';
 import { Config } from '~/settings/tmdb.api';
-import { createTab } from '~/utils/browser/browser.utils';
 
 /**
  * TmdbClient is a wrapper around the TmdbApi to provide basic authentication and state management.
@@ -23,13 +22,11 @@ export class TmdbClient extends BaseTmdbClient {
    *
    * @returns A promise resolving to the request token and redirect information.
    */
-  async requestUserToken(redirect?: boolean, redirect_to?: string) {
+  async requestUserToken(redirect_to?: string) {
     const response = await this.v4.auth.request({ redirect_to });
 
     const { request_token } = await response.json();
 
-    if (redirect) createTab({ url: `${Config.requestTokenUrl}${request_token}` });
-
     return {
       request_token,
       expires: Date.now() + this.settings.requestTokenTTL,
@@ -81,7 +78,7 @@ export class TmdbClient extends BaseTmdbClient {
    *
    * @returns A promise resolving to the imported authentication information.
    */
-  importAuthentication(auth: TmdbClientAuthentication): TmdbClientAuthentication {
+  importAuthentication(auth: TmdbClientAuthentication = {}): TmdbClientAuthentication {
     this.updateAuth(auth);
     return this.auth;
   }

src/services/trakt-client/clients/trakt-client.ts

@@ -320,7 +320,7 @@ export class TraktClient extends BaseTraktClient {
    *
    * @returns A promise resolving to the imported Trakt authentication information.
    */
-  async importAuthentication(auth: TraktClientAuthentication): Promise<TraktClientAuthentication> {
+  async importAuthentication(auth: TraktClientAuthentication = {}): Promise<TraktClientAuthentication> {
     this.updateAuth(auth);
 
     if (auth.expires !== undefined && auth.expires < Date.now()) await this.refreshToken();

src/services/tvdb-client/clients/tvdb-client.ts

@@ -42,10 +42,10 @@ export class TvdbClient extends BaseTvdbClient {
    *
    * @returns A promise resolving to the imported authentication information.
    */
-  async importAuthentication(auth: TvdbClientAuthentication): Promise<TvdbClientAuthentication> {
+  async importAuthentication(auth: TvdbClientAuthentication = {}): Promise<TvdbClientAuthentication> {
     this.updateAuth(auth);
 
-    if (auth.expires !== undefined && auth.expires < Date.now()) await this.authenticate(auth.userPin);
+    if (auth?.expires !== undefined && auth.expires < Date.now()) await this.authenticate(auth.userPin);
     return this.auth;
   }
 }

src/stores/settings.store.ts

@@ -1,39 +1,59 @@
 import { defineStore, storeToRefs } from 'pinia';
-import { ref } from 'vue';
+import { computed, reactive } from 'vue';
 
+import type { TmdbClientAuthentication } from '~/models/tmdb/tmdb-client.model';
 import type { TraktClientAuthentication } from '~/models/trakt/trakt-authentication.model';
 
+import type { TvdbClientAuthentication } from '~/models/tvdb/tvdb-client.model';
+
 import { storage } from '~/utils/browser/browser-storage.utils';
 
-export const useSettingsStore = defineStore('settings', () => {
-  const auth = ref<TraktClientAuthentication>();
-  const isAuthenticated = ref(false);
+type SettingsAuth = {
+  trakt?: TraktClientAuthentication;
+  tvdb?: TvdbClientAuthentication;
+  tmdb?: TmdbClientAuthentication;
+};
 
-  const setAuthenticated = (authenticated: boolean = false) => {
-    isAuthenticated.value = authenticated;
+type SettingsAuthenticated = {
+  trakt?: boolean;
+  tvdb?: boolean;
+  tmdb?: boolean;
+};
+
+export const useSettingsStore = defineStore('settings', () => {
+  const auth = reactive<SettingsAuth>({});
+  const authenticated = reactive<SettingsAuthenticated>({});
+  const isAuthenticated = computed(() => Object.values(authenticated).every(Boolean));
+
+  const setAuthenticated = ({ trakt, tvdb, tmdb }: SettingsAuth = {}) => {
+    if (trakt) authenticated.trakt = !!trakt.access_token;
+    if (tvdb) authenticated.tvdb = !!tvdb.accessToken;
+    if (tmdb) authenticated.tmdb = !!tmdb.accessToken;
   };
 
-  const syncSetAuth = (_auth: TraktClientAuthentication) => storage.sync.set('settings.auth', _auth);
+  const syncSetAuth = (_auth: SettingsAuth) => storage.sync.set('settings.auth', _auth);
   const syncClearAuth = () => storage.sync.remove('settings.auth');
   const syncRestoreAuth = () =>
-    storage.sync.get<TraktClientAuthentication>('settings.auth').then(_auth => {
-      auth.value = _auth;
-      setAuthenticated(!!_auth?.access_token);
+    storage.sync.get<SettingsAuth>('settings.auth').then(_auth => {
+      Object.assign(auth, _auth);
+      setAuthenticated(_auth);
       return _auth;
     });
 
-  const setAuth = (_auth?: TraktClientAuthentication) => {
-    auth.value = _auth;
-    setAuthenticated(!!_auth?.access_token);
-    console.info('settings-store', 'Auth changed', _auth);
-    if (_auth?.access_token) {
-      syncSetAuth(_auth).then(() => console.info('settings-store', 'Auth saved', _auth));
+  const setAuth = (_auth: SettingsAuth = {}) => {
+    if (_auth.trakt) auth.trakt = _auth.trakt;
+    if (_auth.tvdb) auth.tvdb = _auth.tvdb;
+    if (_auth.tmdb) auth.tmdb = _auth.tmdb;
+    console.info('settings-store', 'Auth changed', { ...auth });
+    setAuthenticated(_auth);
+    if (Object.keys(_auth).length > 0) {
+      syncSetAuth(auth).then(() => console.info('settings-store', 'Auth saved', { ...auth }));
     } else {
       syncClearAuth().then(() => console.info('settings-store', 'Auth cleared'));
     }
   };
 
-  return { auth, setAuth, isAuthenticated, setAuthenticated, syncRestoreAuth };
+  return { auth, setAuth, authenticated, isAuthenticated, syncRestoreAuth };
 });
 
 export const useSettingsStoreRefs = () => storeToRefs(useSettingsStore());

src/web/init-services.ts

@@ -2,18 +2,21 @@ import { tmdbService } from '~/services/tmdb-client/tmdb-client.service';
 import { traktService } from '~/services/trakt-client/trakt-client.service';
 import { tvdbService } from '~/services/tvdb-client/tvdb-client.service';
 import { useSettingsStore } from '~/stores/settings.store';
-import { storage } from '~/utils/browser/browser-storage.utils';
 
 export const initServices = async () => {
   const { setAuth, syncRestoreAuth } = useSettingsStore();
 
   const auth = await syncRestoreAuth();
 
-  if (auth) traktService.importAuthentication(auth).then(() => console.info('TraktClient.importAuthentication', auth));
+  const restore = [];
+  if (auth.trakt) restore.push(traktService.importAuthentication(auth.trakt).then(_auth => console.info('TraktClient.importAuthentication', _auth)));
+  if (auth.tvdb) restore.push(tvdbService.importAuthentication(auth.tvdb).then(_auth => console.info('TvdbClient.importAuthentication', _auth)));
+  if (auth.tmdb) console.info('TmdbClient.importAuthentication', tmdbService.importAuthentication(auth.tmdb));
+  await Promise.all(restore);
 
   traktService.onAuthChange(_auth => {
     console.info('TraktClient.onAuthChange', _auth);
-    setAuth(_auth);
+    setAuth({ trakt: _auth });
   });
 
   traktService.onCall(async call => {
@@ -22,8 +25,7 @@ export const initServices = async () => {
 
   tvdbService.onAuthChange(_auth => {
     console.info('TvdbClient.onAuthChange', _auth);
-    // TODO move this to store
-    storage.sync.set('todo.tvdb.auth', _auth);
+    setAuth({ tvdb: _auth });
   });
 
   tvdbService.onCall(async call => {
@@ -32,8 +34,7 @@ export const initServices = async () => {
 
   tmdbService.onAuthChange(_auth => {
     console.info('TmdbClient.onAuthChange', _auth);
-    // TODO move this to store
-    storage.sync.set('todo.tmdb.auth', _auth);
+    setAuth({ tmdb: _auth });
   });
 
   tmdbService.onCall(async call => {