feat(login): rework login to skip fetch

Author: dvcol

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -93,11 +93,6 @@ const options = computed<DropdownProps['options']>(() => {
   return baseOptions;
 });
 
-const login = async () => {
-  const response = await TraktService.approve();
-  return createTab({ url: response.url });
-};
-
 const loadUser = async (account: string) => {
   const auth = await syncRestoreAuth(account);
   return TraktService.importAuthentication(auth);
@@ -113,7 +108,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
         url: ExternaLinks.trakt[TraktService.isStaging ? 'staging' : 'production'],
       });
     case 'login':
-      return login();
+      return TraktService.approve({ prompt: true });
     case 'logout':
       await TraktService.logout();
       await setCurrentUser();

src/components/views/login/LoginComponent.vue

@@ -8,7 +8,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { TraktService } from '~/services/trakt.service';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useI18n } from '~/utils';
-import { createTab } from '~/utils/browser/browser.utils';
 
 const i18n = useI18n('global');
 
@@ -28,8 +27,7 @@ onMounted(() => {
 
 const redirect = async () => {
   try {
-    const response = await TraktService.approve();
-    await createTab({ url: response.url });
+    await TraktService.approve();
   } catch (error) {
     console.error('Error:', error);
   }

src/models/tmdb/tmdb-client.model.ts

@@ -12,8 +12,6 @@ import {
 } from '~/services/common/base-client';
 
 export type TmdbClientSettings = BaseSettings<{
-  /** The domain name (e.g. https://api4.thetmdb.com) */
-  endpoint: string;
   /** The consumer client identifier */
   useragent: string;
   /** The app api key  */

src/models/trakt/trakt-authentication.model.ts

@@ -39,7 +39,7 @@ export type TraktAuthenticationAuthorizeRequest = {
   /** Prefer the account sign up page to be the default. */
   signup?: boolean;
   /** Force the user to sign in and authorize your app. */
-  prompt?: 'login';
+  prompt?: 'login' | boolean;
 };
 
 export type TraktAuthenticationBaseRequest = {
@@ -75,3 +75,8 @@ export type TraktAuthenticationRevokeRequest = {
   /** Get this from your app settings. */
   client_secret: string;
 };
+
+export type TraktAuthenticationApprove = Pick<TraktAuthenticationAuthorizeRequest, 'state' | 'signup' | 'prompt'> & {
+  redirect?: RequestRedirect;
+  redirect_uri?: string;
+};

src/models/trakt/trakt-client.model.ts

@@ -37,8 +37,6 @@ export type TraktClientSettings = BaseSettings<{
   client_secret: string;
   /** URI specified in your app settings. */
   redirect_uri: string;
-  /** The domain name (i.e. https://api.trakt.tv) */
-  endpoint: string;
   /** The consumer client identifier */
   useragent: string;
 }>;

src/models/tvdb/tvdb-client.model.ts

@@ -15,8 +15,6 @@ import {
  * @see [documentation]{@link https://thetvdb.github.io/v4-api/#/Login/post_login}
  */
 export type TvdbClientSettings = BaseSettings<{
-  /** The domain name (e.g. https://api4.thetvdb.com) */
-  endpoint: string;
   /** The api version (e.g. v4) */
   version: string;
   /** The consumer client identifier */

src/services/common/base-client.ts

@@ -35,6 +35,8 @@ export type BaseQuery<R extends BaseRequest = BaseRequest, Q = unknown> = {
 };
 
 export type BaseSettings<S extends RecursiveRecord = RecursiveRecord> = S & {
+  /** The domain name (i.e. https://api.domain.ext) */
+  endpoint: string;
   /** A cors proxy endpoint to use for requests when in a browser */
   corsProxy?: string;
   /** A cors prefix to use for requests when in a browser */
@@ -118,8 +120,10 @@ export class ClientEndpoint<
   opts: Option;
   body?: BaseBody<string | keyof Parameter>;
   init?: BaseInit;
+  transform?: (param: Parameter) => Parameter;
   validate?: (param: Parameter) => boolean;
   cached: Cache extends true ? Omit<this, 'cached'> & ClientEndpointCache<Parameter, Response> : never;
+  resolve: (param?: Parameter) => URL;
 
   constructor(template: BaseTemplate<Parameter, Option>) {
     this.method = template.method;
@@ -129,7 +133,11 @@ export class ClientEndpoint<
     this.body = template.body;
 
     this.validate = template.validate;
+    this.transform = template.transform;
     this.cached = (template.opts?.cache ? this : null) as never;
+    this.resolve = () => {
+      throw new Error('Not implemented');
+    };
   }
 }
 
@@ -172,7 +180,7 @@ export abstract class BaseClient<
   private _authentication: ObservableState<AuthenticationType>;
   private _callListeners: Observable<QueryType>;
 
-  protected get settings() {
+  get settings() {
     if (this._settings.corsProxy) return { ...this._settings, endpoint: this._settings.corsProxy };
     return this._settings;
   }
@@ -282,9 +290,18 @@ export abstract class BaseClient<
           }
         };
 
+        const parseUrl = (param: Record<string, unknown> = {}) => {
+          const _params = template.transform?.(param) ?? param;
+          template.validate?.(_params);
+          return this._parseUrl(template, _params);
+        };
+
         Object.entries(client[endpoint]).forEach(([key, value]) => {
           if (key === 'cached') {
             if (template.opts?.cache) Object.defineProperty(fn, 'cached', { value: cachedFn });
+          } else if (key === 'resolve') {
+            Object.defineProperty(fn, 'resolve', { value: parseUrl });
+            if (template.opts?.cache) Object.defineProperty(cachedFn, 'resolve', { value: parseUrl });
           } else {
             Object.defineProperty(fn, key, { value });
             if (template.opts?.cache) Object.defineProperty(cachedFn, key, { value });

src/services/trakt-client/api/endpoints/authentication.endpoint.ts

@@ -40,7 +40,7 @@ export const authentication = {
      */
     authorize: new TraktClientEndpoint<TraktAuthenticationAuthorizeRequest, unknown, false>({
       method: HttpMethod.GET,
-      url: '/oauth/authorize?response_type=code&client_id=&redirect_uri=&state=',
+      url: '/oauth/authorize?response_type=code&client_id=&redirect_uri=&state=&signup=&prompt=',
       init: {
         redirect: 'manual',
         credentials: 'omit',
@@ -58,6 +58,7 @@ export const authentication = {
           },
         },
       },
+      transform: params => ({ ...params, prompt: params.prompt ? 'login' : params.prompt }),
     }),
     /** @see [get-token]{@link https://trakt.docs.apiary.io/#reference/authentication-oauth/get-token} */
     token: {

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

@@ -2,7 +2,7 @@ import { BaseTraktClient, isResponseOk } from './base-trakt-client';
 
 import type {
   TraktAuthentication,
-  TraktAuthenticationAuthorizeRequest,
+  TraktAuthenticationApprove,
   TraktAuthenticationBaseRequest,
   TraktAuthenticationCodeRequest,
   TraktAuthenticationRefreshRequest,
@@ -277,11 +277,7 @@ export class TraktClient extends BaseTraktClient {
    *
    * @see [authorize]{@link https://trakt.docs.apiary.io/#reference/authentication-oauth/authorize}
    */
-  redirectToAuthentication({
-    redirect,
-    redirect_uri,
-    ...request
-  }: Pick<TraktAuthenticationAuthorizeRequest, 'state' | 'signup' | 'prompt'> & { redirect?: RequestRedirect; redirect_uri?: string } = {}) {
+  redirectToAuthentication({ redirect, redirect_uri, ...request }: TraktAuthenticationApprove = {}) {
     this.updateAuth(auth => ({ ...auth, state: request.state ?? randomHex() }));
     const init: TraktApiInit = {
       credentials: 'omit',
@@ -299,6 +295,31 @@ export class TraktClient extends BaseTraktClient {
     );
   }
 
+  /**
+   * Initiates the OAuth process by generating a URL to the Trakt website.
+   * Users will be prompted to sign in and authorize the application.
+   *
+   * Once redirected back to the application, the code should be exchanged for an access token using {@link exchangeCodeForToken}.
+   *
+   * @param redirect - The type of redirect to use (defaults to manual).
+   * @param redirect_uri - The URL to redirect to after the user has authorized the application (defaults to client settings).
+   * @param request - Additional parameters for the authorization request.
+   * @returns A promise resolving to the url to authorize the application.
+   *
+   * @see [authorize]{@link https://trakt.docs.apiary.io/#reference/authentication-oauth/authorize}
+   */
+  redirectToAuthenticationUrl({ redirect, redirect_uri, ...request }: TraktAuthenticationApprove = {}) {
+    return this.authentication.oAuth.authorize
+      .resolve({
+        response_type: 'code',
+        client_id: this.settings.client_id,
+        redirect_uri: redirect_uri ?? this.settings.redirect_uri,
+        state: this.auth.state,
+        ...request,
+      })
+      .toString();
+  }
+
   /**
    * Exchanges the authorization code obtained after the user has authorized the application with {@link redirectToAuthentication}.
    *

src/services/trakt.service.ts

@@ -1,5 +1,6 @@
 import type { TmdbApiResponse } from '~/models/tmdb/tmdb-client.model';
 
+import type { TraktAuthenticationApprove } from '~/models/trakt/trakt-authentication.model';
 import type { TraktApiResponse } from '~/models/trakt/trakt-client.model';
 import type { SettingsAuth, UserSetting } from '~/models/trakt-service.model';
 import type { TvdbApiResponse } from '~/models/tvdb/tvdb-client.model';
@@ -14,10 +15,11 @@ import { traktClientSettings } from '~/settings/traktv.api';
 import { tvdbClientSettings } from '~/settings/tvdb.api';
 import { useAuthSettingsStore } from '~/stores/settings/auth.store';
 import { useUserSettingsStore } from '~/stores/settings/user.store';
+import { createTab } from '~/utils/browser/browser.utils';
 import { ChromeCacheStore } from '~/utils/cache.utils';
 
 export class TraktService {
-  private static traktClient: TraktClient;
+  static traktClient: TraktClient;
   private static tmdbClient: TmdbClient;
   private static tvdbClient: TvdbClient;
 
@@ -79,8 +81,9 @@ export class TraktService {
     return this.saveAuth({ trakt, tvdb, tmdb });
   }
 
-  static async approve({ redirect_uri, redirect }: { redirect_uri?: string; redirect?: RequestRedirect } = {}) {
-    return this.traktClient.redirectToAuthentication({ redirect_uri, redirect });
+  static async approve(params: TraktAuthenticationApprove = {}) {
+    const url = this.traktClient.redirectToAuthenticationUrl(params);
+    return createTab({ url });
   }
 
   static async login(token: string): Promise<{ auth: SettingsAuth; settings: UserSetting }> {