feat(component and api): adding emby connect authentication with local account linking

Updated authentication flow to handle local account linking

#943

server/api/jellyfin.ts

@@ -122,7 +122,7 @@ class JellyfinAPI extends ExternalAPI {
         },
       }
     );
-    this.deviceId = deviceId;
+    this.deviceId = deviceId ? deviceId : undefined;
   }
 
   public async login(
@@ -187,6 +187,15 @@ class JellyfinAPI extends ExternalAPI {
       if (e.cause.status === 401) {
         throw new ApiError(e.cause.status, ApiErrorCode.InvalidCredentials);
       }
+
+      logger.error(
+        'Something went wrong while authenticating with the Jellyfin server',
+        {
+          label: 'Jellyfin API',
+          error: e.cause.message ?? e.cause.statusText,
+          ip: ClientIP,
+        }
+      );
     }
 
     try {

server/routes/auth.ts

@@ -269,14 +269,9 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       select: { id: true, jellyfinDeviceId: true },
     });
 
-    let deviceId = '';
-    if (user) {
-      deviceId = user.jellyfinDeviceId ?? '';
-    } else {
-      deviceId = Buffer.from(`BOT_overseerr_${body.username ?? ''}`).toString(
-        'base64'
-      );
-    }
+    const deviceId =
+      user?.jellyfinDeviceId ??
+      Buffer.from(`BOT_overseerr_${body.username ?? ''}`).toString('base64');
 
     // First we need to attempt to log the user in to jellyfin
     const jellyfinserver = new JellyfinAPI(hostname ?? '', undefined, deviceId);
@@ -414,7 +409,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         serverType === ServerType.JELLYFIN ? UserType.JELLYFIN : UserType.EMBY;
 
       logger.info(
-        `Found matching ${serverType} user; updating user with ${userType}`,
+        `Found matching ${serverType} user; updating user with ${serverType}`,
         {
           label: 'API',
           ip: req.ip,

src/components/Login/JellyfinLogin.tsx

@@ -13,6 +13,7 @@ import * as Yup from 'yup';
 const messages = defineMessages('components.Login', {
   loginwithapp: 'Login with {appName}',
   username: 'Username',
+  email: 'Email Address',
   password: 'Password',
   validationusernamerequired: 'Username required',
   validationpasswordrequired: 'Password required',
@@ -138,7 +139,9 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                         id="username"
                         name="username"
                         type="text"
-                        placeholder={intl.formatMessage(messages.username)}
+                        placeholder={`${intl.formatMessage(
+                          messages.email
+                        )} / ${intl.formatMessage(messages.username)}`}
                         className="!bg-gray-700/80 placeholder:text-gray-400"
                       />
                     </div>