fix: unique plex oauth login client id (#147)

package.json

@@ -34,6 +34,7 @@
     "sharp": "^0.33.4",
     "stories-react": "^1.1.2",
     "three": "^0.166.1",
+    "uuid": "^10.0.0",
     "vanta": "^0.5.24",
     "xml2js": "^0.6.2",
     "zod": "^3.23.8"
@@ -49,6 +50,7 @@
     "@types/qs": "^6.9.15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@types/xml2js": "^0.4.14",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",

src/lib/auth.ts

@@ -1,15 +1,22 @@
 import { AuthOptions } from 'next-auth'
 import CredentialsProvider from 'next-auth/providers/credentials'
 import qs from 'qs'
+import { v4 as uuidv4 } from 'uuid'
 import { parseStringPromise } from 'xml2js'
 import {
   APP_URL,
   PLEX_API_ENDPOINT,
-  PLEX_CLIENT_IDENTIFIER,
-  PLEX_CLIENT_NAME,
+  PLEX_PRODUCT_NAME,
 } from '../utils/constants'
 import fetchTautulli from '../utils/fetchTautulli'
 
+function getClientIdentifier(): string {
+  const clientId = localStorage.getItem('plexClientId') || uuidv4()
+  localStorage.setItem('plexClientId', clientId)
+
+  return clientId
+}
+
 export const authOptions: AuthOptions = {
   providers: [
     CredentialsProvider({
@@ -109,18 +116,16 @@ type PlexPinResponse = {
 }
 
 async function fetchPlexPins(): Promise<PlexPinResponse> {
+  const clientIdentifier = getClientIdentifier()
+
   try {
-    const res = await fetch(`${PLEX_API_ENDPOINT}/pins`, {
+    const res = await fetch(`${PLEX_API_ENDPOINT}/pins?strong=true`, {
       method: 'POST',
       headers: {
         Accept: 'application/json',
-        'Content-Type': 'application/x-www-form-urlencoded',
+        'X-Plex-Product': PLEX_PRODUCT_NAME,
+        'X-Plex-Client-Identifier': clientIdentifier,
       },
-      body: new URLSearchParams({
-        strong: 'true',
-        'X-Plex-Product': PLEX_CLIENT_NAME,
-        'X-Plex-Client-Identifier': PLEX_CLIENT_IDENTIFIER,
-      }),
     })
 
     if (!res.ok) {
@@ -139,6 +144,7 @@ async function fetchPlexPins(): Promise<PlexPinResponse> {
 export async function createPlexAuthUrl() {
   const { id, code } = await fetchPlexPins()
   const forwardUrl = `${APP_URL}?plexPinId=${id}`
+  const clientIdentifier = getClientIdentifier()
 
   if (!forwardUrl) {
     console.error('Base url is not configured!')
@@ -147,12 +153,12 @@ export async function createPlexAuthUrl() {
   const authAppUrl =
     'https://app.plex.tv/auth#?' +
     qs.stringify({
-      clientID: PLEX_CLIENT_IDENTIFIER,
+      clientID: clientIdentifier,
       code,
       forwardUrl,
       context: {
         device: {
-          product: PLEX_CLIENT_NAME,
+          product: PLEX_PRODUCT_NAME,
         },
       },
     })
@@ -161,12 +167,14 @@ export async function createPlexAuthUrl() {
 }
 
 export async function getPlexAuthToken(pinId: string) {
+  const clientIdentifier = getClientIdentifier()
+
   try {
     const res = await fetch(`${PLEX_API_ENDPOINT}/pins/${pinId}`, {
       method: 'GET',
       headers: {
         Accept: 'application/json',
-        'X-Plex-Client-Identifier': PLEX_CLIENT_IDENTIFIER,
+        'X-Plex-Client-Identifier': clientIdentifier,
       },
     })
 
@@ -185,19 +193,17 @@ export async function getPlexAuthToken(pinId: string) {
 }
 
 export async function verifyPlexAuthToken(authToken: string) {
+  const clientIdentifier = getClientIdentifier()
+
   try {
-    const res = await fetch(`${PLEX_API_ENDPOINT}/user`, {
+    const res = await fetch(`${PLEX_API_ENDPOINT}/user?strong=true`, {
       method: 'POST',
       headers: {
         Accept: 'application/json',
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        strong: 'true',
-        'X-Plex-Product': PLEX_CLIENT_NAME,
-        'X-Plex-Client-Identifier': PLEX_CLIENT_IDENTIFIER,
         'X-Plex-Token': authToken,
-      }),
+        'X-Plex-Product': PLEX_PRODUCT_NAME,
+        'X-Plex-Client-Identifier': clientIdentifier,
+      },
     })
 
     if (!res.ok) {

src/utils/constants.ts

@@ -59,8 +59,7 @@ export const META_TITLE: string = 'Plex Rewind'
 export const META_TITLE_TEMPLATE: string = '%s | Plex Rewind'
 
 export const PLEX_API_ENDPOINT = 'https://plex.tv/api/v2'
-export const PLEX_CLIENT_NAME = 'Plex Rewind'
-export const PLEX_CLIENT_IDENTIFIER = 'plex-rewind'
+export const PLEX_PRODUCT_NAME = 'Plex Rewind'
 
 export const APP_URL = env('NEXT_PUBLIC_SITE_URL') || 'http://localhost:8383'