fix(auth): resolve Plex OAuth client ID mismatch (#2746)

Author: 0xSysR3ll

cypress/config/settings.cypress.json

@@ -1,5 +1,6 @@
 {
   "clientId": "6919275e-142a-48d8-be6b-93594cbd4626",
+  "sessionSecret": "deadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef",
   "vapidPrivate": "tmnslaO8ZWN6bNbSEv_rolPeBTlNxOwCCAHrM9oZz3M",
   "vapidPublic": "BK_EpP8NDm9waor2zn6_S28o3ZYv4kCkJOfYpO3pt3W6jnPmxrgTLANUBNbbyaNatPnSQ12De9CeqSYQrqWzHTs",
   "main": {

seerr-api.yml

@@ -706,10 +706,18 @@ components:
           example: A Label
     PublicSettings:
       type: object
+      required:
+        - initialized
+        - plexClientIdentifier
       properties:
         initialized:
           type: boolean
           example: false
+        plexClientIdentifier:
+          type: string
+          format: uuid
+          description: Instance Plex OAuth client identifier
+          example: 6919275e-142a-48d8-be6b-93594cbd4626
     MovieResult:
       type: object
       required:

server/index.ts

@@ -203,7 +203,7 @@ app
     server.use(
       '/api',
       session({
-        secret: settings.clientId,
+        secret: settings.sessionSecret,
         resave: false,
         saveUninitialized: false,
         cookie: {

server/interfaces/api/settingsInterfaces.ts

@@ -48,6 +48,7 @@ export interface PublicSettingsResponse {
   emailEnabled: boolean;
   newPlexLogin: boolean;
   youtubeUrl: string;
+  plexClientIdentifier: string;
 }
 
 export interface CacheItem {

server/lib/settings/index.ts

@@ -1,7 +1,7 @@
 import { MediaServerType } from '@server/constants/server';
 import { Permission } from '@server/lib/permissions';
 import { runMigrations } from '@server/lib/settings/migrator';
-import { randomUUID } from 'crypto';
+import { randomBytes, randomUUID } from 'crypto';
 import fs from 'fs/promises';
 import { mergeWith } from 'lodash';
 import path from 'path';
@@ -211,6 +211,7 @@ interface FullPublicSettings extends PublicSettings {
   userEmailRequired: boolean;
   newPlexLogin: boolean;
   youtubeUrl: string;
+  plexClientIdentifier: string;
 }
 
 export interface NotificationAgentConfig {
@@ -360,6 +361,7 @@ export type JobId =
 
 export interface AllSettings {
   clientId: string;
+  sessionSecret?: string;
   vapidPublic: string;
   vapidPrivate: string;
   main: MainSettings;
@@ -387,6 +389,7 @@ class Settings {
   constructor(initialSettings?: AllSettings) {
     this.data = {
       clientId: randomUUID(),
+      sessionSecret: '',
       vapidPrivate: '',
       vapidPublic: '',
       main: {
@@ -713,6 +716,7 @@ class Settings {
         this.data.notifications.agents.email.options.userEmailRequired,
       newPlexLogin: this.data.main.newPlexLogin,
       youtubeUrl: this.data.main.youtubeUrl,
+      plexClientIdentifier: this.data.clientId,
     };
   }
 
@@ -752,6 +756,10 @@ class Settings {
     return this.data.clientId;
   }
 
+  get sessionSecret(): string {
+    return this.data.sessionSecret!;
+  }
+
   get vapidPublic(): string {
     return this.data.vapidPublic;
   }
@@ -821,6 +829,10 @@ class Settings {
       this.data.clientId = randomUUID();
       change = true;
     }
+    if (!this.data.sessionSecret) {
+      this.data.sessionSecret = randomBytes(32).toString('hex');
+      change = true;
+    }
     if (!this.data.vapidPublic || !this.data.vapidPrivate) {
       const vapidKeys = webpush.generateVAPIDKeys();
       this.data.vapidPrivate = vapidKeys.privateKey;

src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx

@@ -91,7 +91,9 @@ const UserLinkedAccountsSettings = () => {
   const linkPlexAccount = async () => {
     setError(null);
     try {
-      const authToken = await plexOAuth.login();
+      const authToken = await plexOAuth.login(
+        settings.currentSettings.plexClientIdentifier
+      );
       await axios.post(
         `/api/v1/user/${user?.id}/settings/linked-accounts/plex`,
         {

src/context/SettingsContext.tsx

@@ -31,6 +31,7 @@ const defaultSettings = {
   emailEnabled: false,
   newPlexLogin: true,
   youtubeUrl: '',
+  plexClientIdentifier: '',
 };
 
 export const SettingsContext = React.createContext<SettingsContextProps>({

src/hooks/usePlexLogin.ts

@@ -1,3 +1,4 @@
+import useSettings from '@app/hooks/useSettings';
 import PlexOAuth from '@app/utils/plex';
 import { useState } from 'react';
 
@@ -11,11 +12,14 @@ function usePlexLogin({
   onError?: (err: string) => void;
 }) {
   const [loading, setLoading] = useState(false);
+  const { currentSettings } = useSettings();
 
   const getPlexLogin = async () => {
     setLoading(true);
     try {
-      const authToken = await plexOAuth.login();
+      const authToken = await plexOAuth.login(
+        currentSettings.plexClientIdentifier
+      );
       setLoading(false);
       onAuthToken(authToken);
     } catch (e) {

src/pages/_app.tsx

@@ -256,6 +256,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     emailEnabled: false,
     newPlexLogin: true,
     youtubeUrl: '',
+    plexClientIdentifier: '',
   };
 
   if (ctx.res) {

src/utils/plex.ts

@@ -20,19 +20,6 @@ export interface PlexPin {
   code: string;
 }
 
-const uuidv4 = (): string => {
-  return ((1e7).toString() + -1e3 + -4e3 + -8e3 + -1e11).replace(
-    /[018]/g,
-    function (c) {
-      return (
-        parseInt(c) ^
-        (window.crypto.getRandomValues(new Uint8Array(1))[0] &
-          (15 >> (parseInt(c) / 4)))
-      ).toString(16);
-    }
-  );
-};
-
 class PlexOAuth {
   private plexHeaders?: PlexHeaders;
 
@@ -41,26 +28,25 @@ class PlexOAuth {
 
   private authToken?: string;
 
-  public initializeHeaders(): void {
-    if (!window) {
+  public initializeHeaders(plexClientIdentifier: string): void {
+    if (typeof window === 'undefined') {
       throw new Error(
         'Window is not defined. Are you calling this in the browser?'
       );
     }
 
-    let clientId = localStorage.getItem('plex-client-id');
-    if (!clientId) {
-      const uuid = uuidv4();
-      localStorage.setItem('plex-client-id', uuid);
-      clientId = uuid;
+    if (!plexClientIdentifier) {
+      throw new Error(
+        'Plex client identifier missing. Reload the page and try again.'
+      );
     }
 
     const browser = Bowser.getParser(window.navigator.userAgent);
     this.plexHeaders = {
       Accept: 'application/json',
       'X-Plex-Product': 'Seerr',
       'X-Plex-Version': 'Plex OAuth',
-      'X-Plex-Client-Identifier': clientId,
+      'X-Plex-Client-Identifier': plexClientIdentifier,
       'X-Plex-Model': 'Plex OAuth',
       'X-Plex-Platform': browser.getBrowserName(),
       'X-Plex-Platform-Version': browser.getBrowserVersion() || 'Unknown',
@@ -93,9 +79,14 @@ class PlexOAuth {
     this.openPopup({ title: 'Plex Auth', w: 600, h: 700 });
   }
 
-  public async login(): Promise<string> {
-    this.initializeHeaders();
-    await this.getPin();
+  public async login(plexClientIdentifier: string): Promise<string> {
+    try {
+      this.initializeHeaders(plexClientIdentifier);
+      await this.getPin();
+    } catch (e) {
+      this.closePopup();
+      throw e;
+    }
 
     if (!this.plexHeaders || !this.pin) {
       throw new Error('Unable to call login if class is not initialized.');
@@ -117,12 +108,16 @@ class PlexOAuth {
       code: this.pin.code,
     };
 
-    if (this.popup) {
-      this.popup.location.href = `https://app.plex.tv/auth/#!?${this.encodeData(
-        params
-      )}`;
+    if (!this.popup || this.popup.closed) {
+      throw new Error(
+        'Unable to open the Plex login window. Please allow popups for this site and try again.'
+      );
     }
 
+    this.popup.location.href = `https://app.plex.tv/auth/#!?${this.encodeData(
+      params
+    )}`;
+
     return this.pinPoll();
   }
 
@@ -145,7 +140,7 @@ class PlexOAuth {
           this.authToken = response.data.authToken as string;
           this.closePopup();
           resolve(this.authToken);
-        } else if (!response.data?.authToken && !this.popup?.closed) {
+        } else if (this.popup && !this.popup.closed) {
           setTimeout(executePoll, 1000, resolve, reject);
         } else {
           reject(new Error('Popup closed without completing login'));
@@ -173,7 +168,7 @@ class PlexOAuth {
     w: number;
     h: number;
   }): Window | void {
-    if (!window) {
+    if (typeof window === 'undefined') {
       throw new Error(
         'Window is undefined. Are you running this in the browser?'
       );