docs: change comma-separated lists to space-separated

Changed documentation for scopes and required claims lists to correctly reflect source code showing space-separated instead of comma-separated.

cypress/e2e/providers/tvdb.cy.ts

@@ -0,0 +1,148 @@
+describe('TVDB Integration', () => {
+  // Constants for routes and selectors
+  const ROUTES = {
+    home: '/',
+    metadataSettings: '/settings/metadata',
+    tomorrowIsOursTvShow: '/tv/72879',
+    monsterTvShow: '/tv/225634',
+    dragonnBallZKaiAnime: '/tv/61709',
+  };
+
+  const SELECTORS = {
+    sidebarToggle: '[data-testid=sidebar-toggle]',
+    sidebarSettingsMobile: '[data-testid=sidebar-menu-settings-mobile]',
+    settingsNavDesktop: 'nav[data-testid="settings-nav-desktop"]',
+    metadataTestButton: 'button[type="button"]:contains("Test")',
+    metadataSaveButton: '[data-testid="metadata-save-button"]',
+    tmdbStatus: '[data-testid="tmdb-status"]',
+    tvdbStatus: '[data-testid="tvdb-status"]',
+    tvMetadataProviderSelector: '[data-testid="tv-metadata-provider-selector"]',
+    animeMetadataProviderSelector:
+      '[data-testid="anime-metadata-provider-selector"]',
+    seasonSelector: '[data-testid="season-selector"]',
+    season1: 'Season 1',
+    season2: 'Season 2',
+    season3: 'Season 3',
+    episodeList: '[data-testid="episode-list"]',
+    episode9: '9 - Hang Men',
+  };
+
+  // Reusable commands
+  const navigateToMetadataSettings = () => {
+    cy.visit(ROUTES.home);
+    cy.get(SELECTORS.sidebarToggle).click();
+    cy.get(SELECTORS.sidebarSettingsMobile).click();
+    cy.get(
+      `${SELECTORS.settingsNavDesktop} a[href="${ROUTES.metadataSettings}"]`
+    ).click();
+  };
+
+  const testAndVerifyMetadataConnection = () => {
+    cy.intercept('POST', '/api/v1/settings/metadatas/test').as(
+      'testConnection'
+    );
+    cy.get(SELECTORS.metadataTestButton).click();
+    return cy.wait('@testConnection');
+  };
+
+  const saveMetadataSettings = (customBody = null) => {
+    if (customBody) {
+      cy.intercept('PUT', '/api/v1/settings/metadatas', (req) => {
+        req.body = customBody;
+      }).as('saveMetadata');
+    } else {
+      // Else just intercept without modifying body
+      cy.intercept('PUT', '/api/v1/settings/metadatas').as('saveMetadata');
+    }
+
+    cy.get(SELECTORS.metadataSaveButton).click();
+    return cy.wait('@saveMetadata');
+  };
+
+  beforeEach(() => {
+    // Perform login
+    cy.login(Cypress.env('ADMIN_EMAIL'), Cypress.env('ADMIN_PASSWORD'));
+
+    // Navigate to Metadata settings
+    navigateToMetadataSettings();
+
+    // Verify we're on the correct settings page
+    cy.contains('h3', 'Metadata Providers').should('be.visible');
+
+    // Configure TVDB as TV provider and test connection
+    cy.get(SELECTORS.tvMetadataProviderSelector).click();
+
+    // get id react-select-4-option-1
+    cy.get('[class*="react-select__option"]').contains('TheTVDB').click();
+
+    // Test the connection
+    testAndVerifyMetadataConnection().then(({ response }) => {
+      expect(response.statusCode).to.equal(200);
+      // Check TVDB connection status
+      cy.get(SELECTORS.tvdbStatus).should('contain', 'Operational');
+    });
+
+    // Save settings
+    saveMetadataSettings({
+      anime: 'tvdb',
+      tv: 'tvdb',
+    }).then(({ response }) => {
+      expect(response.statusCode).to.equal(200);
+      expect(response.body.tv).to.equal('tvdb');
+    });
+  });
+
+  it('should display "Tomorrow is Ours" show information with multiple seasons from TVDB', () => {
+    // Navigate to the TV show
+    cy.visit(ROUTES.tomorrowIsOursTvShow);
+
+    // Verify that multiple seasons are displayed (TMDB has only 1 season, TVDB has multiple)
+    // cy.get(SELECTORS.seasonSelector).should('exist');
+    cy.intercept('/api/v1/tv/225634/season/1').as('season1');
+    // Select Season 2 and verify it loads
+    cy.contains(SELECTORS.season2)
+      .should('be.visible')
+      .scrollIntoView()
+      .click();
+
+    // Verify that episodes are displayed for Season 2
+    cy.contains('260 - Episode 506').should('be.visible');
+  });
+
+  it('Should display "Monster" show information correctly when not existing on TVDB', () => {
+    // Navigate to the TV show
+    cy.visit(ROUTES.monsterTvShow);
+
+    // Intercept season 1 request
+    cy.intercept('/api/v1/tv/225634/season/1').as('season1');
+
+    // Select Season 1
+    cy.contains(SELECTORS.season1)
+      .should('be.visible')
+      .scrollIntoView()
+      .click();
+
+    // Wait for the season data to load
+    cy.wait('@season1');
+
+    // Verify specific episode exists
+    cy.contains(SELECTORS.episode9).should('be.visible');
+  });
+
+  it('should display "Dragon Ball Z Kai" show information with multiple only 2 seasons from TVDB', () => {
+    // Navigate to the TV show
+    cy.visit(ROUTES.dragonnBallZKaiAnime);
+
+    // Intercept season 1 request
+    cy.intercept('/api/v1/tv/61709/season/1').as('season1');
+
+    // Select Season 2 and verify it visible
+    cy.contains(SELECTORS.season2)
+      .should('be.visible')
+      .scrollIntoView()
+      .click();
+
+    // select season 3 and verify it not visible
+    cy.contains(SELECTORS.season3).should('not.exist');
+  });
+});

docs/using-jellyseerr/settings/users/index.md

@@ -22,6 +22,14 @@ When disabled, users will only be able to sign in using their email address. Use
 
 This setting is **enabled** by default.
 
+## Enable OpenID Connect Sign-In
+
+When enabled, users will be able to sign in to Jellyseerr using their OpenID Connect credentials, provided they have linked their OpenID Connect accounts. Once enabled, the [OpenID Connect settings](./oidc.md) can be accessed using the settings cog to the right of this option, and OpenID Connect providers can be configured.
+
+When disabled, users will only be able to sign in using their Jellyseerr username or email address. Users without a password set will not be able to sign in to Jellyseerr.
+
+This setting is **disabled** by default.
+
 ## Enable New Jellyfin/Emby/Plex Sign-In
 
 When enabled, users with access to your media server will be able to sign in to Jellyseerr even if they have not yet been imported. Users will be automatically assigned the permissions configured in the [Default Permissions](#default-permissions) setting upon first sign-in.

docs/using-jellyseerr/settings/users/oidc.md

@@ -0,0 +1,82 @@
+---
+title: OpenID Connect
+description: Configure OpenID Connect settings.
+sidebar_position: 2.5
+---
+
+# OpenID Connect
+
+Jellyseerr supports OpenID Connect (OIDC) for authentication and authorization. To begin setting up OpenID Connect, follow these steps:
+
+1. First, enable OpenID Connect [on the User settings page](./index.md#enable-openid-connect-sign-in).
+2. Once enabled, access OpenID Connect settings using the cog icon to the right.
+3. Add a new provider by clicking the "Add Provider" button.
+4. Configure the provider with the options described below.
+5. Link your OpenID Connect account to your Jellyseerr account using the "Link Account" button on the Linked Accounts page in your user's settings.
+6. Finally, you should be able to log in using your OpenID Connect account.
+
+## Configuration Options
+
+### Provider Name
+
+Name of the provider which appears on the login screen.
+
+Configuring this setting will automatically determine the [provider slug](#provider-slug), unless it is manually specified.
+
+### Logo
+
+The logo to display for the provider. Should be a URL or base64 encoded image.
+
+:::tip
+
+The search icon at the right of the logo field opens the [selfh.st/icons](https://selfh.st/icons) database. These icons include popular self-hosted OpenID Connect providers.
+
+:::
+
+### Issuer URL
+The base URL of the identity provider's OpenID Connect endpoint
+
+### Client ID
+
+The Client ID assigned to Jellyseerr
+
+### Client Secret
+
+The Client Secret assigned to Jellyseerr
+
+### Provider Slug
+
+Unique identifier for the provider
+
+### Scopes
+
+Space-separated list of scopes to request from the provider
+
+### Required Claims
+
+Space-separated list of boolean claims that are required to log in
+
+### Allow New Users
+
+Create accounts for new users logging in with this provider
+
+## Provider Guides
+
+### Keycloak
+
+To set up Keycloak, follow these steps:
+
+1. First, create a new client in Keycloak.
+  ![Keycloak Step 1](./assets/oidc_keycloak_1.png)
+
+1. Set the client ID to `jellyseerr`, and set the name to "Jellyseerr" (or whatever you prefer).
+  ![Keycloak Step 2](./assets/oidc_keycloak_2.png)
+
+1. Next, be sure to enable "Client authentication" in the capabilities section. The remaining defaults should be fine. 
+  ![Keycloak Step 3](./assets/oidc_keycloak_3.png)
+
+1. Finally, set the root url to your Jellyseerr instance's URL, and add the login page as a valid redirect URL.
+  ![Keycloak Step 4](./assets/oidc_keycloak_4.png)
+
+1. With all that set up, you should be able to configure Jellyseerr to use Keycloak for authentication. Be sure to copy the client secret from the credentials page, as shown above. The issuer URL can be obtained from the "Realm Settings" page, by copying the link titled "OpenID Endpoint Configuration".
+  ![Keycloak Step 5](./assets/oidc_keycloak_5.png)

jellyseerr-api.yml

@@ -254,6 +254,41 @@ components:
         enableSpecialEpisodes:
           type: boolean
           example: false
+    OidcProvider:
+      type: object
+      properties:
+        slug:
+          type: string
+          readOnly: true
+        name:
+          type: string
+        issuerUrl:
+          type: string
+        clientId:
+          type: string
+        clientSecret:
+          type: string
+        logo:
+          type: string
+        requiredClaims:
+          type: string
+        scopes:
+          type: string
+        newUserLogin:
+          type: boolean
+      required:
+        - slug
+        - name
+        - issuerUrl
+        - clientId
+        - clientSecret
+    OidcSettings:
+      type: object
+      properties:
+        providers:
+          type: array
+          items:
+            $ref: '#/components/schemas/OidcProvider'
     NetworkSettings:
       type: object
       properties:
@@ -519,6 +554,20 @@ components:
         serverID:
           type: string
           readOnly: true
+    MetadataSettings:
+      type: object
+      properties:
+        settings:
+          type: object
+          properties:
+            tv:
+              type: string
+              enum: [tvdb, tmdb]
+              example: 'tvdb'
+            anime:
+              type: string
+              enum: [tvdb, tmdb]
+              example: 'tvdb'
     TautulliSettings:
       type: object
       properties:
@@ -2198,6 +2247,64 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/MainSettings'
+  /settings/oidc:
+    get:
+      summary: Get OpenID Connect settings
+      description: Retrieves all OpenID Connect settings in a JSON object.
+      tags:
+        - settings
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OidcSettings'
+  /settings/oidc/{provider}:
+    put:
+      summary: Update OpenID Connect provider
+      description: Updates an existing OpenID Connect provider with the provided values.
+      tags:
+        - settings
+      parameters:
+        - in: path
+          name: provider
+          required: true
+          schema:
+            type: string
+          description: Provider slug
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/OidcProvider'
+      responses:
+        '200':
+          description: 'Radarr instance updated'
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RadarrSettings'
+    delete:
+      summary: Delete OpenID Connect provider
+      description: Deletes an existing OpenID Connect provider based on the provider slug parameter.
+      tags:
+        - settings
+      parameters:
+        - in: path
+          name: provider
+          required: true
+          schema:
+            type: string
+          description: Provider slug
+      responses:
+        '200':
+          description: 'OpenID Connect provider deleted'
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OidcSettings'
   /settings/network:
     get:
       summary: Get network settings
@@ -2568,6 +2675,67 @@ paths:
                       type: string
                     thumb:
                       type: string
+  /settings/metadatas:
+    get:
+      summary: Get Metadata settings
+      description: Retrieves current Metadata settings.
+      tags:
+        - settings
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MetadataSettings'
+    put:
+      summary: Update Metadata settings
+      description: Updates Metadata settings with the provided values.
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MetadataSettings'
+      responses:
+        '200':
+          description: 'Values were successfully updated'
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MetadataSettings'
+  /settings/metadatas/test:
+    post:
+      summary: Test Provider configuration
+      description: Tests if the TVDB configuration is valid. Returns a list of available languages on success.
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                tmdb:
+                  type: boolean
+                  example: true
+                tvdb:
+                  type: boolean
+                  example: true
+      responses:
+        '200':
+          description: Succesfully connected to TVDB
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    example: 'Successfully connected to TVDB'
   /settings/tautulli:
     get:
       summary: Get Tautulli settings
@@ -3930,6 +4098,81 @@ paths:
               required:
                 - email
                 - password
+  /auth/oidc/login/{slug}:
+    get:
+      security: []
+      summary: Redirect to the OpenID Connect provider
+      description: Constructs the redirect URL to the OpenID Connect provider, and redirects the user to it.
+      tags:
+        - auth
+      parameters:
+        - in: path
+          name: slug
+          required: true
+          schema:
+            type: string
+            example: 'authentik'
+      responses:
+        '200':
+          description: Authentication redirect url for the OpenID Connect provider
+          headers:
+            Set-Cookie:
+              schema:
+                type: string
+                example: 'oidc-state=123456789; HttpOnly; max-age=60000; Secure'
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  redirectUrl:
+                    type: string
+                    example: https://example.com/auth/oidc/callback?response_type=code&client_id=client_id&redirect_uri=https%3A%2F%2Fexample.com%2Fauth%2Foidc%2Fcallback&scope=openid%20email&state=state
+  /auth/oidc/callback/{slug}:
+    get:
+      security: []
+      summary: The callback endpoint for the OpenID Connect provider redirect
+      description: Takes the `code` and `state` parameters from the OpenID Connect provider, and exchanges them for a token.
+      x-allow-unknown-query-parameters: true
+      tags:
+        - auth
+      parameters:
+        - in: path
+          name: slug
+          required: true
+          schema:
+            type: string
+            example: 'authentik'
+        - in: query
+          name: code
+          required: true
+          schema:
+            type: string
+            example: '123456789'
+        - in: query
+          name: state
+          required: true
+          schema:
+            type: string
+            example: '123456789'
+        - in: cookie
+          name: oidc-state
+          required: true
+          schema:
+            type: string
+            example: '123456789'
+      responses:
+        '302':
+          description: A redirect to the home page if successful or back to the login page if not
+          headers:
+            Location:
+              schema:
+                type: string
+                example: /
+            Set-Cookie:
+              schema:
+                type: string
+                example: 'oidc-state=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
   /auth/logout:
     post:
       summary: Sign out and clear session cookie
@@ -4733,6 +4976,23 @@ paths:
       responses:
         '204':
           description: User password updated
+  /user/{userId}/settings/linked-accounts:
+    get:
+      summary: Lists the user's linked OpenID Connect accounts
+      description: Lists the user's linked OpenID Connect accounts
+      tags:
+        - users
+      parameters:
+        - in: path
+          name: userId
+          required: true
+          schema:
+            type: number
+      responses:
+        '200':
+          description: List of linked accounts
+        '403':
+          description: Invalid credentials
   /user/{userId}/settings/linked-accounts/plex:
     post:
       summary: Link the provided Plex account to the current user
@@ -4831,6 +5091,28 @@ paths:
           description: Unlink request invalid
         '404':
           description: User does not exist
+  /user/{userId}/settings/linked-accounts/{acctId}:
+    delete:
+      summary: Remove a linked account for a user
+      description: Removes the linked account with the given ID for a specific user. Requires `MANAGE_USERS` permission if editing other users.
+      tags:
+        - users
+      parameters:
+        - in: path
+          name: userId
+          required: true
+          schema:
+            type: number
+        - in: path
+          name: acctId
+          required: true
+          schema:
+            type: number
+      responses:
+        '204':
+          description: Unlinking account succeeded
+        '404':
+          description: User or linked account does not exist
   /user/{userId}/settings/notifications:
     get:
       summary: Get notification settings for a user
@@ -6472,7 +6754,7 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/TvDetails'
-  /tv/{tvId}/season/{seasonId}:
+  /tv/{tvId}/season/{seasonNumber}:
     get:
       summary: Get season details and episode list
       description: Returns season details with a list of episodes in a JSON object.
@@ -6486,11 +6768,11 @@ paths:
             type: number
             example: 76479
         - in: path
-          name: seasonId
+          name: seasonNumber
           required: true
           schema:
             type: number
-            example: 1
+            example: 123456
         - in: query
           name: language
           schema:

package.json

@@ -68,6 +68,7 @@
     "gravatar-url": "3.1.0",
     "http-proxy-agent": "^7.0.2",
     "https-proxy-agent": "^7.0.6",
+    "jwt-decode": "^4.0.0",
     "lodash": "4.17.21",
     "mime": "3",
     "next": "^14.2.25",

pnpm-lock.yaml

@@ -116,6 +116,9 @@ importers:
       https-proxy-agent:
         specifier: ^7.0.6
         version: 7.0.6
+      jwt-decode:
+        specifier: ^4.0.0
+        version: 4.0.0
       lodash:
         specifier: 4.17.21
         version: 4.17.21
@@ -6520,6 +6523,10 @@ packages:
   jws@4.0.0:
     resolution: {integrity: sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==}
 
+  jwt-decode@4.0.0:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
+    engines: {node: '>=18'}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -16093,7 +16100,7 @@ snapshots:
       debug: 4.4.0(supports-color@5.5.0)
       enhanced-resolve: 5.17.0
       eslint: 8.35.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.35.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.35.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.35.0))(eslint@8.35.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.35.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.35.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.54.0(eslint@8.35.0)(typescript@4.9.5))(eslint@8.35.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -16115,7 +16122,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.35.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.35.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.35.0))(eslint@8.35.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.35.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.35.0):
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
     optionalDependencies:
@@ -17814,6 +17821,8 @@ snapshots:
       jwa: 2.0.0
       safe-buffer: 5.2.1
 
+  jwt-decode@4.0.0: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1

public/images/openid.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="120"
+   height="120"
+   id="svg2593"
+   xml:space="preserve"
+   sodipodi:docname="OpenID_logo_2.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     showgrid="false"
+     inkscape:zoom="5.3731101"
+     inkscape:cx="69.60587"
+     inkscape:cy="65.883631"
+     inkscape:window-width="1512"
+     inkscape:window-height="945"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2593" /><defs
+     id="defs2596"><clipPath
+       id="clipPath2616"><path
+         d="M 0,14400 H 14400 V 0 H 0 Z"
+         id="path2618" /></clipPath></defs><g
+     transform="matrix(1.25,0,0,-1.25,-8601.6804,9121.1624)"
+     id="g2602"><g
+       transform="matrix(0.375,0,0,0.375,4301.4506,4557.5812)"
+       id="g2734"><g
+         id="g2726"><g
+           transform="translate(6998.0969,7259.1135)"
+           id="g2604"><path
+             d="M 0,0 V -159.939 -180 l 32,15.061 V 15.633 Z"
+             id="path2606"
+             style="fill:#f8931e;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g><g
+           transform="translate(7108.9192,7206.3137)"
+           id="g2608"><path
+             d="M 0,0 4.417,-45.864 -57.466,-32.4"
+             id="path2610"
+             style="fill:#b3b3b3;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g><g
+           transform="translate(6934.0969,7147.6213)"
+           id="g2620"><path
+             d="M 0,0 C 0,22.674 24.707,41.769 58.383,47.598 V 67.923 C 6.873,61.697 -32,33.656 -32,0 -32,-34.869 9.725,-63.709 64,-68.508 v 20.061 C 27.484,-43.869 0,-23.919 0,0 M 101.617,67.915 V 47.598 c 13.399,-2.319 25.385,-6.727 34.951,-12.64 l 22.627,13.984 c -15.42,9.531 -35.322,16.283 -57.578,18.973"
+             id="path2622"
+             style="fill:#b3b3b3;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g></g></g></g></svg>

server/api/externalapi.ts

@@ -10,7 +10,7 @@ const DEFAULT_TTL = 300;
 // 10 seconds default rolling buffer (in ms)
 const DEFAULT_ROLLING_BUFFER = 10000;
 
-interface ExternalAPIOptions {
+export interface ExternalAPIOptions {
   nodeCache?: NodeCache;
   headers?: Record<string, unknown>;
   rateLimit?: {

server/api/metadata.ts

@@ -0,0 +1,39 @@
+import type { TvShowProvider } from '@server/api/provider';
+import TheMovieDb from '@server/api/themoviedb';
+import Tvdb from '@server/api/tvdb';
+import { getSettings, MetadataProviderType } from '@server/lib/settings';
+import logger from '@server/logger';
+
+export const getMetadataProvider = async (
+  mediaType: 'movie' | 'tv' | 'anime'
+): Promise<TvShowProvider> => {
+  try {
+    const settings = await getSettings();
+
+    if (mediaType == 'movie') {
+      return new TheMovieDb();
+    }
+
+    if (
+      mediaType == 'tv' &&
+      settings.metadataSettings.tv == MetadataProviderType.TVDB
+    ) {
+      return await Tvdb.getInstance();
+    }
+
+    if (
+      mediaType == 'anime' &&
+      settings.metadataSettings.anime == MetadataProviderType.TVDB
+    ) {
+      return await Tvdb.getInstance();
+    }
+
+    return new TheMovieDb();
+  } catch (e) {
+    logger.error('Failed to get metadata provider', {
+      label: 'Metadata',
+      message: e.message,
+    });
+    return new TheMovieDb();
+  }
+};

server/api/provider.ts

@@ -0,0 +1,30 @@
+import type {
+  TmdbSeasonWithEpisodes,
+  TmdbTvDetails,
+} from '@server/api/themoviedb/interfaces';
+
+export interface TvShowProvider {
+  getTvShow({
+    tvId,
+    language,
+  }: {
+    tvId: number;
+    language?: string;
+  }): Promise<TmdbTvDetails>;
+  getTvSeason({
+    tvId,
+    seasonNumber,
+    language,
+  }: {
+    tvId: number;
+    seasonNumber: number;
+    language?: string;
+  }): Promise<TmdbSeasonWithEpisodes>;
+  getShowByTvdbId({
+    tvdbId,
+    language,
+  }: {
+    tvdbId: number;
+    language?: string;
+  }): Promise<TmdbTvDetails>;
+}

server/api/themoviedb/index.ts

@@ -1,4 +1,5 @@
 import ExternalAPI from '@server/api/externalapi';
+import type { TvShowProvider } from '@server/api/provider';
 import cacheManager from '@server/lib/cache';
 import { getSettings } from '@server/lib/settings';
 import { sortBy } from 'lodash';
@@ -120,7 +121,7 @@ interface DiscoverTvOptions {
   certificationCountry?: string;
 }
 
-class TheMovieDb extends ExternalAPI {
+class TheMovieDb extends ExternalAPI implements TvShowProvider {
   private locale: string;
   private discoverRegion?: string;
   private originalLanguage?: string;
@@ -341,6 +342,13 @@ class TheMovieDb extends ExternalAPI {
         }
       );
 
+      data.episodes = data.episodes.map((episode) => {
+        if (episode.still_path) {
+          episode.still_path = `https://image.tmdb.org/t/p/original/${episode.still_path}`;
+        }
+        return episode;
+      });
+
       return data;
     } catch (e) {
       throw new Error(`[TMDB] Failed to fetch TV show details: ${e.message}`);

server/api/themoviedb/interfaces.ts

@@ -220,7 +220,7 @@ export interface TmdbTvEpisodeResult {
   show_id: number;
   still_path: string;
   vote_average: number;
-  vote_cuont: number;
+  vote_count: number;
 }
 
 export interface TmdbTvSeasonResult {

server/api/tvdb/index.ts

@@ -0,0 +1,563 @@
+import ExternalAPI from '@server/api/externalapi';
+import type { TvShowProvider } from '@server/api/provider';
+import TheMovieDb from '@server/api/themoviedb';
+import type {
+  TmdbSeasonWithEpisodes,
+  TmdbTvDetails,
+  TmdbTvEpisodeResult,
+  TmdbTvSeasonResult,
+} from '@server/api/themoviedb/interfaces';
+import {
+  convertTmdbLanguageToTvdbWithFallback,
+  type TvdbBaseResponse,
+  type TvdbEpisode,
+  type TvdbLoginResponse,
+  type TvdbSeasonDetails,
+  type TvdbTvDetails,
+} from '@server/api/tvdb/interfaces';
+import cacheManager, { type AvailableCacheIds } from '@server/lib/cache';
+import logger from '@server/logger';
+
+interface TvdbConfig {
+  baseUrl: string;
+  maxRequestsPerSecond: number;
+  maxRequests: number;
+  cachePrefix: AvailableCacheIds;
+}
+
+const DEFAULT_CONFIG: TvdbConfig = {
+  baseUrl: 'https://api4.thetvdb.com/v4',
+  maxRequestsPerSecond: 50,
+  maxRequests: 20,
+  cachePrefix: 'tvdb' as const,
+};
+
+const enum TvdbIdStatus {
+  INVALID = -1,
+}
+
+type TvdbId = number;
+type ValidTvdbId = Exclude<TvdbId, TvdbIdStatus.INVALID>;
+
+class Tvdb extends ExternalAPI implements TvShowProvider {
+  static instance: Tvdb;
+  private readonly tmdb: TheMovieDb;
+  private static readonly DEFAULT_CACHE_TTL = 43200;
+  private static readonly DEFAULT_LANGUAGE = 'eng';
+  private token: string;
+  private pin?: string;
+
+  constructor(pin?: string) {
+    const finalConfig = { ...DEFAULT_CONFIG };
+    super(
+      finalConfig.baseUrl,
+      {},
+      {
+        nodeCache: cacheManager.getCache(finalConfig.cachePrefix).data,
+        rateLimit: {
+          maxRequests: finalConfig.maxRequests,
+          maxRPS: finalConfig.maxRequestsPerSecond,
+        },
+      }
+    );
+    this.pin = pin;
+    this.tmdb = new TheMovieDb();
+  }
+
+  public static async getInstance(): Promise<Tvdb> {
+    if (!this.instance) {
+      this.instance = new Tvdb();
+      await this.instance.login();
+    }
+
+    return this.instance;
+  }
+
+  private async refreshToken(): Promise<void> {
+    try {
+      if (!this.token) {
+        await this.login();
+        return;
+      }
+
+      const base64Url = this.token.split('.')[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+      const payload = JSON.parse(Buffer.from(base64, 'base64').toString());
+
+      if (!payload.exp) {
+        await this.login();
+      }
+
+      const now = Math.floor(Date.now() / 1000);
+      const diff = payload.exp - now;
+
+      // refresh token 1 week before expiration
+      if (diff < 604800) {
+        await this.login();
+      }
+    } catch (error) {
+      this.handleError('Failed to refresh token', error);
+    }
+  }
+
+  public async test(): Promise<void> {
+    try {
+      await this.login();
+    } catch (error) {
+      this.handleError('Login failed', error);
+      throw error;
+    }
+  }
+
+  async login(): Promise<TvdbLoginResponse> {
+    let body: { apiKey: string; pin?: string } = {
+      apiKey: 'd00d9ecb-a9d0-4860-958a-74b14a041405',
+    };
+
+    if (this.pin) {
+      body = {
+        ...body,
+        pin: this.pin,
+      };
+    }
+
+    const response = await this.post<TvdbBaseResponse<TvdbLoginResponse>>(
+      '/login',
+      {
+        ...body,
+      }
+    );
+
+    this.token = response.data.token;
+
+    return response.data;
+  }
+
+  public async getShowByTvdbId({
+    tvdbId,
+    language,
+  }: {
+    tvdbId: number;
+    language?: string;
+  }): Promise<TmdbTvDetails> {
+    try {
+      const tmdbTvShow = await this.tmdb.getShowByTvdbId({
+        tvdbId: tvdbId,
+        language,
+      });
+
+      try {
+        await this.refreshToken();
+
+        const validTvdbId = this.getTvdbIdFromTmdb(tmdbTvShow);
+
+        if (this.isValidTvdbId(validTvdbId)) {
+          return this.enrichTmdbShowWithTvdbData(tmdbTvShow, validTvdbId);
+        }
+
+        return tmdbTvShow;
+      } catch (error) {
+        return tmdbTvShow;
+      }
+    } catch (error) {
+      this.handleError('Failed to fetch TV show details', error);
+      throw error;
+    }
+  }
+
+  public async getTvShow({
+    tvId,
+    language,
+  }: {
+    tvId: number;
+    language?: string;
+  }): Promise<TmdbTvDetails> {
+    try {
+      const tmdbTvShow = await this.tmdb.getTvShow({ tvId, language });
+
+      try {
+        await this.refreshToken();
+
+        const tvdbId = this.getTvdbIdFromTmdb(tmdbTvShow);
+
+        if (this.isValidTvdbId(tvdbId)) {
+          return await this.enrichTmdbShowWithTvdbData(tmdbTvShow, tvdbId);
+        }
+
+        return tmdbTvShow;
+      } catch (error) {
+        this.handleError('Failed to fetch TV show details', error);
+        return tmdbTvShow;
+      }
+    } catch (error) {
+      this.handleError('Failed to fetch TV show details', error);
+      return this.tmdb.getTvShow({ tvId, language });
+    }
+  }
+
+  public async getTvSeason({
+    tvId,
+    seasonNumber,
+    language = Tvdb.DEFAULT_LANGUAGE,
+  }: {
+    tvId: number;
+    seasonNumber: number;
+    language?: string;
+  }): Promise<TmdbSeasonWithEpisodes> {
+    try {
+      const tmdbTvShow = await this.tmdb.getTvShow({ tvId, language });
+
+      try {
+        await this.refreshToken();
+
+        const tvdbId = this.getTvdbIdFromTmdb(tmdbTvShow);
+
+        if (!this.isValidTvdbId(tvdbId)) {
+          return await this.tmdb.getTvSeason({ tvId, seasonNumber, language });
+        }
+
+        return await this.getTvdbSeasonData(
+          tvdbId,
+          seasonNumber,
+          tvId,
+          language
+        );
+      } catch (error) {
+        this.handleError('Failed to fetch TV season details', error);
+        return await this.tmdb.getTvSeason({ tvId, seasonNumber, language });
+      }
+    } catch (error) {
+      logger.error(
+        `[TVDB] Failed to fetch TV season details: ${error.message}`
+      );
+      throw error;
+    }
+  }
+
+  private async enrichTmdbShowWithTvdbData(
+    tmdbTvShow: TmdbTvDetails,
+    tvdbId: ValidTvdbId
+  ): Promise<TmdbTvDetails> {
+    try {
+      await this.refreshToken();
+
+      const tvdbData = await this.fetchTvdbShowData(tvdbId);
+      const seasons = this.processSeasons(tvdbData);
+
+      if (!seasons.length) {
+        return tmdbTvShow;
+      }
+
+      return { ...tmdbTvShow, seasons };
+    } catch (error) {
+      logger.error(
+        `Failed to enrich TMDB show with TVDB data: ${error.message} token: ${this.token}`
+      );
+      return tmdbTvShow;
+    }
+  }
+
+  private async fetchTvdbShowData(tvdbId: number): Promise<TvdbTvDetails> {
+    const resp = await this.get<TvdbBaseResponse<TvdbTvDetails>>(
+      `/series/${tvdbId}/extended?meta=episodes&short=true`,
+      {
+        headers: {
+          Authorization: `Bearer ${this.token}`,
+        },
+      },
+      Tvdb.DEFAULT_CACHE_TTL
+    );
+
+    return resp.data;
+  }
+
+  private processSeasons(tvdbData: TvdbTvDetails): TmdbTvSeasonResult[] {
+    if (!tvdbData || !tvdbData.seasons || !tvdbData.episodes) {
+      return [];
+    }
+
+    const seasons = tvdbData.seasons
+      .filter((season) => season.type && season.type.type === 'official')
+      .sort((a, b) => a.number - b.number)
+      .map((season) => this.createSeasonData(season, tvdbData))
+      .filter(
+        (season) => season && season.season_number >= 0
+      ) as TmdbTvSeasonResult[];
+
+    return seasons;
+  }
+
+  private createSeasonData(
+    season: TvdbSeasonDetails,
+    tvdbData: TvdbTvDetails
+  ): TmdbTvSeasonResult {
+    const seasonNumber = season.number ?? -1;
+    if (seasonNumber < 0) {
+      return {
+        id: 0,
+        episode_count: 0,
+        name: '',
+        overview: '',
+        season_number: -1,
+        poster_path: '',
+        air_date: '',
+      };
+    }
+
+    const episodeCount = tvdbData.episodes.filter(
+      (episode) => episode.seasonNumber === season.number
+    ).length;
+
+    return {
+      id: tvdbData.id,
+      episode_count: episodeCount,
+      name: `${season.number}`,
+      overview: '',
+      season_number: season.number,
+      poster_path: '',
+      air_date: '',
+    };
+  }
+
+  private async getTvdbSeasonData(
+    tvdbId: number,
+    seasonNumber: number,
+    tvId: number,
+    language: string = Tvdb.DEFAULT_LANGUAGE
+  ): Promise<TmdbSeasonWithEpisodes> {
+    const tvdbData = await this.fetchTvdbShowData(tvdbId);
+
+    if (!tvdbData) {
+      logger.error(`Failed to fetch TVDB data for ID: ${tvdbId}`);
+      return this.createEmptySeasonResponse(tvId);
+    }
+
+    // get season id
+    const season = tvdbData.seasons.find(
+      (season) =>
+        season.number === seasonNumber &&
+        season.type.type &&
+        season.type.type === 'official'
+    );
+
+    if (!season) {
+      logger.error(
+        `Failed to find season ${seasonNumber} for TVDB ID: ${tvdbId}`
+      );
+      return this.createEmptySeasonResponse(tvId);
+    }
+
+    const wantedTranslation = convertTmdbLanguageToTvdbWithFallback(
+      language,
+      Tvdb.DEFAULT_LANGUAGE
+    );
+
+    // check if translation is available for the season
+    const availableTranslation = season.nameTranslations.filter(
+      (translation) =>
+        translation === wantedTranslation ||
+        translation === Tvdb.DEFAULT_LANGUAGE
+    );
+
+    if (!availableTranslation) {
+      return this.getSeasonWithOriginalLanguage(
+        tvdbId,
+        tvId,
+        seasonNumber,
+        season
+      );
+    }
+
+    return this.getSeasonWithTranslation(
+      tvdbId,
+      tvId,
+      seasonNumber,
+      season,
+      wantedTranslation
+    );
+  }
+
+  private async getSeasonWithTranslation(
+    tvdbId: number,
+    tvId: number,
+    seasonNumber: number,
+    season: TvdbSeasonDetails,
+    language: string
+  ): Promise<TmdbSeasonWithEpisodes> {
+    if (!season) {
+      logger.error(
+        `Failed to find season ${seasonNumber} for TVDB ID: ${tvdbId}`
+      );
+      return this.createEmptySeasonResponse(tvId);
+    }
+
+    const allEpisodes = [] as TvdbEpisode[];
+    let page = 0;
+    // Limit to max 50 pages to avoid infinite loops.
+    // 50 pages with 500 items per page = 25_000 episodes in a series which should be more than enough
+    const maxPages = 50;
+
+    while (page < maxPages) {
+      const resp = await this.get<TvdbBaseResponse<TvdbSeasonDetails>>(
+        `/series/${tvdbId}/episodes/default/${language}`,
+        {
+          headers: {
+            Authorization: `Bearer ${this.token}`,
+          },
+          params: {
+            page: page,
+          },
+        }
+      );
+
+      if (!resp?.data?.episodes) {
+        logger.warn(
+          `No episodes found for TVDB ID: ${tvdbId} on page ${page} for season ${seasonNumber}`
+        );
+        break;
+      }
+
+      const { episodes } = resp.data;
+
+      if (!episodes) {
+        logger.debug(
+          `No more episodes found for TVDB ID: ${tvdbId} on page ${page} for season ${seasonNumber}`
+        );
+        break;
+      }
+
+      allEpisodes.push(...episodes);
+
+      const hasNextPage = resp.links?.next && episodes.length > 0;
+
+      if (!hasNextPage) {
+        break;
+      }
+
+      page++;
+    }
+
+    if (page >= maxPages) {
+      logger.warn(
+        `Reached max pages (${maxPages}) for TVDB ID: ${tvdbId} on season ${seasonNumber} with language ${language}. There might be more episodes available.`
+      );
+    }
+
+    const episodes = this.processEpisodes(
+      { ...season, episodes: allEpisodes },
+      seasonNumber,
+      tvId
+    );
+
+    return {
+      episodes,
+      external_ids: { tvdb_id: tvdbId },
+      name: '',
+      overview: '',
+      id: season.id,
+      air_date: season.firstAired,
+      season_number: episodes.length,
+    };
+  }
+
+  private async getSeasonWithOriginalLanguage(
+    tvdbId: number,
+    tvId: number,
+    seasonNumber: number,
+    season: TvdbSeasonDetails
+  ): Promise<TmdbSeasonWithEpisodes> {
+    if (!season) {
+      logger.error(
+        `Failed to find season ${seasonNumber} for TVDB ID: ${tvdbId}`
+      );
+      return this.createEmptySeasonResponse(tvId);
+    }
+
+    const resp = await this.get<TvdbBaseResponse<TvdbSeasonDetails>>(
+      `/seasons/${season.id}/extended`,
+      {
+        headers: {
+          Authorization: `Bearer ${this.token}`,
+        },
+      }
+    );
+
+    const seasons = resp.data;
+
+    const episodes = this.processEpisodes(seasons, seasonNumber, tvId);
+
+    return {
+      episodes,
+      external_ids: { tvdb_id: tvdbId },
+      name: '',
+      overview: '',
+      id: seasons.id,
+      air_date: seasons.firstAired,
+      season_number: episodes.length,
+    };
+  }
+
+  private processEpisodes(
+    tvdbSeason: TvdbSeasonDetails,
+    seasonNumber: number,
+    tvId: number
+  ): TmdbTvEpisodeResult[] {
+    if (!tvdbSeason || !tvdbSeason.episodes) {
+      logger.error('No episodes found in TVDB season data');
+      return [];
+    }
+
+    return tvdbSeason.episodes
+      .filter((episode) => episode.seasonNumber === seasonNumber)
+      .map((episode, index) => this.createEpisodeData(episode, index, tvId));
+  }
+
+  private createEpisodeData(
+    episode: TvdbEpisode,
+    index: number,
+    tvId: number
+  ): TmdbTvEpisodeResult {
+    return {
+      id: episode.id,
+      air_date: episode.aired,
+      episode_number: episode.number,
+      name: episode.name || `Episode ${index + 1}`,
+      overview: episode.overview || '',
+      season_number: episode.seasonNumber,
+      production_code: '',
+      show_id: tvId,
+      still_path:
+        episode.image && !episode.image.startsWith('https://')
+          ? 'https://artworks.thetvdb.com' + episode.image
+          : '',
+      vote_average: 1,
+      vote_count: 1,
+    };
+  }
+
+  private createEmptySeasonResponse(tvId: number): TmdbSeasonWithEpisodes {
+    return {
+      episodes: [],
+      external_ids: { tvdb_id: tvId },
+      name: '',
+      overview: '',
+      id: 0,
+      air_date: '',
+      season_number: 0,
+    };
+  }
+
+  private getTvdbIdFromTmdb(tmdbTvShow: TmdbTvDetails): TvdbId {
+    return tmdbTvShow?.external_ids?.tvdb_id ?? TvdbIdStatus.INVALID;
+  }
+
+  private isValidTvdbId(tvdbId: TvdbId): tvdbId is ValidTvdbId {
+    return tvdbId !== TvdbIdStatus.INVALID;
+  }
+
+  private handleError(context: string, error: Error): void {
+    throw new Error(`[TVDB] ${context}: ${error.message}`);
+  }
+}
+
+export default Tvdb;

server/api/tvdb/interfaces.ts

@@ -0,0 +1,216 @@
+import { type AvailableLocale } from '@server/types/languages';
+
+export interface TvdbBaseResponse<T> {
+  data: T;
+  errors: string;
+  links?: TvdbPagination;
+}
+
+export interface TvdbPagination {
+  prev?: string;
+  self: string;
+  next?: string;
+  totalItems: number;
+  pageSize: number;
+}
+
+export interface TvdbLoginResponse {
+  token: string;
+}
+
+interface TvDetailsAliases {
+  language: string;
+  name: string;
+}
+
+interface TvDetailsStatus {
+  id: number;
+  name: string;
+  recordType: string;
+  keepUpdated: boolean;
+}
+
+export interface TvdbTvDetails {
+  id: number;
+  name: string;
+  slug: string;
+  image: string;
+  nameTranslations: string[];
+  overwiewTranslations: string[];
+  aliases: TvDetailsAliases[];
+  firstAired: Date;
+  lastAired: Date;
+  nextAired: Date | string;
+  score: number;
+  status: TvDetailsStatus;
+  originalCountry: string;
+  originalLanguage: string;
+  defaultSeasonType: string;
+  isOrderRandomized: boolean;
+  lastUpdated: Date;
+  averageRuntime: number;
+  seasons: TvdbSeasonDetails[];
+  episodes: TvdbEpisode[];
+}
+
+interface TvdbCompanyType {
+  companyTypeId: number;
+  companyTypeName: string;
+}
+
+interface TvdbParentCompany {
+  id?: number;
+  name?: string;
+  relation?: {
+    id?: number;
+    typeName?: string;
+  };
+}
+
+interface TvdbCompany {
+  id: number;
+  name: string;
+  slug: string;
+  nameTranslations?: string[];
+  overviewTranslations?: string[];
+  aliases?: string[];
+  country: string;
+  primaryCompanyType: number;
+  activeDate: string;
+  inactiveDate?: string;
+  companyType: TvdbCompanyType;
+  parentCompany: TvdbParentCompany;
+  tagOptions?: string[];
+}
+
+interface TvdbType {
+  id: number;
+  name: string;
+  type: string;
+  alternateName?: string;
+}
+
+interface TvdbArtwork {
+  id: number;
+  image: string;
+  thumbnail: string;
+  language: string;
+  type: number;
+  score: number;
+  width: number;
+  height: number;
+  includesText: boolean;
+}
+
+export interface TvdbEpisode {
+  id: number;
+  seriesId: number;
+  name: string;
+  aired: string;
+  runtime: number;
+  nameTranslations: string[];
+  overview?: string;
+  overviewTranslations: string[];
+  image: string;
+  imageType: number;
+  isMovie: number;
+  seasons?: string[];
+  number: number;
+  absoluteNumber: number;
+  seasonNumber: number;
+  lastUpdated: string;
+  finaleType?: string;
+  year: string;
+}
+
+export interface TvdbSeasonDetails {
+  id: number;
+  seriesId: number;
+  type: TvdbType;
+  number: number;
+  nameTranslations: string[];
+  overviewTranslations: string[];
+  image: string;
+  imageType: number;
+  companies: {
+    studio: TvdbCompany[];
+    network: TvdbCompany[];
+    production: TvdbCompany[];
+    distributor: TvdbCompany[];
+    special_effects: TvdbCompany[];
+  };
+  lastUpdated: string;
+  year: string;
+  episodes: TvdbEpisode[];
+  trailers: string[];
+  artwork: TvdbArtwork[];
+  tagOptions?: string[];
+  firstAired: string;
+}
+
+export interface TvdbEpisodeTranslation {
+  name: string;
+  overview: string;
+  language: string;
+}
+
+const TMDB_TO_TVDB_MAPPING: Record<string, string> & {
+  [key in AvailableLocale]: string;
+} = {
+  ar: 'ara', // Arabic
+  bg: 'bul', // Bulgarian
+  ca: 'cat', // Catalan
+  cs: 'ces', // Czech
+  da: 'dan', // Danish
+  de: 'deu', // German
+  el: 'ell', // Greek
+  en: 'eng', // English
+  es: 'spa', // Spanish
+  fi: 'fin', // Finnish
+  fr: 'fra', // French
+  he: 'heb', // Hebrew
+  hi: 'hin', // Hindi
+  hr: 'hrv', // Croatian
+  hu: 'hun', // Hungarian
+  it: 'ita', // Italian
+  ja: 'jpn', // Japanese
+  ko: 'kor', // Korean
+  lt: 'lit', // Lithuanian
+  nl: 'nld', // Dutch
+  pl: 'pol', // Polish
+  ro: 'ron', // Romanian
+  ru: 'rus', // Russian
+  sq: 'sqi', // Albanian
+  sr: 'srp', // Serbian
+  sv: 'swe', // Swedish
+  tr: 'tur', // Turkish
+  uk: 'ukr', // Ukrainian
+
+  'es-MX': 'spa', // Spanish (Latin America) -> Spanish
+  'nb-NO': 'nor', // Norwegian Bokmål -> Norwegian
+  'pt-BR': 'pt', // Portuguese (Brazil) -> Portuguese - Brazil (from TVDB data)
+  'pt-PT': 'por', // Portuguese (Portugal) -> Portuguese - Portugal (from TVDB data)
+  'zh-CN': 'zho', // Chinese (Simplified) -> Chinese - China
+  'zh-TW': 'zhtw', // Chinese (Traditional) -> Chinese - Taiwan
+};
+
+export function convertTMDBToTVDB(tmdbCode: string): string | null {
+  const normalizedCode = tmdbCode.toLowerCase();
+
+  return (
+    TMDB_TO_TVDB_MAPPING[tmdbCode] ||
+    TMDB_TO_TVDB_MAPPING[normalizedCode] ||
+    null
+  );
+}
+
+export function convertTmdbLanguageToTvdbWithFallback(
+  tmdbCode: string,
+  fallback: string
+): string {
+  // First try exact match
+  const tvdbCode = convertTMDBToTVDB(tmdbCode);
+  if (tvdbCode) return tvdbCode;
+
+  return tvdbCode || fallback || 'eng'; // Default to English if no match found
+}

server/entity/LinkedAccount.ts

@@ -0,0 +1,27 @@
+import { Column, Entity, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
+import { User } from './User';
+
+@Entity('linked_accounts')
+export class LinkedAccount {
+  constructor(options: Omit<LinkedAccount, 'id'>) {
+    Object.assign(this, options);
+  }
+
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @ManyToOne(() => User, (user) => user.linkedAccounts, { onDelete: 'CASCADE' })
+  user: User;
+
+  /** Slug of the OIDC provider. */
+  @Column({ type: 'varchar', length: 255 })
+  provider: string;
+
+  /** Unique ID from the OAuth provider */
+  @Column({ type: 'varchar', length: 255 })
+  sub: string;
+
+  /** Account username from the OAuth provider */
+  @Column()
+  username: string;
+}

server/entity/User.ts

@@ -1,6 +1,7 @@
 import { MediaRequestStatus, MediaType } from '@server/constants/media';
 import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
+import { LinkedAccount } from '@server/entity/LinkedAccount';
 import { Watchlist } from '@server/entity/Watchlist';
 import type { QuotaResponse } from '@server/interfaces/api/userInterfaces';
 import PreparedEmail from '@server/lib/email';
@@ -91,6 +92,9 @@ export class User {
   @Column({ type: 'varchar', nullable: true, select: false })
   public plexToken?: string | null;
 
+  @OneToMany(() => LinkedAccount, (link) => link.user)
+  public linkedAccounts: LinkedAccount[];
+
   @Column({ type: 'integer', default: 0 })
   public permissions = 0;
 

server/interfaces/api/oidcInterfaces.ts

@@ -0,0 +1,239 @@
+/**
+ * @internal
+ */
+type Mandatory<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+
+/**
+ * Standard OpenID Connect discovery document.
+ *
+ * @public
+ * @see https://openid.net/specs/openid-connect-discovery-1_0.html#ProviderMetadata
+ */
+export interface OidcProviderMetadata {
+  issuer: string; // REQUIRED
+
+  authorization_endpoint: string; // REQUIRED
+
+  token_endpoint: string; // REQUIRED
+
+  token_endpoint_auth_methods_supported?: string[]; // OPTIONAL
+
+  token_endpoint_auth_signing_alg_values_supported?: string[]; // OPTIONAL
+
+  userinfo_endpoint: string; // RECOMMENDED
+
+  check_session_iframe: string; // REQUIRED
+
+  end_session_endpoint: string; // REQUIRED
+
+  jwks_uri: string; // REQUIRED
+
+  registration_endpoint: string; // RECOMMENDED
+
+  scopes_supported: string[]; // RECOMMENDED
+
+  response_types_supported: string[]; // REQUIRED
+
+  acr_values_supported?: string[]; // OPTIONAL
+
+  subject_types_supported: string[]; // REQUIRED
+
+  request_object_signing_alg_values_supported?: string[]; // OPTIONAL
+
+  display_values_supported?: string[]; // OPTIONAL
+
+  claim_types_supported?: string[]; // OPTIONAL
+
+  claims_supported: string[]; // RECOMMENDED
+
+  claims_parameter_supported?: boolean; // OPTIONAL
+
+  service_documentation?: string; // OPTIONAL
+
+  ui_locales_supported?: string[]; // OPTIONAL
+
+  revocation_endpoint: string; // REQUIRED
+
+  introspection_endpoint: string; // REQUIRED
+
+  frontchannel_logout_supported?: boolean; // OPTIONAL
+
+  frontchannel_logout_session_supported?: boolean; // OPTIONAL
+
+  backchannel_logout_supported?: boolean; // OPTIONAL
+
+  backchannel_logout_session_supported?: boolean; // OPTIONAL
+
+  grant_types_supported?: string[]; // OPTIONAL
+
+  response_modes_supported?: string[]; // OPTIONAL
+
+  code_challenge_methods_supported?: string[]; // OPTIONAL
+}
+
+/**
+ * Standard OpenID Connect address claim.
+ * The Address Claim represents a physical mailing address.
+ *
+ * @public
+ * @see https://openid.net/specs/openid-connect-core-1_0.html#AddressClaim
+ */
+export interface OidcAddressClaim {
+  /** Full mailing address, formatted for display or use on a mailing label. This field MAY contain multiple lines, separated by newlines. Newlines can be represented either as a carriage return/line feed pair ("\\r\\n") or as a single line feed character ("\\n"). */
+  formatted?: string;
+  /** Full street address component, which MAY include house number, street name, Post Office Box, and multi-line extended street address information. This field MAY contain multiple lines, separated by newlines. Newlines can be represented either as a carriage return/line feed pair ("\\r\\n") or as a single line feed character ("\\n"). */
+  street_address?: string;
+  /** City or locality component. */
+  locality?: string;
+  /** State, province, prefecture, or region component. */
+  region?: string;
+  /** Zip code or postal code component. */
+  postal_code?: string;
+  /** Country name component. */
+  country?: string;
+}
+
+/**
+ * Standard OpenID Connect claims.
+ * They can be requested to be returned either in the UserInfo Response or in the ID Token.
+ *
+ * @public
+ * @see https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims
+ */
+export interface OidcStandardClaims {
+  /** Subject - Identifier for the End-User at the Issuer. */
+  sub?: string;
+  /** End-User's full name in displayable form including all name parts, possibly including titles and suffixes, ordered according to the End-User's locale and preferences. */
+  name?: string;
+  /** Given name(s) or first name(s) of the End-User. Note that in some cultures, people can have multiple given names; all can be present, with the names being separated by space characters. */
+  given_name?: string;
+  /** Surname(s) or last name(s) of the End-User. Note that in some cultures, people can have multiple family names or no family name; all can be present, with the names being separated by space characters. */
+  family_name?: string;
+  /** Middle name(s) of the End-User. Note that in some cultures, people can have multiple middle names; all can be present, with the names being separated by space characters. Also note that in some cultures, middle names are not used. */
+  middle_name?: string;
+  /** Casual name of the End-User that may or may not be the same as the given_name. For instance, a nickname value of Mike might be returned alongside a given_name value of Michael. */
+  nickname?: string;
+  /** Shorthand name by which the End-User wishes to be referred to at the RP, such as janedoe or j.doe. This value MAY be any valid JSON string including special characters such as \@, /, or whitespace. */
+  preferred_username?: string;
+  /** URL of the End-User's profile page. The contents of this Web page SHOULD be about the End-User. */
+  profile?: string;
+  /** URL of the End-User's profile picture. This URL MUST refer to an image file (for example, a PNG, JPEG, or GIF image file), rather than to a Web page containing an image. Note that this URL SHOULD specifically reference a profile photo of the End-User suitable for displaying when describing the End-User, rather than an arbitrary photo taken by the End-User. */
+  picture?: string;
+  /** URL of the End-User's Web page or blog. This Web page SHOULD contain information published by the End-User or an organization that the End-User is affiliated with. */
+  website?: string;
+  /** End-User's preferred e-mail address. Its value MUST conform to the RFC 5322 addr-spec syntax. */
+  email?: string;
+  /** True if the End-User's e-mail address has been verified; otherwise false. When this Claim Value is true, this means that the OP took affirmative steps to ensure that this e-mail address was controlled by the End-User at the time the verification was performed. The means by which an e-mail address is verified is context-specific, and dependent upon the trust framework or contractual agreements within which the parties are operating. */
+  email_verified?: boolean;
+  /** End-User's gender. Values defined by this specification are female and male. Other values MAY be used when neither of the defined values are applicable. */
+  gender?: string;
+  /** End-User's birthday, represented as an ISO 8601:2004 [ISO8601‑2004] YYYY-MM-DD format. The year MAY be 0000, indicating that it is omitted. To represent only the year, YYYY format is allowed. Note that depending on the underlying platform's date related function, providing just year can result in varying month and day, so the implementers need to take this factor into account to correctly process the dates. */
+  birthdate?: string;
+  /** String from zoneinfo [zoneinfo] time zone database representing the End-User's time zone. For example, Europe/Paris or America/Los_Angeles. */
+  zoneinfo?: string;
+  /** End-User's locale, represented as a BCP47 [RFC5646] language tag. This is typically an ISO 639-1 Alpha-2 [ISO639‑1] language code in lowercase and an ISO 3166-1 Alpha-2 [ISO3166‑1] country code in uppercase, separated by a dash. For example, en-US or fr-CA. As a compatibility note, some implementations have used an underscore as the separator rather than a dash, for example, en_US; */
+  locale?: string;
+  /** End-User's preferred telephone number. E.164 [E.164] is RECOMMENDED as the format of this Claim, for example, +1 (425) 555-1212 or +56 (2) 687 2400. If the phone number contains an extension, it is RECOMMENDED that the extension be represented using the RFC 3966 [RFC3966] extension syntax, for example, +1 (604) 555-1234;ext=5678. */
+  phone_number?: string;
+  /** True if the End-User's phone number has been verified; otherwise false. When this Claim Value is true, this means that the OP took affirmative steps to ensure that this phone number was controlled by the End-User at the time the verification was performed. The means by which a phone number is verified is context-specific, and dependent upon the trust framework or contractual agreements within which the parties are operating. When true, the phone_number Claim MUST be in E.164 format and any extensions MUST be represented in RFC 3966 format. */
+  phone_number_verified?: boolean;
+  /** End-User's preferred postal address. The value of the address member is a JSON [RFC4627] structure containing some or all of the members defined in Section 5.1.1. */
+  address?: OidcAddressClaim;
+  /** Time the End-User's information was last updated. Its value is a JSON number representing the number of seconds from 1970-01-01T0:0:0Z as measured in UTC until the date/time. */
+  updated_at?: number;
+}
+
+/**
+ * Standard JWT claims.
+ *
+ * @public
+ * @see https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+ */
+export interface JwtClaims {
+  [claim: string]: unknown;
+
+  /** The "iss" (issuer) claim identifies the principal that issued the JWT. The processing of this claim is generally application specific. The "iss" value is a case-sensitive string containing a StringOrURI value. */
+  iss?: string;
+  /** The "sub" (subject) claim identifies the principal that is the subject of the JWT. The claims in a JWT are normally statements about the subject. The subject value MUST either be scoped to be locally unique in the context of the issuer or be globally unique. The processing of this claim is generally application specific. The "sub" value is a case-sensitive string containing a StringOrURI value. */
+  sub?: string;
+  /** The "aud" (audience) claim identifies the recipients that the JWT is intended for. Each principal intended to process the JWT MUST identify itself with a value in the audience claim. If the principal processing the claim does not identify itself with a value in the "aud" claim when this claim is present, then the JWT MUST be rejected. In the general case, the "aud" value is an array of case-sensitive strings, each containing a StringOrURI value. In the special case when the JWT has one audience, the "aud" value MAY be a single case-sensitive string containing a StringOrURI value. The interpretation of audience values is generally application specific. */
+  aud?: string | string[];
+  /** The "exp" (expiration time) claim identifies the expiration time on or after which the JWT MUST NOT be accepted for processing. The processing of the "exp" claim requires that the current date/time MUST be before the expiration date/time listed in the "exp" claim. Implementers MAY provide for some small leeway, usually no more than a few minutes, to account for clock skew. Its value MUST be a number containing a NumericDate value. */
+  exp?: number;
+  /** The "nbf" (not before) claim identifies the time before which the JWT MUST NOT be accepted for processing. The processing of the "nbf" claim requires that the current date/time MUST be after or equal to the not-before date/time listed in the "nbf" claim. Implementers MAY provide for some small leeway, usually no more than a few minutes, to account for clock skew. Its value MUST be a number containing a NumericDate value. */
+  nbf?: number;
+  /** The "iat" (issued at) claim identifies the time at which the JWT was issued. This claim can be used to determine the age of the JWT. Its value MUST be a number containing a NumericDate value. */
+  iat?: number;
+  /** The "jti" (JWT ID) claim provides a unique identifier for the JWT. The identifier value MUST be assigned in a manner that ensures that there is a negligible probability that the same value will be accidentally assigned to a different data object; if the application uses multiple issuers, collisions MUST be prevented among values produced by different issuers as well. The "jti" claim can be used to prevent the JWT from being replayed. The "jti" value is a case-sensitive string. */
+  jti?: string;
+}
+
+/**
+ * Standard ID Token claims.
+ *
+ * @public
+ * @see https://openid.net/specs/openid-connect-core-1_0.html#IDToken
+ */
+export interface IdTokenClaims
+  extends Mandatory<OidcStandardClaims, 'sub'>,
+    Mandatory<JwtClaims, 'iss' | 'sub' | 'aud' | 'exp' | 'iat'> {
+  [claim: string]: unknown;
+
+  /** Time when the End-User authentication occurred. Its value is a JSON number representing the number of seconds from 1970-01-01T0:0:0Z as measured in UTC until the date/time. When a max_age request is made or when auth_time is requested as an Essential Claim, then this Claim is REQUIRED; otherwise, its inclusion is OPTIONAL. (The auth_time Claim semantically corresponds to the OpenID 2.0 PAPE [OpenID.PAPE] auth_time response parameter.) */
+  auth_time?: number;
+  /** String value used to associate a Client session with an ID Token, and to mitigate replay attacks. The value is passed through unmodified from the Authentication Request to the ID Token. If present in the ID Token, Clients MUST verify that the nonce Claim Value is equal to the value of the nonce parameter sent in the Authentication Request. If present in the Authentication Request, Authorization Servers MUST include a nonce Claim in the ID Token with the Claim Value being the nonce value sent in the Authentication Request. Authorization Servers SHOULD perform no other processing on nonce values used. The nonce value is a case sensitive string. */
+  nonce?: string;
+  /** Authentication Context Class Reference. String specifying an Authentication Context Class Reference value that identifies the Authentication Context Class that the authentication performed satisfied. The value "0" indicates the End-User authentication did not meet the requirements of ISO/IEC 29115 [ISO29115] level 1. Authentication using a long-lived browser cookie, for instance, is one example where the use of "level 0" is appropriate. Authentications with level 0 SHOULD NOT be used to authorize access to any resource of any monetary value. (This corresponds to the OpenID 2.0 PAPE [OpenID.PAPE] nist_auth_level 0.) An absolute URI or an RFC 6711 [RFC6711] registered name SHOULD be used as the acr value; registered names MUST NOT be used with a different meaning than that which is registered. Parties using this claim will need to agree upon the meanings of the values used, which may be context-specific. The acr value is a case sensitive string. */
+  acr?: string;
+  /** Authentication Methods References. JSON array of strings that are identifiers for authentication methods used in the authentication. For instance, values might indicate that both password and OTP authentication methods were used. The definition of particular values to be used in the amr Claim is beyond the scope of this specification. Parties using this claim will need to agree upon the meanings of the values used, which may be context-specific. The amr value is an array of case sensitive strings. */
+  amr?: unknown;
+  /** Authorized party - the party to which the ID Token was issued. If present, it MUST contain the OAuth 2.0 Client ID of this party. This Claim is only needed when the ID Token has a single audience value and that audience is different than the authorized party. It MAY be included even when the authorized party is the same as the sole audience. The azp value is a case sensitive string containing a StringOrURI value. */
+  azp?: string;
+  /**
+   * Session ID - String identifier for a Session. This represents a Session of a User Agent or device for a logged-in End-User at an RP. Different sid values are used to identify distinct sessions at an OP. The sid value need only be unique in the context of a particular issuer. Its contents are opaque to the RP. Its syntax is the same as an OAuth 2.0 Client Identifier.
+   * @see https://openid.net/specs/openid-connect-frontchannel-1_0.html#OPLogout
+   * */
+  sid?: string;
+}
+
+type OidcTokenSuccessResponse = {
+  /**
+   * REQUIRED. ID Token value associated with the authenticated session.
+   *
+   * @see https://openid.net/specs/openid-connect-core-1_0.html#IDToken
+   */
+  id_token: string;
+  /**
+   * REQUIRED. The access token issued by the authorization server.
+   */
+  access_token: string;
+  /**
+   * REQUIRED.  The type of the token issued as described in
+   * Section 7.1.  Value is case insensitive.
+   *
+   * @see https://datatracker.ietf.org/doc/html/rfc6749#section-7.1
+   */
+  token_type: string;
+  /**
+   * RECOMMENDED.  The lifetime in seconds of the access token.  For
+   * example, the value "3600" denotes that the access token will
+   * expire in one hour from the time the response was generated.
+   * If omitted, the authorization server SHOULD provide the
+   * expiration time via other means or document the default value.
+   */
+  expires_in?: number;
+};
+
+type OidcTokenErrorResponse = {
+  error: string;
+};
+
+/**
+ * Standard response from the OpenID Connect token request endpoint.
+ *
+ * @public
+ * @see https://openid.net/specs/openid-connect-core-1_0.html#TokenResponse
+ */
+export type OidcTokenResponse =
+  | OidcTokenSuccessResponse
+  | OidcTokenErrorResponse;

server/interfaces/api/settingsInterfaces.ts

@@ -1,3 +1,4 @@
+import type { PublicOidcProvider } from '@server/lib/settings';
 import type { DnsEntries, DnsStats } from 'dns-caching';
 import type { PaginatedResponse } from './common';
 
@@ -48,6 +49,7 @@ export interface PublicSettingsResponse {
   emailEnabled: boolean;
   newPlexLogin: boolean;
   youtubeUrl: string;
+  openIdProviders: PublicOidcProvider[];
 }
 
 export interface CacheItem {

server/interfaces/api/userSettingsInterfaces.ts

@@ -1,4 +1,7 @@
-import type { NotificationAgentKey } from '@server/lib/settings';
+import type {
+  NotificationAgentKey,
+  PublicOidcProvider,
+} from '@server/lib/settings';
 
 export interface UserSettingsGeneralResponse {
   username?: string;
@@ -39,3 +42,11 @@ export interface UserSettingsNotificationsResponse {
   webPushEnabled?: boolean;
   notificationTypes: Partial<NotificationAgentTypes>;
 }
+
+export type UserSettingsLinkedAccount = {
+  id: number;
+  username: string;
+  provider: PublicOidcProvider;
+};
+
+export type UserSettingsLinkedAccountResponse = UserSettingsLinkedAccount[];

server/lib/cache.ts

@@ -9,7 +9,8 @@ export type AvailableCacheIds =
   | 'github'
   | 'plexguid'
   | 'plextv'
-  | 'plexwatchlist';
+  | 'plexwatchlist'
+  | 'tvdb';
 
 const DEFAULT_TTL = 300;
 const DEFAULT_CHECK_PERIOD = 120;
@@ -70,6 +71,10 @@ class CacheManager {
       checkPeriod: 60,
     }),
     plexwatchlist: new Cache('plexwatchlist', 'Plex Watchlist'),
+    tvdb: new Cache('tvdb', 'The TVDB API', {
+      stdTtl: 21600,
+      checkPeriod: 60 * 30,
+    }),
   };
 
   public getCache(id: AvailableCacheIds): Cache {

server/lib/notifications/agents/discord.ts

@@ -109,7 +109,9 @@ class DiscordAgent
     type: Notification,
     payload: NotificationPayload
   ): DiscordRichEmbed {
-    const { applicationUrl } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl } = settings.main;
+    const { embedPoster } = settings.notifications.agents.discord;
 
     const appUrl =
       applicationUrl || `http://localhost:${process.env.port || 5055}`;
@@ -223,9 +225,11 @@ class DiscordAgent
           }
         : undefined,
       fields,
-      thumbnail: {
-        url: payload.image,
-      },
+      thumbnail: embedPoster
+        ? {
+            url: payload.image,
+          }
+        : undefined,
     };
   }
 

server/lib/notifications/agents/email.ts

@@ -48,7 +48,9 @@ class EmailAgent
     recipientEmail: string,
     recipientName?: string
   ): EmailOptions | undefined {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.email;
 
     if (type === Notification.TEST_NOTIFICATION) {
       return {
@@ -129,7 +131,7 @@ class EmailAgent
           body,
           mediaName: payload.subject,
           mediaExtra: payload.extra ?? [],
-          imageUrl: payload.image,
+          imageUrl: embedPoster ? payload.image : undefined,
           timestamp: new Date().toTimeString(),
           requestedBy: payload.request.requestedBy.displayName,
           actionUrl: applicationUrl
@@ -176,7 +178,7 @@ class EmailAgent
           issueComment: payload.comment?.message,
           mediaName: payload.subject,
           extra: payload.extra ?? [],
-          imageUrl: payload.image,
+          imageUrl: embedPoster ? payload.image : undefined,
           timestamp: new Date().toTimeString(),
           actionUrl: applicationUrl
             ? `${applicationUrl}/issues/${payload.issue.id}`

server/lib/notifications/agents/ntfy.ts

@@ -22,7 +22,9 @@ class NtfyAgent
   }
 
   private buildPayload(type: Notification, payload: NotificationPayload) {
-    const { applicationUrl } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl } = settings.main;
+    const { embedPoster } = settings.notifications.agents.ntfy;
 
     const topic = this.getSettings().options.topic;
     const priority = 3;
@@ -72,7 +74,7 @@ class NtfyAgent
       message += `\n\n**${extra.name}**\n${extra.value}`;
     }
 
-    const attach = payload.image;
+    const attach = embedPoster ? payload.image : undefined;
 
     let click;
     if (applicationUrl && payload.media) {

server/lib/notifications/agents/pushover.ts

@@ -78,7 +78,9 @@ class PushoverAgent
     type: Notification,
     payload: NotificationPayload
   ): Promise<Partial<PushoverPayload>> {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.pushover;
 
     const title = payload.event ?? payload.subject;
     let message = payload.event ? `<b>${payload.subject}</b>` : '';
@@ -155,7 +157,7 @@ class PushoverAgent
 
     let attachment_base64;
     let attachment_type;
-    if (payload.image) {
+    if (embedPoster && payload.image) {
       const imagePayload = await this.getImagePayload(payload.image);
       if (imagePayload.attachment_base64 && imagePayload.attachment_type) {
         attachment_base64 = imagePayload.attachment_base64;

server/lib/notifications/agents/slack.ts

@@ -63,7 +63,9 @@ class SlackAgent
     type: Notification,
     payload: NotificationPayload
   ): SlackBlockEmbed {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.slack;
 
     const fields: EmbedField[] = [];
 
@@ -159,13 +161,14 @@ class SlackAgent
           type: 'mrkdwn',
           text: payload.message,
         },
-        accessory: payload.image
-          ? {
-              type: 'image',
-              image_url: payload.image,
-              alt_text: payload.subject,
-            }
-          : undefined,
+        accessory:
+          embedPoster && payload.image
+            ? {
+                type: 'image',
+                image_url: payload.image,
+                alt_text: payload.subject,
+              }
+            : undefined,
       });
     }
 

server/lib/notifications/agents/telegram.ts

@@ -65,7 +65,9 @@ class TelegramAgent
     type: Notification,
     payload: NotificationPayload
   ): Partial<TelegramMessagePayload | TelegramPhotoPayload> {
-    const { applicationUrl, applicationTitle } = getSettings().main;
+    const settings = getSettings();
+    const { applicationUrl, applicationTitle } = settings.main;
+    const { embedPoster } = settings.notifications.agents.telegram;
 
     /* eslint-disable no-useless-escape */
     let message = `\*${this.escapeText(
@@ -142,7 +144,7 @@ class TelegramAgent
     }
     /* eslint-enable */
 
-    return payload.image
+    return embedPoster && payload.image
       ? {
           photo: payload.image,
           caption: message,
@@ -160,7 +162,7 @@ class TelegramAgent
   ): Promise<boolean> {
     const settings = this.getSettings();
     const endpoint = `${this.baseUrl}bot${settings.options.botAPI}/${
-      payload.image ? 'sendPhoto' : 'sendMessage'
+      settings.embedPoster && payload.image ? 'sendPhoto' : 'sendMessage'
     }`;
     const notificationPayload = this.getNotificationPayload(type, payload);
 

server/lib/notifications/agents/webpush.ts

@@ -42,6 +42,8 @@ class WebPushAgent
     type: Notification,
     payload: NotificationPayload
   ): PushNotificationPayload {
+    const { embedPoster } = getSettings().notifications.agents.webpush;
+
     const mediaType = payload.media
       ? payload.media.mediaType === MediaType.MOVIE
         ? 'movie'
@@ -128,7 +130,7 @@ class WebPushAgent
       notificationType: Notification[type],
       subject: payload.subject,
       message,
-      image: payload.image,
+      image: embedPoster ? payload.image : undefined,
       requestId: payload.request?.id,
       actionUrl,
       actionUrlTitle,

server/lib/scanners/jellyfin/index.ts

@@ -1,7 +1,12 @@
 import type { JellyfinLibraryItem } from '@server/api/jellyfin';
 import JellyfinAPI from '@server/api/jellyfin';
+import { getMetadataProvider } from '@server/api/metadata';
 import TheMovieDb from '@server/api/themoviedb';
-import type { TmdbTvDetails } from '@server/api/themoviedb/interfaces';
+import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
+import type {
+  TmdbKeyword,
+  TmdbTvDetails,
+} from '@server/api/themoviedb/interfaces';
 import { MediaStatus, MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import { getRepository } from '@server/datasource';
@@ -43,6 +48,7 @@ class JellyfinScanner {
 
   constructor({ isRecentOnly }: { isRecentOnly?: boolean } = {}) {
     this.tmdb = new TheMovieDb();
+
     this.isRecentOnly = isRecentOnly ?? false;
   }
 
@@ -192,6 +198,42 @@ class JellyfinScanner {
     }
   }
 
+  private async getTvShow({
+    tmdbId,
+    tvdbId,
+  }: {
+    tmdbId?: number;
+    tvdbId?: number;
+  }): Promise<TmdbTvDetails> {
+    let tvShow;
+
+    if (tmdbId) {
+      tvShow = await this.tmdb.getTvShow({
+        tvId: Number(tmdbId),
+      });
+    } else if (tvdbId) {
+      tvShow = await this.tmdb.getShowByTvdbId({
+        tvdbId: Number(tvdbId),
+      });
+    } else {
+      throw new Error('No ID provided');
+    }
+
+    const metadataProvider = tvShow.keywords.results.some(
+      (keyword: TmdbKeyword) => keyword.id === ANIME_KEYWORD_ID
+    )
+      ? await getMetadataProvider('anime')
+      : await getMetadataProvider('tv');
+
+    if (!(metadataProvider instanceof TheMovieDb)) {
+      tvShow = await metadataProvider.getTvShow({
+        tvId: Number(tmdbId),
+      });
+    }
+
+    return tvShow;
+  }
+
   private async processShow(jellyfinitem: JellyfinLibraryItem) {
     const mediaRepository = getRepository(Media);
 
@@ -212,8 +254,8 @@ class JellyfinScanner {
 
       if (metadata.ProviderIds.Tmdb) {
         try {
-          tvShow = await this.tmdb.getTvShow({
-            tvId: Number(metadata.ProviderIds.Tmdb),
+          tvShow = await this.getTvShow({
+            tmdbId: Number(metadata.ProviderIds.Tmdb),
           });
         } catch {
           this.log('Unable to find TMDb ID for this title.', 'debug', {
@@ -223,7 +265,7 @@ class JellyfinScanner {
       }
       if (!tvShow && metadata.ProviderIds.Tvdb) {
         try {
-          tvShow = await this.tmdb.getShowByTvdbId({
+          tvShow = await this.getTvShow({
             tvdbId: Number(metadata.ProviderIds.Tvdb),
           });
         } catch {

server/lib/scanners/plex/index.ts

@@ -1,7 +1,13 @@
 import animeList from '@server/api/animelist';
+import { getMetadataProvider } from '@server/api/metadata';
 import type { PlexLibraryItem, PlexMetadata } from '@server/api/plexapi';
 import PlexAPI from '@server/api/plexapi';
-import type { TmdbTvDetails } from '@server/api/themoviedb/interfaces';
+import TheMovieDb from '@server/api/themoviedb';
+import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
+import type {
+  TmdbKeyword,
+  TmdbTvDetails,
+} from '@server/api/themoviedb/interfaces';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
 import cacheManager from '@server/lib/cache';
@@ -249,6 +255,42 @@ class PlexScanner
     });
   }
 
+  private async getTvShow({
+    tmdbId,
+    tvdbId,
+  }: {
+    tmdbId?: number;
+    tvdbId?: number;
+  }): Promise<TmdbTvDetails> {
+    let tvShow;
+
+    if (tmdbId) {
+      tvShow = await this.tmdb.getTvShow({
+        tvId: Number(tmdbId),
+      });
+    } else if (tvdbId) {
+      tvShow = await this.tmdb.getShowByTvdbId({
+        tvdbId: Number(tvdbId),
+      });
+    } else {
+      throw new Error('No ID provided');
+    }
+
+    const metadataProvider = tvShow.keywords.results.some(
+      (keyword: TmdbKeyword) => keyword.id === ANIME_KEYWORD_ID
+    )
+      ? await getMetadataProvider('anime')
+      : await getMetadataProvider('tv');
+
+    if (!(metadataProvider instanceof TheMovieDb)) {
+      tvShow = await metadataProvider.getTvShow({
+        tvId: Number(tmdbId),
+      });
+    }
+
+    return tvShow;
+  }
+
   private async processPlexShow(plexitem: PlexLibraryItem) {
     const ratingKey =
       plexitem.grandparentRatingKey ??
@@ -273,7 +315,9 @@ class PlexScanner
       await this.processHamaSpecials(metadata, mediaIds.tvdbId);
     }
 
-    const tvShow = await this.tmdb.getTvShow({ tvId: mediaIds.tmdbId });
+    const tvShow = await this.getTvShow({
+      tmdbId: mediaIds.tmdbId,
+    });
 
     const seasons = tvShow.seasons;
     const processableSeasons: ProcessableSeason[] = [];

server/lib/settings/index.ts

@@ -49,6 +49,25 @@ export interface JellyfinSettings {
   serverId: string;
   apiKey: string;
 }
+
+export type OidcProvider = {
+  slug: string;
+  name: string;
+  issuerUrl: string;
+  clientId: string;
+  clientSecret: string;
+  logo?: string;
+  requiredClaims?: string;
+  scopes?: string;
+  newUserLogin?: boolean;
+};
+
+export type PublicOidcProvider = Pick<OidcProvider, 'slug' | 'name' | 'logo'>;
+
+export interface OidcSettings {
+  providers: OidcProvider[];
+}
+
 export interface TautulliSettings {
   hostname?: string;
   port?: number;
@@ -100,6 +119,27 @@ interface Quota {
   quotaDays?: number;
 }
 
+export enum MetadataProviderType {
+  TMDB = 'tmdb',
+  TVDB = 'tvdb',
+}
+
+export interface MetadataSettings {
+  tv: MetadataProviderType;
+  anime: MetadataProviderType;
+}
+
+export interface ProxySettings {
+  enabled: boolean;
+  hostname: string;
+  port: number;
+  useSsl: boolean;
+  user: string;
+  password: string;
+  bypassFilter: string;
+  bypassLocalAddresses: boolean;
+}
+
 export interface MainSettings {
   apiKey: string;
   applicationTitle: string;
@@ -114,6 +154,7 @@ export interface MainSettings {
   hideBlacklisted: boolean;
   localLogin: boolean;
   mediaServerLogin: boolean;
+  oidcLogin: boolean;
   newPlexLogin: boolean;
   discoverRegion: string;
   streamingRegion: string;
@@ -182,10 +223,12 @@ interface FullPublicSettings extends PublicSettings {
   userEmailRequired: boolean;
   newPlexLogin: boolean;
   youtubeUrl: string;
+  openIdProviders: PublicOidcProvider[];
 }
 
 export interface NotificationAgentConfig {
   enabled: boolean;
+  embedPoster: boolean;
   types?: number;
   options: Record<string, unknown>;
 }
@@ -332,6 +375,7 @@ export interface AllSettings {
   main: MainSettings;
   plex: PlexSettings;
   jellyfin: JellyfinSettings;
+  oidc: OidcSettings;
   tautulli: TautulliSettings;
   radarr: RadarrSettings[];
   sonarr: SonarrSettings[];
@@ -339,6 +383,7 @@ export interface AllSettings {
   notifications: NotificationSettings;
   jobs: Record<JobId, JobSettings>;
   network: NetworkSettings;
+  metadataSettings: MetadataSettings;
 }
 
 const SETTINGS_PATH = process.env.CONFIG_DIRECTORY
@@ -367,6 +412,7 @@ class Settings {
         hideBlacklisted: false,
         localLogin: true,
         mediaServerLogin: true,
+        oidcLogin: false,
         newPlexLogin: true,
         discoverRegion: '',
         streamingRegion: '',
@@ -398,7 +444,14 @@ class Settings {
         serverId: '',
         apiKey: '',
       },
+      oidc: {
+        providers: [],
+      },
       tautulli: {},
+      metadataSettings: {
+        tv: MetadataProviderType.TMDB,
+        anime: MetadataProviderType.TMDB,
+      },
       radarr: [],
       sonarr: [],
       public: {
@@ -408,6 +461,7 @@ class Settings {
         agents: {
           email: {
             enabled: false,
+            embedPoster: true,
             options: {
               userEmailRequired: false,
               emailFrom: '',
@@ -422,6 +476,7 @@ class Settings {
           },
           discord: {
             enabled: false,
+            embedPoster: true,
             types: 0,
             options: {
               webhookUrl: '',
@@ -431,6 +486,7 @@ class Settings {
           },
           slack: {
             enabled: false,
+            embedPoster: true,
             types: 0,
             options: {
               webhookUrl: '',
@@ -438,6 +494,7 @@ class Settings {
           },
           telegram: {
             enabled: false,
+            embedPoster: true,
             types: 0,
             options: {
               botAPI: '',
@@ -448,6 +505,7 @@ class Settings {
           },
           pushbullet: {
             enabled: false,
+            embedPoster: false,
             types: 0,
             options: {
               accessToken: '',
@@ -455,6 +513,7 @@ class Settings {
           },
           pushover: {
             enabled: false,
+            embedPoster: true,
             types: 0,
             options: {
               accessToken: '',
@@ -464,6 +523,7 @@ class Settings {
           },
           webhook: {
             enabled: false,
+            embedPoster: true,
             types: 0,
             options: {
               webhookUrl: '',
@@ -473,10 +533,12 @@ class Settings {
           },
           webpush: {
             enabled: false,
+            embedPoster: true,
             options: {},
           },
           gotify: {
             enabled: false,
+            embedPoster: false,
             types: 0,
             options: {
               url: '',
@@ -486,6 +548,7 @@ class Settings {
           },
           ntfy: {
             enabled: false,
+            embedPoster: true,
             types: 0,
             options: {
               url: '',
@@ -585,6 +648,14 @@ class Settings {
     this.data.jellyfin = data;
   }
 
+  get oidc(): OidcSettings {
+    return this.data.oidc;
+  }
+
+  set oidc(data: OidcSettings) {
+    this.data.oidc = data;
+  }
+
   get tautulli(): TautulliSettings {
     return this.data.tautulli;
   }
@@ -593,6 +664,14 @@ class Settings {
     this.data.tautulli = data;
   }
 
+  get metadataSettings(): MetadataSettings {
+    return this.data.metadataSettings;
+  }
+
+  set metadataSettings(data: MetadataSettings) {
+    this.data.metadataSettings = data;
+  }
+
   get radarr(): RadarrSettings[] {
     return this.data.radarr;
   }
@@ -649,6 +728,13 @@ class Settings {
         this.data.notifications.agents.email.options.userEmailRequired,
       newPlexLogin: this.data.main.newPlexLogin,
       youtubeUrl: this.data.main.youtubeUrl,
+      openIdProviders: this.data.main.oidcLogin
+        ? this.data.oidc.providers.map((p) => ({
+            slug: p.slug,
+            name: p.name,
+            logo: p.logo,
+          }))
+        : [],
     };
   }
 

server/migration/postgres/1742858617989-AddLinkedAccount.ts

@@ -0,0 +1,21 @@
+import type { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddLinkedAccount1742858617989 implements MigrationInterface {
+  name = 'AddLinkedAccount1742858617989';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "linked_accounts" ("id" SERIAL NOT NULL, "provider" character varying(255) NOT NULL, "sub" character varying(255) NOT NULL, "username" character varying NOT NULL, "userId" integer, CONSTRAINT "PK_445bf7a50aeeb7f0084052935a6" PRIMARY KEY ("id"))`
+    );
+    await queryRunner.query(
+      `ALTER TABLE "linked_accounts" ADD CONSTRAINT "FK_2c77d2a0c06eeab6e62dc35af64" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "linked_accounts" DROP CONSTRAINT "FK_2c77d2a0c06eeab6e62dc35af64"`
+    );
+    await queryRunner.query(`DROP TABLE "linked_accounts"`);
+  }
+}

server/migration/sqlite/1742858484395-AddLinkedAccounts.ts

@@ -0,0 +1,15 @@
+import type { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddLinkedAccounts1742858484395 implements MigrationInterface {
+  name = 'AddLinkedAccounts1742858484395';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "linked_accounts" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "provider" varchar(255) NOT NULL, "sub" varchar(255) NOT NULL, "username" varchar NOT NULL, "userId" integer, CONSTRAINT "FK_2c77d2a0c06eeab6e62dc35af64" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE "linked_accounts"`);
+  }
+}

server/models/Tv.ts

@@ -124,7 +124,7 @@ const mapEpisodeResult = (episode: TmdbTvEpisodeResult): Episode => ({
   seasonNumber: episode.season_number,
   showId: episode.show_id,
   voteAverage: episode.vote_average,
-  voteCount: episode.vote_cuont,
+  voteCount: episode.vote_count,
   stillPath: episode.still_path,
 });
 

server/routes/auth.ts

@@ -4,7 +4,9 @@ import { ApiErrorCode } from '@server/constants/error';
 import { MediaServerType, ServerType } from '@server/constants/server';
 import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
+import { LinkedAccount } from '@server/entity/LinkedAccount';
 import { User } from '@server/entity/User';
+import type { IdTokenClaims } from '@server/interfaces/api/oidcInterfaces';
 import { startJobs } from '@server/job/schedule';
 import { Permission } from '@server/lib/permissions';
 import { getSettings } from '@server/lib/settings';
@@ -14,9 +16,21 @@ import { checkAvatarChanged } from '@server/routes/avatarproxy';
 import { ApiError } from '@server/types/error';
 import { getAppVersion } from '@server/utils/appVersion';
 import { getHostname } from '@server/utils/getHostname';
+import {
+  createIdTokenSchema,
+  fetchOpenIdTokenData,
+  getOpenIdConfiguration,
+  getOpenIdRedirectUrl,
+  getOpenIdUserInfo,
+  validateUserClaims,
+  type FullUserInfo,
+} from '@server/utils/oidc';
 import axios from 'axios';
+import { randomBytes } from 'crypto';
 import * as EmailValidator from 'email-validator';
 import { Router } from 'express';
+import gravatarUrl from 'gravatar-url';
+import { jwtDecode } from 'jwt-decode';
 import net from 'net';
 
 const authRoutes = Router();
@@ -721,6 +735,287 @@ authRoutes.post('/local', async (req, res, next) => {
   }
 });
 
+authRoutes.get('/oidc/login/:slug', async (req, res, next) => {
+  const settings = getSettings();
+  const provider = settings.oidc.providers.find(
+    (p) => p.slug === req.params.slug
+  );
+
+  if (!settings.main.oidcLogin || !provider) {
+    return next({
+      status: 403,
+      message: 'OpenID Connect sign-in is disabled.',
+    });
+  }
+
+  const state = randomBytes(32).toString('hex');
+
+  let redirectUrl;
+  try {
+    redirectUrl = await getOpenIdRedirectUrl(req, provider, state);
+  } catch (err) {
+    logger.info('Failed OpenID Connect login attempt', {
+      cause: 'Failed to fetch OpenID Connect redirect url',
+      ip: req.ip,
+      errorMessage: err.message,
+    });
+    return next({
+      status: 500,
+      message: 'Configuration error.',
+    });
+  }
+
+  res.cookie('oidc-state', state, {
+    maxAge: 60000,
+    httpOnly: true,
+    secure: req.protocol === 'https',
+  });
+
+  return res.status(200).json({
+    redirectUrl,
+  });
+});
+
+authRoutes.get('/oidc/callback/:slug', async (req, res, next) => {
+  const settings = getSettings();
+  const provider = settings.oidc.providers.find(
+    (p) => p.slug === req.params.slug
+  );
+
+  if (!settings.main.oidcLogin || !provider) {
+    return next({
+      status: 403,
+      message: 'OpenID Connect sign-in is disabled',
+    });
+  }
+
+  const requiredClaims = (provider.requiredClaims ?? '')
+    .split(' ')
+    .filter((s) => !!s);
+
+  const cookieState = req.cookies['oidc-state'];
+  const url = new URL(req.url, `${req.protocol}://${req.hostname}`);
+  const state = url.searchParams.get('state');
+
+  try {
+    // Check that the request belongs to the correct state
+    if (state && cookieState === state) {
+      res.clearCookie('oidc-state');
+    } else {
+      logger.info('Failed OpenID Connect login attempt', {
+        cause: 'Invalid state',
+        ip: req.ip,
+        state: state,
+        cookieState: cookieState,
+      });
+      return next({
+        status: 400,
+        message: 'Authorization failed',
+      });
+    }
+
+    // Check that a code has been issued
+    const code = url.searchParams.get('code');
+    if (!code) {
+      logger.info('Failed OpenID Connect login attempt', {
+        cause: 'Invalid code',
+        ip: req.ip,
+        code: code,
+      });
+      return next({
+        status: 400,
+        message: 'Authorization failed',
+      });
+    }
+
+    const wellKnownInfo = await getOpenIdConfiguration(provider.issuerUrl);
+
+    // Fetch the token data
+    const body = await fetchOpenIdTokenData(req, provider, wellKnownInfo, code);
+
+    // Validate that the token response is valid and not manipulated
+    if ('error' in body) {
+      logger.info('Failed OIDC login attempt', {
+        cause: 'Invalid token response',
+        ip: req.ip,
+        body: body,
+      });
+      return next({
+        status: 400,
+        message: 'Authorization failed',
+      });
+    }
+
+    // Extract the ID token and access token
+    const { id_token: idToken, access_token: accessToken } = body;
+
+    // Attempt to decode ID token jwt
+    let decoded: IdTokenClaims;
+    try {
+      decoded = jwtDecode(idToken);
+    } catch (err) {
+      logger.info('Failed OIDC login attempt', {
+        cause: 'Invalid jwt',
+        ip: req.ip,
+        idToken: idToken,
+        err,
+      });
+      return next({
+        status: 400,
+        message: 'Authorization failed',
+      });
+    }
+
+    // Merge claims from JWT with data from userinfo endpoint
+    const userInfo = await getOpenIdUserInfo(wellKnownInfo, accessToken);
+    const fullUserInfo: FullUserInfo = { ...decoded, ...userInfo };
+
+    // Validate ID token jwt and user info
+    try {
+      const idTokenSchema = createIdTokenSchema({
+        oidcClientId: provider.clientId,
+        oidcDomain: provider.issuerUrl,
+        requiredClaims,
+      });
+      await idTokenSchema.validate(fullUserInfo);
+    } catch (err) {
+      logger.info('Failed OIDC login attempt', {
+        cause: 'Invalid jwt or missing claims',
+        ip: req.ip,
+        idToken: idToken,
+        errorMessage: err.message,
+      });
+      return next({
+        status: 403,
+        message: 'Authorization failed',
+      });
+    }
+
+    // Validate that user meets required claims
+    try {
+      validateUserClaims(fullUserInfo, requiredClaims);
+    } catch (error) {
+      logger.info('Failed OIDC login attempt', {
+        cause: 'Failed to validate required claims',
+        error,
+        ip: req.ip,
+        requiredClaims: provider.requiredClaims,
+      });
+      return next({
+        status: 403,
+        message: 'Insufficient permissions',
+      });
+    }
+
+    // Map identifier to linked account
+    const userRepository = getRepository(User);
+    const linkedAccountsRepository = getRepository(LinkedAccount);
+
+    const linkedAccount = await linkedAccountsRepository.findOne({
+      relations: {
+        user: true,
+      },
+      where: {
+        provider: provider.slug,
+        sub: fullUserInfo.sub,
+      },
+    });
+    let user = linkedAccount?.user;
+
+    // If there is already a user logged in, and no linked account, link the account.
+    if (req.user != null && linkedAccount == null) {
+      const linkedAccount = new LinkedAccount({
+        user: req.user,
+        provider: provider.slug,
+        sub: fullUserInfo.sub,
+        username: fullUserInfo.preferred_username ?? req.user.displayName,
+      });
+
+      await linkedAccountsRepository.save(linkedAccount);
+      return res
+        .status(200)
+        .json({ status: 'ok', to: '/profile/settings/linked-accounts' });
+    }
+
+    // Create user if one doesn't already exist
+    if (!user && fullUserInfo.email != null && provider.newUserLogin) {
+      // Check if a user with this email already exists
+      const existingUser = await userRepository.findOne({
+        where: { email: fullUserInfo.email },
+      });
+
+      if (existingUser) {
+        // If a user with the email exists, throw a 409 Conflict error
+        return next({
+          status: 409,
+          message: 'A user with this email address already exists.',
+        });
+      }
+
+      logger.info(`Creating user for ${fullUserInfo.email}`, {
+        ip: req.ip,
+        email: fullUserInfo.email,
+      });
+
+      const avatar =
+        fullUserInfo.picture ??
+        gravatarUrl(fullUserInfo.email, { default: 'mm', size: 200 });
+      user = new User({
+        avatar: avatar,
+        username: fullUserInfo.preferred_username,
+        email: fullUserInfo.email,
+        permissions: settings.main.defaultPermissions,
+        plexToken: '',
+        userType: UserType.LOCAL,
+      });
+      await userRepository.save(user);
+
+      const linkedAccount = new LinkedAccount({
+        user,
+        provider: provider.slug,
+        sub: fullUserInfo.sub,
+        username: fullUserInfo.preferred_username ?? fullUserInfo.email,
+      });
+      await linkedAccountsRepository.save(linkedAccount);
+
+      user.linkedAccounts = [linkedAccount];
+      await userRepository.save(user);
+    }
+
+    if (!user) {
+      logger.debug('Failed OIDC sign-up attempt', {
+        cause: provider.newUserLogin
+          ? 'User did not have an account, and was missing an associated email address.'
+          : 'User did not have an account, and new user login was disabled.',
+      });
+      return next({
+        status: 400,
+        message: provider.newUserLogin
+          ? 'Unable to create new user account (missing email address)'
+          : 'Unable to create new user account (new user login is disabled)',
+      });
+    }
+
+    // Set logged in session and return
+    if (req.session) {
+      req.session.userId = user.id;
+    }
+
+    // Success!
+    return res.status(200).json({ status: 'ok', to: '/' });
+  } catch (error) {
+    logger.error('Failed OIDC login attempt', {
+      cause: 'Unknown error',
+      ip: req.ip,
+      error,
+    });
+    return next({
+      status: 500,
+      message: 'An unknown error occurred',
+    });
+  }
+});
+
 authRoutes.post('/logout', async (req, res, next) => {
   try {
     const userId = req.session?.userId;

server/routes/issue.ts

@@ -55,7 +55,6 @@ issueRoutes.get<Record<string, string>, IssueResultsResponse>(
       .leftJoinAndSelect('issue.media', 'media')
       .leftJoinAndSelect('issue.modifiedBy', 'modifiedBy')
       .leftJoinAndSelect('issue.comments', 'comments')
-      .leftJoinAndSelect('comments.user', 'user')
       .where('issue.status IN (:...issueStatus)', {
         issueStatus: statusFilter,
       });

server/routes/settings/index.ts

@@ -39,6 +39,7 @@ import { rescheduleJob } from 'node-schedule';
 import path from 'path';
 import semver from 'semver';
 import { URL } from 'url';
+import metadataRoutes from './metadata';
 import notificationRoutes from './notifications';
 import radarrRoutes from './radarr';
 import sonarrRoutes from './sonarr';
@@ -49,6 +50,7 @@ settingsRoutes.use('/notifications', notificationRoutes);
 settingsRoutes.use('/radarr', radarrRoutes);
 settingsRoutes.use('/sonarr', sonarrRoutes);
 settingsRoutes.use('/discover', discoverSettingRoutes);
+settingsRoutes.use('/metadatas', metadataRoutes);
 
 const filteredMainSettings = (
   user: User,
@@ -107,6 +109,45 @@ settingsRoutes.post('/main/regenerate', async (req, res, next) => {
   return res.status(200).json(filteredMainSettings(req.user, main));
 });
 
+settingsRoutes.get('/oidc', async (req, res) => {
+  const settings = getSettings();
+
+  return res.status(200).json(settings.oidc);
+});
+
+settingsRoutes.put('/oidc/:slug', async (req, res) => {
+  const settings = getSettings();
+  let provider = settings.oidc.providers.findIndex(
+    (p) => p.slug === req.params.slug
+  );
+
+  if (provider !== -1) {
+    Object.assign(settings.oidc.providers[provider], req.body);
+  } else {
+    settings.oidc.providers.push({ slug: req.params.slug, ...req.body });
+    provider = settings.oidc.providers.length - 1;
+  }
+
+  await settings.save();
+
+  return res.status(200).json(settings.oidc.providers[provider]);
+});
+
+settingsRoutes.delete('/oidc/:slug', async (req, res) => {
+  const settings = getSettings();
+  const provider = settings.oidc.providers.findIndex(
+    (p) => p.slug === req.params.slug
+  );
+
+  if (provider === -1)
+    return res.status(404).json({ message: 'Provider not found' });
+
+  settings.oidc.providers.splice(provider, 1);
+  await settings.save();
+
+  return res.status(200).json(settings.oidc);
+});
+
 settingsRoutes.get('/plex', (_req, res) => {
   const settings = getSettings();
 

server/routes/settings/metadata.ts

@@ -0,0 +1,153 @@
+import TheMovieDb from '@server/api/themoviedb';
+import Tvdb from '@server/api/tvdb';
+import {
+  getSettings,
+  MetadataProviderType,
+  type MetadataSettings,
+} from '@server/lib/settings';
+import logger from '@server/logger';
+import { Router } from 'express';
+
+function getTestResultString(testValue: number): string {
+  if (testValue === -1) return 'not tested';
+  if (testValue === 0) return 'failed';
+  return 'ok';
+}
+
+const metadataRoutes = Router();
+
+metadataRoutes.get('/', (_req, res) => {
+  const settings = getSettings();
+  res.status(200).json({
+    tv: settings.metadataSettings.tv,
+    anime: settings.metadataSettings.anime,
+  });
+});
+
+metadataRoutes.put('/', async (req, res) => {
+  const settings = getSettings();
+  const body = req.body as MetadataSettings;
+
+  let tvdbTest = -1;
+  let tmdbTest = -1;
+
+  try {
+    if (
+      body.tv === MetadataProviderType.TVDB ||
+      body.anime === MetadataProviderType.TVDB
+    ) {
+      tvdbTest = 0;
+      const tvdb = await Tvdb.getInstance();
+      await tvdb.test();
+      tvdbTest = 1;
+    }
+  } catch (e) {
+    logger.error('Failed to test metadata provider', {
+      label: 'Metadata',
+      message: e.message,
+    });
+  }
+
+  try {
+    if (
+      body.tv === MetadataProviderType.TMDB ||
+      body.anime === MetadataProviderType.TMDB
+    ) {
+      tmdbTest = 0;
+      const tmdb = new TheMovieDb();
+      await tmdb.getTvShow({ tvId: 1054 });
+      tmdbTest = 1;
+    }
+  } catch (e) {
+    logger.error('Failed to test metadata provider', {
+      label: 'MetadataProvider',
+      message: e.message,
+    });
+  }
+
+  // If a test failed, return the test results
+  if (tvdbTest === 0 || tmdbTest === 0) {
+    return res.status(500).json({
+      success: false,
+      tests: {
+        tvdb: getTestResultString(tvdbTest),
+        tmdb: getTestResultString(tmdbTest),
+      },
+    });
+  }
+
+  settings.metadataSettings = {
+    tv: body.tv,
+    anime: body.anime,
+  };
+  await settings.save();
+
+  res.status(200).json({
+    success: true,
+    tv: body.tv,
+    anime: body.anime,
+    tests: {
+      tvdb: getTestResultString(tvdbTest),
+      tmdb: getTestResultString(tmdbTest),
+    },
+  });
+});
+
+metadataRoutes.post('/test', async (req, res) => {
+  let tvdbTest = -1;
+  let tmdbTest = -1;
+
+  try {
+    const body = req.body as { tmdb: boolean; tvdb: boolean };
+
+    try {
+      if (body.tmdb) {
+        tmdbTest = 0;
+        const tmdb = new TheMovieDb();
+        await tmdb.getTvShow({ tvId: 1054 });
+        tmdbTest = 1;
+      }
+    } catch (e) {
+      logger.error('Failed to test metadata provider', {
+        label: 'MetadataProvider',
+        message: e.message,
+      });
+    }
+
+    try {
+      if (body.tvdb) {
+        tvdbTest = 0;
+        const tvdb = await Tvdb.getInstance();
+        await tvdb.test();
+        tvdbTest = 1;
+      }
+    } catch (e) {
+      logger.error('Failed to test metadata provider', {
+        label: 'MetadataProvider',
+        message: e.message,
+      });
+    }
+
+    const success = !(tvdbTest === 0 || tmdbTest === 0);
+    const statusCode = success ? 200 : 500;
+
+    return res.status(statusCode).json({
+      success: success,
+      tests: {
+        tmdb: getTestResultString(tmdbTest),
+        tvdb: getTestResultString(tvdbTest),
+      },
+    });
+  } catch (e) {
+    return res.status(500).json({
+      success: false,
+      tests: {
+        tmdb: getTestResultString(tmdbTest),
+        tvdb: getTestResultString(tvdbTest),
+      },
+      error: e.message,
+    });
+  }
+});
+
+export default metadataRoutes;

server/routes/settings/notifications.ts

@@ -270,6 +270,7 @@ notificationRoutes.get('/webhook', (_req, res) => {
 
   const response: typeof webhookSettings = {
     enabled: webhookSettings.enabled,
+    embedPoster: webhookSettings.embedPoster,
     types: webhookSettings.types,
     options: {
       ...webhookSettings.options,
@@ -291,6 +292,7 @@ notificationRoutes.post('/webhook', async (req, res, next) => {
 
     settings.notifications.agents.webhook = {
       enabled: req.body.enabled,
+      embedPoster: req.body.embedPoster,
       types: req.body.types,
       options: {
         jsonPayload: Buffer.from(req.body.options.jsonPayload).toString(
@@ -321,6 +323,7 @@ notificationRoutes.post('/webhook/test', async (req, res, next) => {
 
     const testBody = {
       enabled: req.body.enabled,
+      embedPoster: req.body.embedPoster,
       types: req.body.types,
       options: {
         jsonPayload: Buffer.from(req.body.options.jsonPayload).toString(

server/routes/tv.ts

@@ -1,5 +1,8 @@
+import { getMetadataProvider } from '@server/api/metadata';
 import RottenTomatoes from '@server/api/rating/rottentomatoes';
 import TheMovieDb from '@server/api/themoviedb';
+import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
+import type { TmdbKeyword } from '@server/api/themoviedb/interfaces';
 import { MediaType } from '@server/constants/media';
 import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
@@ -13,12 +16,20 @@ const tvRoutes = Router();
 
 tvRoutes.get('/:id', async (req, res, next) => {
   const tmdb = new TheMovieDb();
+
   try {
-    const tv = await tmdb.getTvShow({
+    const tmdbTv = await tmdb.getTvShow({
+      tvId: Number(req.params.id),
+    });
+    const metadataProvider = tmdbTv.keywords.results.some(
+      (keyword: TmdbKeyword) => keyword.id === ANIME_KEYWORD_ID
+    )
+      ? await getMetadataProvider('anime')
+      : await getMetadataProvider('tv');
+    const tv = await metadataProvider.getTvShow({
       tvId: Number(req.params.id),
       language: (req.query.language as string) ?? req.locale,
     });
-
     const media = await Media.getMedia(tv.id, MediaType.TV);
 
     const onUserWatchlist = await getRepository(Watchlist).exist({
@@ -34,7 +45,9 @@ tvRoutes.get('/:id', async (req, res, next) => {
 
     // TMDB issue where it doesnt fallback to English when no overview is available in requested locale.
     if (!data.overview) {
-      const tvEnglish = await tmdb.getTvShow({ tvId: Number(req.params.id) });
+      const tvEnglish = await metadataProvider.getTvShow({
+        tvId: Number(req.params.id),
+      });
       data.overview = tvEnglish.overview;
     }
 
@@ -53,10 +66,18 @@ tvRoutes.get('/:id', async (req, res, next) => {
 });
 
 tvRoutes.get('/:id/season/:seasonNumber', async (req, res, next) => {
-  const tmdb = new TheMovieDb();
-
   try {
-    const season = await tmdb.getTvSeason({
+    const tmdb = new TheMovieDb();
+    const tmdbTv = await tmdb.getTvShow({
+      tvId: Number(req.params.id),
+    });
+    const metadataProvider = tmdbTv.keywords.results.some(
+      (keyword: TmdbKeyword) => keyword.id === ANIME_KEYWORD_ID
+    )
+      ? await getMetadataProvider('anime')
+      : await getMetadataProvider('tv');
+
+    const season = await metadataProvider.getTvSeason({
       tvId: Number(req.params.id),
       seasonNumber: Number(req.params.seasonNumber),
       language: (req.query.language as string) ?? req.locale,

server/routes/user/usersettings.ts

@@ -4,10 +4,13 @@ import { ApiErrorCode } from '@server/constants/error';
 import { MediaServerType } from '@server/constants/server';
 import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
+import { LinkedAccount } from '@server/entity/LinkedAccount';
 import { User } from '@server/entity/User';
 import { UserSettings } from '@server/entity/UserSettings';
 import type {
   UserSettingsGeneralResponse,
+  UserSettingsLinkedAccount,
+  UserSettingsLinkedAccountResponse,
   UserSettingsNotificationsResponse,
 } from '@server/interfaces/api/userSettingsInterfaces';
 import { Permission } from '@server/lib/permissions';
@@ -18,7 +21,7 @@ import { ApiError } from '@server/types/error';
 import { getHostname } from '@server/utils/getHostname';
 import { Router } from 'express';
 import net from 'net';
-import { Not } from 'typeorm';
+import { In, Not, type FindOptionsWhere } from 'typeorm';
 import { canMakePermissionsChange } from '.';
 
 const isOwnProfile = (): Middleware => {
@@ -546,6 +549,73 @@ userSettingsRoutes.delete<{ id: string }>(
   }
 );
 
+userSettingsRoutes.get<{ id: string }, UserSettingsLinkedAccountResponse>(
+  '/linked-accounts',
+  isOwnProfileOrAdmin(),
+  async (req, res) => {
+    const settings = getSettings();
+    if (!settings.main.oidcLogin) {
+      // don't show any linked accounts if OIDC login is disabled
+      return res.status(200).json([]);
+    }
+
+    const activeProviders = settings.oidc.providers.map((p) => p.slug);
+    const linkedAccountsRepository = getRepository(LinkedAccount);
+
+    const linkedAccounts = await linkedAccountsRepository.find({
+      relations: {
+        user: true,
+      },
+      where: {
+        provider: In(activeProviders),
+        user: {
+          id: Number(req.params.id),
+        },
+      },
+    });
+
+    const linkedAccountInfo = linkedAccounts.map((acc) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const provider = settings.oidc.providers.find(
+        (p) => p.slug === acc.provider
+      )!;
+
+      return {
+        id: acc.id,
+        username: acc.username,
+        provider: {
+          slug: provider.slug,
+          name: provider.name,
+          logo: provider.logo,
+        },
+      } satisfies UserSettingsLinkedAccount;
+    });
+
+    return res.status(200).json(linkedAccountInfo);
+  }
+);
+
+userSettingsRoutes.delete<{ id: string; acctId: string }>(
+  '/linked-accounts/:acctId',
+  isOwnProfileOrAdmin(),
+  async (req, res) => {
+    const linkedAccountsRepository = getRepository(LinkedAccount);
+    const condition: FindOptionsWhere<LinkedAccount> = {
+      id: Number(req.params.acctId),
+      user: {
+        id: Number(req.params.id),
+      },
+    };
+
+    if (await linkedAccountsRepository.exist({ where: condition })) {
+      await linkedAccountsRepository.delete(condition);
+      return res.status(204).send();
+    } else {
+      return res.status(404).send();
+    }
+  }
+);
+
 userSettingsRoutes.get<{ id: string }, UserSettingsNotificationsResponse>(
   '/notifications',
   isOwnProfileOrAdmin(),

server/templates/email/media-request/html.pug

@@ -53,10 +53,11 @@ div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
                       b(style='color: #9ca3af; font-weight: 700;')
                         | #{extra.name} 
                       | #{extra.value}
-              td(rowspan='2' style='width: 7rem;')
-                a(style='display: block; width: 7rem; overflow: hidden; border-radius: .375rem;' href=actionUrl)
-                  div(style='overflow: hidden; box-sizing: border-box; margin: 0px;')
-                    img(alt='' src=imageUrl style='box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;')
+              if imageUrl
+                td(rowspan='2' style='width: 7rem;')
+                  a(style='display: block; width: 7rem; overflow: hidden; border-radius: .375rem;' href=actionUrl)
+                    div(style='overflow: hidden; box-sizing: border-box; margin: 0px;')
+                      img(alt='' src=imageUrl style='box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;')
             tr
               td(style='font-size: .85em; color: #9ca3af; line-height: 1em; vertical-align: bottom; margin-right: 1rem')
                 span

server/types/languages.d.ts

@@ -0,0 +1,35 @@
+export type AvailableLocale =
+  | 'ar'
+  | 'bg'
+  | 'ca'
+  | 'cs'
+  | 'da'
+  | 'de'
+  | 'en'
+  | 'el'
+  | 'es'
+  | 'es-MX'
+  | 'fi'
+  | 'fr'
+  | 'hr'
+  | 'he'
+  | 'hi'
+  | 'hu'
+  | 'it'
+  | 'ja'
+  | 'ko'
+  | 'lt'
+  | 'nb-NO'
+  | 'nl'
+  | 'pl'
+  | 'pt-BR'
+  | 'pt-PT'
+  | 'ro'
+  | 'ru'
+  | 'sq'
+  | 'sr'
+  | 'sv'
+  | 'tr'
+  | 'uk'
+  | 'zh-CN'
+  | 'zh-TW';

server/utils/oidc.ts

@@ -0,0 +1,203 @@
+import type {
+  IdTokenClaims,
+  OidcProviderMetadata,
+  OidcStandardClaims,
+  OidcTokenResponse,
+} from '@server/interfaces/api/oidcInterfaces';
+import type { OidcProvider } from '@server/lib/settings';
+import type { Request } from 'express';
+import * as yup from 'yup';
+
+/** Fetch the issuer configuration from the OpenID Connect Discovery endpoint */
+export async function getOpenIdConfiguration(domain: string) {
+  // remove trailing slash from url if it exists and add /.well-known/openid-configuration path
+  const wellKnownUrl = new URL(
+    domain.replace(/\/$/, '') + '/.well-known/openid-configuration'
+  ).toString();
+
+  const wellKnownInfo: OidcProviderMetadata = await fetch(wellKnownUrl, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((r) => r.json());
+
+  return wellKnownInfo;
+}
+
+function getOpenIdCallbackUrl(req: Request, provider: OidcProvider) {
+  const callbackUrl = new URL(
+    `/login`,
+    `${req.protocol}://${req.headers.host}`
+  );
+  callbackUrl.searchParams.set('provider', provider.slug);
+  callbackUrl.searchParams.set('callback', 'true');
+  return callbackUrl.toString();
+}
+
+/** Generate authentication request url */
+export async function getOpenIdRedirectUrl(
+  req: Request,
+  provider: OidcProvider,
+  state: string
+) {
+  const wellKnownInfo = await getOpenIdConfiguration(provider.issuerUrl);
+  const url = new URL(wellKnownInfo.authorization_endpoint);
+  url.searchParams.set('response_type', 'code');
+  url.searchParams.set('client_id', provider.clientId);
+
+  url.searchParams.set('redirect_uri', getOpenIdCallbackUrl(req, provider));
+  url.searchParams.set('scope', provider.scopes ?? 'openid profile email');
+  url.searchParams.set('state', state);
+  return url.toString();
+}
+
+/** Exchange authorization code for token data */
+export async function fetchOpenIdTokenData(
+  req: Request,
+  provider: OidcProvider,
+  wellKnownInfo: OidcProviderMetadata,
+  code: string
+): Promise<OidcTokenResponse> {
+  const formData = new URLSearchParams();
+  formData.append('client_secret', provider.clientSecret);
+  formData.append('grant_type', 'authorization_code');
+  formData.append('redirect_uri', getOpenIdCallbackUrl(req, provider));
+  formData.append('client_id', provider.clientId);
+  formData.append('code', code);
+
+  return await fetch(wellKnownInfo.token_endpoint, {
+    method: 'POST',
+    body: formData,
+  }).then((r) => r.json());
+}
+
+export async function getOpenIdUserInfo(
+  wellKnownInfo: OidcProviderMetadata,
+  authToken: string
+) {
+  return fetch(wellKnownInfo.userinfo_endpoint, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      Accept: 'application/json',
+    },
+  }).then((r) => r.json());
+}
+
+class OidcAuthorizationError extends Error {}
+
+class OidcMissingKeyError extends OidcAuthorizationError {
+  constructor(public userInfo: FullUserInfo, public key: string) {
+    super(`Key ${key} was missing on OIDC userinfo but was expected.`);
+  }
+}
+
+type PrimitiveString = 'string' | 'boolean';
+type TypeFromName<T extends PrimitiveString> = T extends 'string'
+  ? string
+  : T extends 'boolean'
+  ? boolean
+  : unknown;
+
+export function tryGetUserInfoKey<T extends PrimitiveString>(
+  userInfo: FullUserInfo,
+  key: string,
+  expectedType: T
+): TypeFromName<T> {
+  if (!Object.hasOwn(userInfo, key) || typeof userInfo[key] !== expectedType) {
+    throw new OidcMissingKeyError(userInfo, key);
+  }
+
+  return userInfo[key] as TypeFromName<T>;
+}
+
+export function validateUserClaims(
+  userInfo: FullUserInfo,
+  requiredClaims: string[]
+) {
+  requiredClaims.some((claim) => {
+    const value = tryGetUserInfoKey(userInfo, claim, 'boolean');
+    if (!value)
+      throw new OidcAuthorizationError('User was missing a required claim.');
+  });
+}
+
+/** Generates a schema to validate ID token JWT and userinfo claims */
+export const createIdTokenSchema = ({
+  oidcDomain,
+  oidcClientId,
+  requiredClaims,
+}: {
+  oidcDomain: string;
+  oidcClientId: string;
+  requiredClaims: string[];
+}) => {
+  return yup.object().shape({
+    iss: yup
+      .string()
+      .oneOf(
+        [oidcDomain, `${oidcDomain}/`],
+        `The token iss value doesn't match the oidc_DOMAIN (${oidcDomain})`
+      )
+      .required("The token didn't come with an iss value."),
+    aud: yup.lazy((val) => {
+      // single audience
+      if (typeof val === 'string')
+        return yup
+          .string()
+          .oneOf(
+            [oidcClientId],
+            `The token aud value doesn't match the oidc_CLIENT_ID (${oidcClientId})`
+          )
+          .required("The token didn't come with an aud value.");
+      // several audiences
+      if (typeof val === 'object' && Array.isArray(val))
+        return yup
+          .array()
+          .of(yup.string())
+          .test(
+            'contains-client-id',
+            `The token aud value doesn't contain the oidc_CLIENT_ID (${oidcClientId})`,
+            (value) => !!(value && value.includes(oidcClientId))
+          );
+      // invalid type
+      return yup
+        .mixed()
+        .typeError('The token aud value is not a string or array.');
+    }),
+    exp: yup
+      .number()
+      .required()
+      .test(
+        'is_before_date',
+        'Token exp value is before current time.',
+        (value) => {
+          if (!value) return false;
+          if (value < Math.ceil(Date.now() / 1000)) return false;
+          return true;
+        }
+      ),
+    iat: yup
+      .number()
+      .required()
+      .test(
+        'is_before_one_day',
+        'Token was issued before one day ago and is now invalid.',
+        (value) => {
+          if (!value) return false;
+          const date = new Date();
+          date.setDate(date.getDate() - 1);
+          if (value < Math.ceil(Number(date) / 1000)) return false;
+          return true;
+        }
+      ),
+    // TODO: only require this for new user login
+    email: yup.string().required(),
+    // ensure all required claims are present and are booleans
+    ...requiredClaims.reduce(
+      (a, v) => ({ ...a, [v]: yup.boolean().required() }),
+      {}
+    ),
+  });
+};
+
+export type FullUserInfo = IdTokenClaims & OidcStandardClaims;

src/components/Common/Button/index.tsx

@@ -31,7 +31,7 @@ type BaseProps<P> = {
   ) => void;
 };
 
-type ButtonProps<P extends React.ElementType> = {
+export type ButtonProps<P extends React.ElementType> = {
   as?: P;
 } & MergeElementProps<P, BaseProps<P>>;
 

src/components/Common/LabeledCheckbox/index.tsx

@@ -1,31 +1,34 @@
 import { Field } from 'formik';
+import { useId } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface LabeledCheckboxProps {
-  id: string;
+  name: string;
   className?: string;
   label: string;
   description: string;
-  onChange: () => void;
+  onChange?: () => void;
   children?: React.ReactNode;
 }
 
 const LabeledCheckbox: React.FC<LabeledCheckboxProps> = ({
-  id,
+  name,
   className,
   label,
   description,
   onChange,
   children,
 }) => {
+  const id = useId();
+
   return (
     <>
       <div className={twMerge('relative flex items-start', className)}>
         <div className="flex h-6 items-center">
-          <Field type="checkbox" id={id} name={id} onChange={onChange} />
+          <Field type="checkbox" id={id} name={name} onChange={onChange} />
         </div>
         <div className="ml-3 text-sm leading-6">
-          <label htmlFor="localLogin" className="block">
+          <label htmlFor={id} className="block">
             <div className="flex flex-col">
               <span className="font-medium text-white">{label}</span>
               <span className="font-normal text-gray-400">{description}</span>

src/components/Layout/LanguagePicker/index.tsx

@@ -1,10 +1,10 @@
-import type { AvailableLocale } from '@app/context/LanguageContext';
 import { availableLanguages } from '@app/context/LanguageContext';
 import useClickOutside from '@app/hooks/useClickOutside';
 import useLocale from '@app/hooks/useLocale';
 import defineMessages from '@app/utils/defineMessages';
 import { Transition } from '@headlessui/react';
 import { LanguageIcon } from '@heroicons/react/24/solid';
+import type { AvailableLocale } from '@server/types/languages';
 import { useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 

src/components/Layout/index.tsx

@@ -3,11 +3,11 @@ import PullToRefresh from '@app/components/Layout/PullToRefresh';
 import SearchInput from '@app/components/Layout/SearchInput';
 import Sidebar from '@app/components/Layout/Sidebar';
 import UserDropdown from '@app/components/Layout/UserDropdown';
-import type { AvailableLocale } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
 import { ArrowLeftIcon, Bars3BottomLeftIcon } from '@heroicons/react/24/solid';
+import type { AvailableLocale } from '@server/types/languages';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import useSWR from 'swr';

src/components/Login/LoginButton.tsx

@@ -0,0 +1,35 @@
+import Button, { type ButtonProps } from '@app/components/Common/Button';
+import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
+import { type PropsWithChildren } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export type LoginButtonProps = ButtonProps<'button'> &
+  PropsWithChildren<{
+    loading?: boolean;
+  }>;
+
+export default function LoginButton({
+  loading,
+  className,
+  children,
+  ...buttonProps
+}: LoginButtonProps) {
+  return (
+    <Button
+      className={twMerge(
+        'relative flex-grow bg-transparent disabled:opacity-50',
+        className
+      )}
+      disabled={loading}
+      {...buttonProps}
+    >
+      {loading && (
+        <div className="absolute right-0 mr-4 h-4 w-4">
+          <SmallLoadingSpinner />
+        </div>
+      )}
+
+      {children}
+    </Button>
+  );
+}

src/components/Login/OidcLoginButton.tsx

@@ -0,0 +1,109 @@
+import defineMessages from '@app/utils/defineMessages';
+import type { PublicOidcProvider } from '@server/lib/settings';
+import axios, { isAxiosError } from 'axios';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import LoginButton from './LoginButton';
+
+const messages = defineMessages('components.Login', {
+  oidcLoginError: 'An error occurred while logging in with {provider}.',
+});
+
+async function processCallback(params: URLSearchParams, provider: string) {
+  const url = new URL(
+    `/api/v1/auth/oidc/callback/${encodeURIComponent(provider)}`,
+    window.location.origin
+  );
+  url.search = params.toString();
+
+  try {
+    const res = await axios.get(url.toString());
+
+    return {
+      type: 'success',
+      message: res.data,
+    };
+  } catch (e) {
+    if (isAxiosError(e) && e.response?.data?.message) {
+      return { type: 'error', message: e.response.data.message };
+    }
+
+    return {
+      type: 'error',
+      message: e.message,
+    };
+  }
+}
+
+type OidcLoginButtonProps = {
+  provider: PublicOidcProvider;
+  onError?: (message: string) => void;
+};
+
+export default function OidcLoginButton({
+  provider,
+  onError,
+}: OidcLoginButtonProps) {
+  const intl = useIntl();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(false);
+
+  const redirectToLogin = useCallback(async () => {
+    try {
+      const res = await axios.get<{ redirectUrl: string }>(
+        `/api/v1/auth/oidc/login/${provider.slug}`
+      );
+      window.location.href = res.data.redirectUrl;
+    } catch (e) {
+      setLoading(false);
+      onError?.(
+        intl.formatMessage(messages.oidcLoginError, {
+          provider: provider.name,
+        })
+      );
+    }
+  }, [provider, intl, onError]);
+
+  const handleCallback = useCallback(async () => {
+    const result = await processCallback(searchParams, provider.slug);
+    if (result.type === 'success') {
+      // redirect to homepage
+      router.push(result.message?.to ?? '/');
+    } else {
+      setLoading(false);
+      onError?.(
+        intl.formatMessage(messages.oidcLoginError, {
+          provider: provider.name,
+        })
+      );
+    }
+  }, [provider, searchParams, intl, onError, router]);
+
+  useEffect(() => {
+    if (loading) return;
+    const isCallback = searchParams.get('callback') === 'true';
+    const providerSlug = searchParams.get('provider');
+
+    if (providerSlug === provider.slug) {
+      setLoading(true);
+      if (isCallback) handleCallback();
+      else redirectToLogin();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <LoginButton loading={loading} onClick={() => redirectToLogin()}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={provider.logo || '/images/openid.svg'}
+        alt={provider.name}
+        className="mr-2 max-h-5 w-5"
+      />
+      <span>{provider.name}</span>
+    </LoginButton>
+  );
+}

src/components/Login/PlexLoginButton.tsx

@@ -1,9 +1,8 @@
 import PlexIcon from '@app/assets/services/plex.svg';
-import Button from '@app/components/Common/Button';
-import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import usePlexLogin from '@app/hooks/usePlexLogin';
 import defineMessages from '@app/utils/defineMessages';
 import { FormattedMessage } from 'react-intl';
+import LoginButton from './LoginButton';
 
 const messages = defineMessages('components.Login', {
   loginwithapp: 'Login with {appName}',
@@ -25,18 +24,12 @@ const PlexLoginButton = ({
   const { loading, login } = usePlexLogin({ onAuthToken, onError });
 
   return (
-    <Button
-      className="relative flex-1 border-[#cc7b19] bg-[rgba(204,123,25,0.3)] hover:border-[#cc7b19] hover:bg-[rgba(204,123,25,0.7)] disabled:opacity-50"
+    <LoginButton
+      className="border-[#cc7b19] bg-[rgba(204,123,25,0.3)] hover:border-[#cc7b19] hover:bg-[rgba(204,123,25,0.7)]"
       onClick={login}
-      disabled={loading || isProcessing}
+      loading={loading || isProcessing}
       data-testid="plex-login-button"
     >
-      {loading && (
-        <div className="absolute right-0 mr-4 h-4 w-4">
-          <SmallLoadingSpinner />
-        </div>
-      )}
-
       {large ? (
         <FormattedMessage
           {...messages.loginwithapp}
@@ -55,7 +48,7 @@ const PlexLoginButton = ({
       ) : (
         <PlexIcon className="w-8" />
       )}
-    </Button>
+    </LoginButton>
   );
 };
 

src/components/Login/index.tsx

@@ -1,12 +1,12 @@
 import EmbyLogo from '@app/assets/services/emby-icon-only.svg';
 import JellyfinLogo from '@app/assets/services/jellyfin-icon.svg';
 import PlexLogo from '@app/assets/services/plex.svg';
-import Button from '@app/components/Common/Button';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
 import JellyfinLogin from '@app/components/Login/JellyfinLogin';
 import LocalLogin from '@app/components/Login/LocalLogin';
+import OidcLoginButton from '@app/components/Login/OidcLoginButton';
 import PlexLoginButton from '@app/components/Login/PlexLoginButton';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
@@ -21,6 +21,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { CSSTransition, SwitchTransition } from 'react-transition-group';
 import useSWR from 'swr';
+import LoginButton from './LoginButton';
 
 const messages = defineMessages('components.Login', {
   signin: 'Sign In',
@@ -121,10 +122,9 @@ const Login = () => {
       ) : (
         settings.currentSettings.localLogin &&
         (mediaServerLogin ? (
-          <Button
+          <LoginButton
             key="jellyseerr"
             data-testid="jellyseerr-login-button"
-            className="flex-1 bg-transparent"
             onClick={() => setMediaServerLogin(false)}
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -134,19 +134,25 @@ const Login = () => {
               className="mr-2 h-5"
             />
             <span>{settings.currentSettings.applicationTitle}</span>
-          </Button>
+          </LoginButton>
         ) : (
-          <Button
+          <LoginButton
             key="mediaserver"
             data-testid="mediaserver-login-button"
-            className="flex-1 bg-transparent"
             onClick={() => setMediaServerLogin(true)}
           >
             <MediaServerLogo />
             <span>{mediaServerName}</span>
-          </Button>
+          </LoginButton>
         ))
       )),
+    ...settings.currentSettings.openIdProviders.map((provider) => (
+      <OidcLoginButton
+        key={provider.slug}
+        provider={provider}
+        onError={setError}
+      />
+    )),
   ].filter((o): o is JSX.Element => !!o);
 
   return (
@@ -197,46 +203,50 @@ const Login = () => {
               </div>
             </Transition>
             <div className="px-10 py-8">
-              <SwitchTransition mode="out-in">
-                <CSSTransition
-                  key={mediaServerLogin ? 'ms' : 'local'}
-                  nodeRef={loginRef}
-                  addEndListener={(done) => {
-                    loginRef.current?.addEventListener(
-                      'transitionend',
-                      done,
-                      false
-                    );
-                  }}
-                  onEntered={() => {
-                    document
-                      .querySelector<HTMLInputElement>('#email, #username')
-                      ?.focus();
-                  }}
-                  classNames={{
-                    appear: 'opacity-0',
-                    appearActive: 'transition-opacity duration-500 opacity-100',
-                    enter: 'opacity-0',
-                    enterActive: 'transition-opacity duration-500 opacity-100',
-                    exitActive: 'transition-opacity duration-0 opacity-0',
-                  }}
-                >
-                  <div ref={loginRef} className="button-container">
-                    {isJellyfin &&
-                    (mediaServerLogin ||
-                      !settings.currentSettings.localLogin) ? (
-                      <JellyfinLogin
-                        serverType={settings.currentSettings.mediaServerType}
-                        revalidate={revalidate}
-                      />
-                    ) : (
-                      settings.currentSettings.localLogin && (
-                        <LocalLogin revalidate={revalidate} />
-                      )
-                    )}
-                  </div>
-                </CSSTransition>
-              </SwitchTransition>
+              {loginFormVisible && (
+                <SwitchTransition mode="out-in">
+                  <CSSTransition
+                    key={mediaServerLogin ? 'ms' : 'local'}
+                    nodeRef={loginRef}
+                    addEndListener={(done) => {
+                      loginRef.current?.addEventListener(
+                        'transitionend',
+                        done,
+                        false
+                      );
+                    }}
+                    onEntered={() => {
+                      document
+                        .querySelector<HTMLInputElement>('#email, #username')
+                        ?.focus();
+                    }}
+                    classNames={{
+                      appear: 'opacity-0',
+                      appearActive:
+                        'transition-opacity duration-500 opacity-100',
+                      enter: 'opacity-0',
+                      enterActive:
+                        'transition-opacity duration-500 opacity-100',
+                      exitActive: 'transition-opacity duration-0 opacity-0',
+                    }}
+                  >
+                    <div ref={loginRef} className="button-container">
+                      {isJellyfin &&
+                      (mediaServerLogin ||
+                        !settings.currentSettings.localLogin) ? (
+                        <JellyfinLogin
+                          serverType={settings.currentSettings.mediaServerType}
+                          revalidate={revalidate}
+                        />
+                      ) : (
+                        settings.currentSettings.localLogin && (
+                          <LocalLogin revalidate={revalidate} />
+                        )
+                      )}
+                    </div>
+                  </CSSTransition>
+                </SwitchTransition>
+              )}
 
               {additionalLoginOptions.length > 0 &&
                 (loginFormVisible ? (

src/components/MetadataSelector/index.tsx

@@ -0,0 +1,91 @@
+import defineMessages from '@app/utils/defineMessages';
+import { useIntl } from 'react-intl';
+import Select, { type StylesConfig } from 'react-select';
+
+enum MetadataProviderType {
+  TMDB = 'tmdb',
+  TVDB = 'tvdb',
+}
+
+type MetadataProviderOptionType = {
+  testId?: string;
+  value: MetadataProviderType;
+  label: string;
+};
+
+const messages = defineMessages('components.MetadataSelector', {
+  tmdbLabel: 'The Movie Database (TMDB)',
+  tvdbLabel: 'TheTVDB',
+  selectMetdataProvider: 'Select a metadata provider',
+});
+
+interface MetadataSelectorProps {
+  testId: string;
+  value: MetadataProviderType;
+  onChange: (value: MetadataProviderType) => void;
+  isDisabled?: boolean;
+}
+
+const MetadataSelector = ({
+  testId = 'metadata-provider-selector',
+  value,
+  onChange,
+  isDisabled = false,
+}: MetadataSelectorProps) => {
+  const intl = useIntl();
+
+  const metadataProviderOptions: MetadataProviderOptionType[] = [
+    {
+      testId: 'tmdb-option',
+      value: MetadataProviderType.TMDB,
+      label: intl.formatMessage(messages.tmdbLabel),
+    },
+    {
+      testId: 'tvdb-option',
+      value: MetadataProviderType.TVDB,
+      label: intl.formatMessage(messages.tvdbLabel),
+    },
+  ];
+
+  const customStyles: StylesConfig<MetadataProviderOptionType, false> = {
+    option: (base) => ({
+      ...base,
+      display: 'flex',
+      alignItems: 'center',
+    }),
+    singleValue: (base) => ({
+      ...base,
+      display: 'flex',
+      alignItems: 'center',
+    }),
+  };
+
+  const formatOptionLabel = (option: MetadataProviderOptionType) => (
+    <div className="flex items-center">
+      <span data-testid={option.testId}>{option.label}</span>
+    </div>
+  );
+
+  return (
+    <div data-testid={testId}>
+      <Select
+        options={metadataProviderOptions}
+        isDisabled={isDisabled}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        value={metadataProviderOptions.find((option) => option.value === value)}
+        onChange={(selectedOption) => {
+          if (selectedOption) {
+            onChange(selectedOption.value);
+          }
+        }}
+        placeholder={intl.formatMessage(messages.selectMetdataProvider)}
+        styles={customStyles}
+        formatOptionLabel={formatOptionLabel}
+      />
+    </div>
+  );
+};
+
+export { MetadataProviderType };
+export default MetadataSelector;

src/components/Settings/EditOidcModal/index.tsx

@@ -0,0 +1,366 @@
+import Accordion from '@app/components/Common/Accordion';
+import Modal from '@app/components/Common/Modal';
+import SensitiveInput from '@app/components/Common/SensitiveInput';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { Transition } from '@headlessui/react';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import type { OidcProvider } from '@server/lib/settings';
+import axios from 'axios';
+import { Field, Formik, useFormikContext, type FieldAttributes } from 'formik';
+import { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import { twMerge } from 'tailwind-merge';
+import * as Yup from 'yup';
+
+const messages = defineMessages('settings.settings.SettingsOidc', {
+  required: '{field} is required',
+  url: '{field} must be a valid URL',
+  addoidc: 'Add New OpenID Connect Provider',
+  editoidc: 'Edit {name}',
+  oidcDomain: 'Issuer URL',
+  oidcDomainTip:
+    "The base URL of the identity provider's OpenID Connect endpoint",
+  oidcSlug: 'Provider Slug',
+  oidcSlugTip: 'Unique identifier for the provider',
+  oidcName: 'Provider Name',
+  oidcNameTip: 'Name of the provider which appears on the login screen',
+  oidcClientId: 'Client ID',
+  oidcClientIdTip: 'The Client ID assigned to Jellyseerr',
+  oidcClientSecret: 'Client Secret',
+  oidcClientSecretTip: 'The Client Secret assigned to Jellyseerr',
+  oidcLogo: 'Logo',
+  oidcLogoTip:
+    'The logo to display for the provider. Should be a URL or base64 encoded image',
+  oidcScopes: 'Scopes',
+  oidcScopesTip: 'Space-separated list of scopes to request from the provider',
+  oidcRequiredClaims: 'Required Claims',
+  oidcRequiredClaimsTip:
+    'Space-separated list of boolean claims that are required to log in',
+  oidcNewUserLogin: 'Allow New Users',
+  oidcNewUserLoginTip:
+    'Create accounts for new users logging in with this provider',
+  saveSuccess: 'OpenID Connect provider saved successfully!',
+  saveError: 'Failed to save OpenID Connect provider configuration',
+});
+
+interface EditOidcModalProps {
+  show: boolean;
+  provider?: OidcProvider;
+  onClose: () => void;
+  onOk: () => void;
+}
+
+function SlugField(props: FieldAttributes<unknown> & { readOnly?: boolean }) {
+  const {
+    values: { name },
+    setFieldValue,
+  } = useFormikContext<Partial<OidcProvider>>();
+
+  useEffect(() => {
+    if (!props.readOnly)
+      setFieldValue(props.name, name?.toLowerCase().replace(/\s/g, '-'));
+  }, [props.name, props.readOnly, name, setFieldValue]);
+
+  return <Field {...props} />;
+}
+
+export default function EditOidcModal(props: EditOidcModalProps) {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+
+  const errorMessage = (
+    field: keyof typeof messages,
+    message: keyof typeof messages = 'required'
+  ) =>
+    intl.formatMessage(messages[message], {
+      field: intl.formatMessage(messages[field]),
+    });
+  const oidcSettingsSchema = Yup.object().shape({
+    slug: Yup.string().required(errorMessage('oidcSlug')),
+    name: Yup.string().required(errorMessage('oidcName')),
+    issuerUrl: Yup.string()
+      .url(errorMessage('oidcDomain', 'url'))
+      .required(errorMessage('oidcDomain')),
+    clientId: Yup.string().required(errorMessage('oidcClientId')),
+    clientSecret: Yup.string().required(errorMessage('oidcClientSecret')),
+    logo: Yup.string(),
+    requiredClaims: Yup.string(),
+    scopes: Yup.string(),
+    newUserLogin: Yup.boolean(),
+  });
+
+  const onSubmit = async ({ slug, ...provider }: OidcProvider) => {
+    try {
+      await axios.put(`/api/v1/settings/oidc/${slug}`, provider);
+
+      addToast(intl.formatMessage(messages.saveSuccess), {
+        appearance: 'success',
+        autoDismiss: true,
+      });
+
+      props.onOk();
+    } catch (e) {
+      addToast(intl.formatMessage(messages.saveError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+  };
+
+  return (
+    <Transition show={props.show}>
+      <Formik
+        initialValues={{
+          slug: props.provider?.slug ?? '',
+          name: props.provider?.name ?? '',
+          issuerUrl: props.provider?.issuerUrl ?? '',
+          clientId: props.provider?.clientId ?? '',
+          clientSecret: props.provider?.clientSecret ?? '',
+          logo: props.provider?.logo,
+          requiredClaims: props.provider?.requiredClaims,
+          scopes: props.provider?.scopes,
+          newUserLogin: props.provider?.newUserLogin,
+        }}
+        validationSchema={oidcSettingsSchema}
+        onSubmit={onSubmit}
+        enableReinitialize
+      >
+        {({ handleSubmit, isValid, errors, touched }) => (
+          <Modal
+            onCancel={props.onClose}
+            cancelButtonProps={{ type: 'button' }}
+            okButtonType="primary"
+            okButtonProps={{ type: 'button' }}
+            okDisabled={!isValid}
+            onOk={() => handleSubmit()}
+            okText={intl.formatMessage(globalMessages.save)}
+            title={
+              props.provider
+                ? intl.formatMessage(messages.editoidc, {
+                    name: props.provider.name,
+                  })
+                : intl.formatMessage(messages.addoidc)
+            }
+          >
+            <div className="form-row">
+              <label htmlFor="oidcName" className="text-label">
+                {intl.formatMessage(messages.oidcName)}
+                <span className="label-required">*</span>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.oidcNameTip)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <Field id="oidcName" name="name" type="text" />
+                {errors.name &&
+                  touched.name &&
+                  typeof errors.name === 'string' && (
+                    <div className="error">{errors.name}</div>
+                  )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="oidcLogo" className="text-label">
+                {intl.formatMessage(messages.oidcLogo)}
+                <span className="label-tip">
+                  {intl.formatMessage(messages.oidcLogoTip)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <div className="relative">
+                  <Field
+                    id="oidcLogo"
+                    name="logo"
+                    type="text"
+                    className="pr-10"
+                  />
+                  <a
+                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 transition-colors hover:text-gray-200"
+                    href="https://selfh.st/icons"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    <MagnifyingGlassIcon className="h-4 w-4" />
+                  </a>
+                </div>
+                {errors.logo &&
+                  touched.logo &&
+                  typeof errors.logo === 'string' && (
+                    <div className="error">{errors.logo}</div>
+                  )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="oidcDomain" className="text-label">
+                {intl.formatMessage(messages.oidcDomain)}
+                <span className="label-required">*</span>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.oidcDomainTip)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <Field id="oidcDomain" name="issuerUrl" type="text" />
+                {errors.issuerUrl &&
+                  touched.issuerUrl &&
+                  typeof errors.issuerUrl === 'string' && (
+                    <div className="error">{errors.issuerUrl}</div>
+                  )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="oidcClientId" className="text-label">
+                {intl.formatMessage(messages.oidcClientId)}
+                <span className="label-required">*</span>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.oidcClientIdTip)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <Field id="oidcClientId" name="clientId" type="text" />
+                {errors.clientId &&
+                  touched.clientId &&
+                  typeof errors.clientId === 'string' && (
+                    <div className="error">{errors.clientId}</div>
+                  )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="oidcClientSecret" className="text-label">
+                {intl.formatMessage(messages.oidcClientSecret)}
+                <span className="label-required">*</span>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.oidcClientSecretTip)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <div className="flex">
+                  <SensitiveInput
+                    id="oidcClientSecret"
+                    name="clientSecret"
+                    as="field"
+                    autoComplete="new-password"
+                  />
+                </div>
+                {errors.clientSecret &&
+                  touched.clientSecret &&
+                  typeof errors.clientSecret === 'string' && (
+                    <div className="error">{errors.clientSecret}</div>
+                  )}
+              </div>
+            </div>
+
+            {/* Advanced Settings */}
+            <Accordion>
+              {({ openIndexes, AccordionContent, handleClick }) => (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => handleClick(0)}
+                    className="flex w-full items-center gap-0.5 py-4 font-bold text-gray-400"
+                  >
+                    <ChevronRightIcon
+                      width={18}
+                      className={twMerge(
+                        'transition-transform',
+                        openIndexes.includes(0) ? 'rotate-90' : ''
+                      )}
+                    />
+                    Advanced Settings
+                  </button>
+                  <AccordionContent isOpen={openIndexes.includes(0)}>
+                    <div className="form-row mt-0">
+                      <label htmlFor="oidcSlug" className="text-label">
+                        {intl.formatMessage(messages.oidcSlug)}
+                        <span className="label-required">*</span>
+                        <span className="label-tip">
+                          {intl.formatMessage(messages.oidcSlugTip)}
+                        </span>
+                      </label>
+                      <div className="form-input-area">
+                        <SlugField
+                          id="oidcSlug"
+                          name="slug"
+                          type="text"
+                          readOnly={props.provider != null}
+                          disabled={props.provider != null}
+                          className={props.provider != null ? 'opacity-50' : ''}
+                        />
+                        {errors.slug &&
+                          touched.slug &&
+                          typeof errors.slug === 'string' && (
+                            <div className="error">{errors.slug}</div>
+                          )}
+                      </div>
+                    </div>
+                    <div className="form-row">
+                      <label htmlFor="oidcScopes" className="text-label">
+                        {intl.formatMessage(messages.oidcScopes)}
+                        <span className="label-tip">
+                          {intl.formatMessage(messages.oidcScopesTip)}
+                        </span>
+                      </label>
+                      <div className="form-input-area">
+                        <Field id="oidcScopes" name="scopes" type="text" />
+                        {errors.scopes &&
+                          touched.scopes &&
+                          typeof errors.scopes === 'string' && (
+                            <div className="error">{errors.scopes}</div>
+                          )}
+                      </div>
+                    </div>
+                    <div className="form-row">
+                      <label
+                        htmlFor="oidcRequiredClaims"
+                        className="text-label"
+                      >
+                        {intl.formatMessage(messages.oidcRequiredClaims)}
+                        <span className="label-tip">
+                          {intl.formatMessage(messages.oidcRequiredClaimsTip)}
+                        </span>
+                      </label>
+                      <div className="form-input-area">
+                        <Field
+                          id="oidcRequiredClaims"
+                          name="requiredClaims"
+                          type="text"
+                        />
+                        {errors.requiredClaims &&
+                          touched.requiredClaims &&
+                          typeof errors.requiredClaims === 'string' && (
+                            <div className="error">{errors.requiredClaims}</div>
+                          )}
+                      </div>
+                    </div>
+                    <div className="form-row">
+                      <label htmlFor="oidcNewUserLogin" className="text-label">
+                        {intl.formatMessage(messages.oidcNewUserLogin)}
+                        <span className="label-tip">
+                          {intl.formatMessage(messages.oidcNewUserLoginTip)}
+                        </span>
+                      </label>
+                      <div className="form-input-area">
+                        <Field
+                          id="oidcNewUserLogin"
+                          name="newUserLogin"
+                          type="checkbox"
+                        />
+                        {errors.newUserLogin &&
+                          touched.newUserLogin &&
+                          typeof errors.newUserLogin === 'string' && (
+                            <div className="error">{errors.newUserLogin}</div>
+                          )}
+                      </div>
+                    </div>
+                  </AccordionContent>
+                </>
+              )}
+            </Accordion>
+          </Modal>
+        )}
+      </Formik>
+    </Transition>
+  );
+}

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -15,6 +15,7 @@ import * as Yup from 'yup';
 
 const messages = defineMessages('components.Settings.Notifications', {
   agentenabled: 'Enable Agent',
+  embedPoster: 'Embed Poster',
   botUsername: 'Bot Username',
   botAvatarUrl: 'Bot Avatar URL',
   webhookUrl: 'Webhook URL',
@@ -74,6 +75,7 @@ const NotificationsDiscord = () => {
     <Formik
       initialValues={{
         enabled: data.enabled,
+        embedPoster: data.embedPoster,
         types: data.types,
         botUsername: data?.options.botUsername,
         botAvatarUrl: data?.options.botAvatarUrl,
@@ -86,6 +88,7 @@ const NotificationsDiscord = () => {
         try {
           await axios.post('/api/v1/settings/notifications/discord', {
             enabled: values.enabled,
+            embedPoster: values.embedPoster,
             types: values.types,
             options: {
               botUsername: values.botUsername,
@@ -135,6 +138,7 @@ const NotificationsDiscord = () => {
             );
             await axios.post('/api/v1/settings/notifications/discord/test', {
               enabled: true,
+              embedPoster: values.embedPoster,
               types: values.types,
               options: {
                 botUsername: values.botUsername,
@@ -176,6 +180,14 @@ const NotificationsDiscord = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="name" className="text-label">
                 {intl.formatMessage(messages.webhookUrl)}

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -17,6 +17,7 @@ const messages = defineMessages('components.Settings.Notifications', {
   validationSmtpHostRequired: 'You must provide a valid hostname or IP address',
   validationSmtpPortRequired: 'You must provide a valid port number',
   agentenabled: 'Enable Agent',
+  embedPoster: 'Embed Poster',
   userEmailRequired: 'Require user email',
   emailsender: 'Sender Address',
   smtpHost: 'SMTP Host',
@@ -122,6 +123,7 @@ const NotificationsEmail = () => {
     <Formik
       initialValues={{
         enabled: data.enabled,
+        embedPoster: data.embedPoster,
         userEmailRequired: data.options.userEmailRequired,
         emailFrom: data.options.emailFrom,
         smtpHost: data.options.smtpHost,
@@ -145,6 +147,7 @@ const NotificationsEmail = () => {
         try {
           await axios.post('/api/v1/settings/notifications/email', {
             enabled: values.enabled,
+            embedPoster: values.embedPoster,
             options: {
               userEmailRequired: values.userEmailRequired,
               emailFrom: values.emailFrom,
@@ -194,6 +197,7 @@ const NotificationsEmail = () => {
             );
             await axios.post('/api/v1/settings/notifications/email/test', {
               enabled: true,
+              embedPoster: values.embedPoster,
               options: {
                 emailFrom: values.emailFrom,
                 smtpHost: values.smtpHost,
@@ -241,6 +245,14 @@ const NotificationsEmail = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="userEmailRequired" className="checkbox-label">
                 {intl.formatMessage(messages.userEmailRequired)}

src/components/Settings/Notifications/NotificationsNtfy/index.tsx

@@ -19,6 +19,7 @@ const messages = defineMessages(
   'components.Settings.Notifications.NotificationsNtfy',
   {
     agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
     url: 'Server root URL',
     topic: 'Topic',
     usernamePasswordAuth: 'Username + Password authentication',
@@ -80,6 +81,7 @@ const NotificationsNtfy = () => {
     <Formik
       initialValues={{
         enabled: data?.enabled,
+        embedPoster: data?.embedPoster,
         types: data?.types,
         url: data?.options.url,
         topic: data?.options.topic,
@@ -94,6 +96,7 @@ const NotificationsNtfy = () => {
         try {
           await axios.post('/api/v1/settings/notifications/ntfy', {
             enabled: values.enabled,
+            embedPoster: values.embedPoster,
             types: values.types,
             options: {
               url: values.url,
@@ -188,6 +191,14 @@ const NotificationsNtfy = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="url" className="text-label">
                 {intl.formatMessage(messages.url)}

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -17,6 +17,7 @@ const messages = defineMessages(
   'components.Settings.Notifications.NotificationsPushover',
   {
     agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
     accessToken: 'Application API Token',
     accessTokenTip:
       '<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Jellyseerr',
@@ -86,6 +87,7 @@ const NotificationsPushover = () => {
     <Formik
       initialValues={{
         enabled: data?.enabled,
+        embedPoster: data?.embedPoster,
         types: data?.types,
         accessToken: data?.options.accessToken,
         userToken: data?.options.userToken,
@@ -96,6 +98,7 @@ const NotificationsPushover = () => {
         try {
           await axios.post('/api/v1/settings/notifications/pushover', {
             enabled: values.enabled,
+            embedPoster: values.embedPoster,
             types: values.types,
             options: {
               accessToken: values.accessToken,
@@ -142,6 +145,7 @@ const NotificationsPushover = () => {
             );
             await axios.post('/api/v1/settings/notifications/pushover/test', {
               enabled: true,
+              embedPoster: values.embedPoster,
               types: values.types,
               options: {
                 accessToken: values.accessToken,
@@ -181,6 +185,14 @@ const NotificationsPushover = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="accessToken" className="text-label">
                 {intl.formatMessage(messages.accessToken)}

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -16,6 +16,7 @@ const messages = defineMessages(
   'components.Settings.Notifications.NotificationsSlack',
   {
     agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
     webhookUrl: 'Webhook URL',
     webhookUrlTip:
       'Create an <WebhookLink>Incoming Webhook</WebhookLink> integration',
@@ -59,6 +60,7 @@ const NotificationsSlack = () => {
     <Formik
       initialValues={{
         enabled: data.enabled,
+        embedPoster: data.embedPoster,
         types: data.types,
         webhookUrl: data.options.webhookUrl,
       }}
@@ -67,6 +69,7 @@ const NotificationsSlack = () => {
         try {
           await axios.post('/api/v1/settings/notifications/slack', {
             enabled: values.enabled,
+            embedPoster: values.embedPoster,
             types: values.types,
             options: {
               webhookUrl: values.webhookUrl,
@@ -111,6 +114,7 @@ const NotificationsSlack = () => {
             );
             await axios.post('/api/v1/settings/notifications/slack/test', {
               enabled: true,
+              embedPoster: values.embedPoster,
               types: values.types,
               options: {
                 webhookUrl: values.webhookUrl,
@@ -148,6 +152,14 @@ const NotificationsSlack = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="name" className="text-label">
                 {intl.formatMessage(messages.webhookUrl)}

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -15,6 +15,7 @@ import * as Yup from 'yup';
 
 const messages = defineMessages('components.Settings.Notifications', {
   agentenabled: 'Enable Agent',
+  embedPoster: 'Embed Poster',
   botUsername: 'Bot Username',
   botUsernameTip:
     'Allow users to also start a chat with your bot and configure their own notifications',
@@ -89,6 +90,7 @@ const NotificationsTelegram = () => {
     <Formik
       initialValues={{
         enabled: data?.enabled,
+        embedPoster: data?.embedPoster,
         types: data?.types,
         botUsername: data?.options.botUsername,
         botAPI: data?.options.botAPI,
@@ -101,6 +103,7 @@ const NotificationsTelegram = () => {
         try {
           await axios.post('/api/v1/settings/notifications/telegram', {
             enabled: values.enabled,
+            embedPoster: values.embedPoster,
             types: values.types,
             options: {
               botAPI: values.botAPI,
@@ -191,6 +194,14 @@ const NotificationsTelegram = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="embedPoster" className="checkbox-label">
+                {intl.formatMessage(messages.embedPoster)}
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="embedPoster" name="embedPoster" />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="botAPI" className="text-label">
                 {intl.formatMessage(messages.botAPI)}

src/components/Settings/Notifications/NotificationsWebPush/index.tsx

@@ -15,6 +15,7 @@ const messages = defineMessages(
   'components.Settings.Notifications.NotificationsWebPush',
   {
     agentenabled: 'Enable Agent',
+    embedPoster: 'Embed Poster',
     webpushsettingssaved: 'Web push notification settings saved successfully!',
     webpushsettingsfailed: 'Web push notification settings failed to save.',
     toastWebPushTestSending: 'Sending web push test notification…',
@@ -55,11 +56,13 @@ const NotificationsWebPush = () => {
       <Formik
         initialValues={{
           enabled: data.enabled,
+          embedPoster: data.embedPoster,
         }}
         onSubmit={async (values) => {
           try {
             await axios.post('/api/v1/settings/notifications/webpush', {
               enabled: values.enabled,
+              embedPoster: values.embedPoster,
               options: {},
             });
             mutate('/api/v1/settings/public');
@@ -77,7 +80,7 @@ const NotificationsWebPush = () => {
           }
         }}
       >
-        {({ isSubmitting }) => {
+        {({ isSubmitting, values }) => {
           const testSettings = async () => {
             setIsTesting(true);
             let toastId: string | undefined;
@@ -94,6 +97,7 @@ const NotificationsWebPush = () => {
               );
               await axios.post('/api/v1/settings/notifications/webpush/test', {
                 enabled: true,
+                embedPoster: values.embedPoster,
                 options: {},
               });
 
@@ -128,6 +132,15 @@ const NotificationsWebPush = () => {
                   <Field type="checkbox" id="enabled" name="enabled" />
                 </div>
               </div>
+              <div className="form-row">
+                <label htmlFor="embedPoster" className="checkbox-label">
+                  {intl.formatMessage(messages.embedPoster)}
+                  <span className="label-required">*</span>
+                </label>
+                <div className="form-input-area">
+                  <Field type="checkbox" id="embedPoster" name="embedPoster" />
+                </div>
+              </div>
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="ml-3 inline-flex rounded-md shadow-sm">

src/components/Settings/SettingsLayout.tsx

@@ -18,6 +18,7 @@ const messages = defineMessages('components.Settings', {
   menuLogs: 'Logs',
   menuJobs: 'Jobs & Cache',
   menuAbout: 'About',
+  menuMetadataProviders: 'Metadata Providers',
 });
 
 type SettingsLayoutProps = {
@@ -59,6 +60,11 @@ const SettingsLayout = ({ children }: SettingsLayoutProps) => {
       route: '/settings/network',
       regex: /^\/settings\/network/,
     },
+    {
+      text: intl.formatMessage(messages.menuMetadataProviders),
+      route: '/settings/metadata',
+      regex: /^\/settings\/metadata/,
+    },
     {
       text: intl.formatMessage(messages.menuNotifications),
       route: '/settings/notifications/email',

src/components/Settings/SettingsMain/index.tsx

@@ -7,7 +7,6 @@ import LanguageSelector from '@app/components/LanguageSelector';
 import RegionSelector from '@app/components/RegionSelector';
 import CopyButton from '@app/components/Settings/CopyButton';
 import SettingsBadge from '@app/components/Settings/SettingsBadge';
-import type { AvailableLocale } from '@app/context/LanguageContext';
 import { availableLanguages } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import { Permission, useUser } from '@app/hooks/useUser';
@@ -18,6 +17,7 @@ import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import type { UserSettingsGeneralResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import type { MainSettings } from '@server/lib/settings';
+import type { AvailableLocale } from '@server/types/languages';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useIntl } from 'react-intl';

src/components/Settings/SettingsMetadata.tsx

@@ -0,0 +1,476 @@
+import Badge from '@app/components/Common/Badge';
+import Button from '@app/components/Common/Button';
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import PageTitle from '@app/components/Common/PageTitle';
+import MetadataSelector, {
+  MetadataProviderType,
+} from '@app/components/MetadataSelector';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
+import { Form, Formik } from 'formik';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+
+const messages = defineMessages('components.Settings', {
+  metadataProviderSettings: 'Metadata Providers',
+  general: 'General',
+  settings: 'Settings',
+  seriesMetadataProvider: 'Series metadata provider',
+  animeMetadataProvider: 'Anime metadata provider',
+  metadataSettings: 'Settings for metadata provider',
+  clickTest:
+    'Click on the "Test" button to check connectivity with metadata providers',
+  notTested: 'Not Tested',
+  failed: 'Does not work',
+  operational: 'Operational',
+  providerStatus: 'Metadata Provider Status',
+  chooseProvider: 'Choose metadata providers for different content types',
+  metadataProviderSelection: 'Metadata Provider Selection',
+  tmdbProviderDoesnotWork:
+    'TMDB provider does not work, please select another metadata provider',
+  tvdbProviderDoesnotWork:
+    'TVDB provider does not work, please select another metadata provider',
+  allChosenProvidersAreOperational:
+    'All chosen metadata providers are operational',
+  connectionTestFailed: 'Connection test failed',
+  failedToSaveMetadataSettings: 'Failed to save metadata provider settings',
+  metadataSettingsSaved: 'Metadata provider settings saved',
+});
+
+type ProviderStatus = 'ok' | 'not tested' | 'failed';
+
+interface ProviderResponse {
+  tvdb: ProviderStatus;
+  tmdb: ProviderStatus;
+}
+
+interface MetadataValues {
+  tv: MetadataProviderType;
+  anime: MetadataProviderType;
+}
+
+interface MetadataSettings {
+  metadata: MetadataValues;
+}
+
+const SettingsMetadata = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const [isTesting, setIsTesting] = useState(false);
+  const defaultStatus: ProviderResponse = {
+    tmdb: 'not tested',
+    tvdb: 'not tested',
+  };
+
+  const [providerStatus, setProviderStatus] =
+    useState<ProviderResponse>(defaultStatus);
+
+  const { data, error } = useSWR<MetadataSettings>(
+    '/api/v1/settings/metadatas',
+    async (url: string) => {
+      const response = await axios.get<{
+        tv: MetadataProviderType;
+        anime: MetadataProviderType;
+      }>(url);
+
+      return {
+        metadata: {
+          tv: response.data.tv,
+          anime: response.data.anime,
+        },
+      };
+    }
+  );
+
+  const testConnection = async (
+    values: MetadataValues
+  ): Promise<ProviderResponse> => {
+    const useTmdb =
+      values.tv === MetadataProviderType.TMDB ||
+      values.anime === MetadataProviderType.TMDB;
+    const useTvdb =
+      values.tv === MetadataProviderType.TVDB ||
+      values.anime === MetadataProviderType.TVDB;
+
+    const testData = {
+      tmdb: useTmdb,
+      tvdb: useTvdb,
+    };
+
+    try {
+      const response = await axios.post<{
+        success: boolean;
+        tests: ProviderResponse;
+      }>('/api/v1/settings/metadatas/test', testData);
+
+      const newStatus: ProviderResponse = {
+        tmdb: useTmdb ? response.data.tests.tmdb : 'not tested',
+        tvdb: useTvdb ? response.data.tests.tvdb : 'not tested',
+      };
+
+      setProviderStatus(newStatus);
+      return newStatus;
+    } catch (error) {
+      if (axios.isAxiosError(error) && error.response) {
+        // If we receive an error response with a valid format
+        const errorData = error.response.data as {
+          success: boolean;
+          tests: ProviderResponse;
+        };
+
+        if (errorData.tests) {
+          const newStatus: ProviderResponse = {
+            tmdb: useTmdb ? errorData.tests.tmdb : 'not tested',
+            tvdb: useTvdb ? errorData.tests.tvdb : 'not tested',
+          };
+
+          setProviderStatus(newStatus);
+          return newStatus;
+        }
+      }
+
+      // In case of error without usable data
+      throw new Error('Failed to test connection');
+    }
+  };
+
+  const saveSettings = async (
+    values: MetadataValues
+  ): Promise<MetadataSettings> => {
+    try {
+      const response = await axios.put<{
+        success: boolean;
+        tv: MetadataProviderType;
+        anime: MetadataProviderType;
+        tests?: {
+          tvdb: ProviderStatus;
+          tmdb: ProviderStatus;
+        };
+      }>('/api/v1/settings/metadatas', {
+        tv: values.tv,
+        anime: values.anime,
+      });
+
+      // Update metadata provider status if available
+      if (response.data.tests) {
+        const mapStatusValue = (status: string): ProviderStatus => {
+          if (status === 'ok') return 'ok';
+          if (status === 'failed') return 'failed';
+          return 'not tested';
+        };
+
+        setProviderStatus({
+          tmdb: mapStatusValue(response.data.tests.tmdb),
+          tvdb: mapStatusValue(response.data.tests.tvdb),
+        });
+      }
+
+      // Adapt the response to the format expected by the component
+      return {
+        metadata: {
+          tv: response.data.tv,
+          anime: response.data.anime,
+        },
+      };
+    } catch (error) {
+      // Retrieve test data in case of error
+      if (axios.isAxiosError(error) && error.response?.data) {
+        const errorData = error.response.data as {
+          success: boolean;
+          tests?: {
+            tvdb: string;
+            tmdb: string;
+          };
+        };
+
+        // If test data is available in the error response
+        if (errorData.tests) {
+          const mapStatusValue = (status: string): ProviderStatus => {
+            if (status === 'ok') return 'ok';
+            if (status === 'failed') return 'failed';
+            return 'not tested';
+          };
+
+          // Update metadata provider status with error data
+          setProviderStatus({
+            tmdb: mapStatusValue(errorData.tests.tmdb),
+            tvdb: mapStatusValue(errorData.tests.tvdb),
+          });
+        }
+      }
+
+      throw new Error('Failed to save Metadata settings');
+    }
+  };
+
+  const getStatusClass = (status: ProviderStatus): string => {
+    switch (status) {
+      case 'ok':
+        return 'text-green-500';
+      case 'not tested':
+        return 'text-yellow-500';
+      case 'failed':
+        return 'text-red-500';
+    }
+  };
+
+  const getStatusMessage = (status: ProviderStatus): string => {
+    switch (status) {
+      case 'ok':
+        return intl.formatMessage(messages.operational);
+      case 'not tested':
+        return intl.formatMessage(messages.notTested);
+      case 'failed':
+        return intl.formatMessage(messages.failed);
+    }
+  };
+
+  const getBadgeType = (
+    status: ProviderStatus
+  ):
+    | 'default'
+    | 'primary'
+    | 'danger'
+    | 'warning'
+    | 'success'
+    | 'dark'
+    | 'light'
+    | undefined => {
+    switch (status) {
+      case 'ok':
+        return 'success';
+      case 'not tested':
+        return 'warning';
+      case 'failed':
+        return 'danger';
+    }
+  };
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  const initialValues: MetadataValues = data?.metadata || {
+    tv: MetadataProviderType.TMDB,
+    anime: MetadataProviderType.TMDB,
+  };
+
+  return (
+    <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.general),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
+
+      <div className="mb-6">
+        <h3 className="heading">
+          {intl.formatMessage(messages.metadataProviderSettings)}
+        </h3>
+        <p className="description">
+          {intl.formatMessage(messages.metadataSettings)}
+        </p>
+      </div>
+
+      <div className="mb-6 rounded-lg bg-gray-800 p-4">
+        <h4 className="mb-3 text-lg font-medium">
+          {intl.formatMessage(messages.providerStatus)}
+        </h4>
+        <div className="flex flex-col space-y-3">
+          <div className="flex items-center">
+            <span className="mr-2 w-24">TheMovieDB:</span>
+            <span
+              className={`text-sm ${getStatusClass(providerStatus.tmdb)}`}
+              data-testid="tmdb-status-container"
+            >
+              <Badge badgeType={getBadgeType(providerStatus.tmdb)}>
+                {getStatusMessage(providerStatus.tmdb)}
+              </Badge>
+            </span>
+          </div>
+          <div className="flex items-center">
+            <span className="mr-2 w-24">TheTVDB:</span>
+            <span
+              className={`text-sm ${getStatusClass(providerStatus.tvdb)}`}
+              data-testid="tvdb-status"
+            >
+              <Badge badgeType={getBadgeType(providerStatus.tvdb)}>
+                {getStatusMessage(providerStatus.tvdb)}
+              </Badge>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="section">
+        <Formik
+          initialValues={{ metadata: initialValues }}
+          onSubmit={async (values) => {
+            try {
+              const result = await saveSettings(values.metadata);
+
+              if (data) {
+                data.metadata = result.metadata;
+              }
+
+              addToast(intl.formatMessage(messages.metadataSettingsSaved), {
+                appearance: 'success',
+              });
+            } catch (e) {
+              addToast(
+                intl.formatMessage(messages.failedToSaveMetadataSettings),
+                {
+                  appearance: 'error',
+                }
+              );
+            }
+          }}
+        >
+          {({ isSubmitting, isValid, values, setFieldValue }) => {
+            return (
+              <Form className="section" data-testid="settings-main-form">
+                <div className="mb-6">
+                  <h2 className="heading">
+                    {intl.formatMessage(messages.metadataProviderSelection)}
+                  </h2>
+                  <p className="description">
+                    {intl.formatMessage(messages.chooseProvider)}
+                  </p>
+                </div>
+
+                <div className="form-row">
+                  <label
+                    htmlFor="tv-metadata-provider"
+                    className="checkbox-label"
+                  >
+                    <span className="mr-2">
+                      {intl.formatMessage(messages.seriesMetadataProvider)}
+                    </span>
+                  </label>
+                  <div className="form-input-area">
+                    <MetadataSelector
+                      testId="tv-metadata-provider-selector"
+                      value={values.metadata.tv}
+                      onChange={(value) => setFieldValue('metadata.tv', value)}
+                      isDisabled={isSubmitting}
+                    />
+                  </div>
+                </div>
+
+                <div className="form-row">
+                  <label
+                    htmlFor="anime-metadata-provider"
+                    className="checkbox-label"
+                  >
+                    <span className="mr-2">
+                      {intl.formatMessage(messages.animeMetadataProvider)}
+                    </span>
+                  </label>
+                  <div className="form-input-area">
+                    <MetadataSelector
+                      testId="anime-metadata-provider-selector"
+                      value={values.metadata.anime}
+                      onChange={(value) =>
+                        setFieldValue('metadata.anime', value)
+                      }
+                      isDisabled={isSubmitting}
+                    />
+                  </div>
+                </div>
+
+                <div className="actions">
+                  <div className="flex justify-end">
+                    <span className="ml-3 inline-flex rounded-md shadow-sm">
+                      <Button
+                        buttonType="warning"
+                        type="button"
+                        disabled={isSubmitting || !isValid}
+                        onClick={async () => {
+                          setIsTesting(true);
+                          try {
+                            const resp = await testConnection(values.metadata);
+
+                            if (resp.tvdb === 'failed') {
+                              addToast(
+                                intl.formatMessage(
+                                  messages.tvdbProviderDoesnotWork
+                                ),
+                                {
+                                  appearance: 'error',
+                                  autoDismiss: true,
+                                }
+                              );
+                            } else if (resp.tmdb === 'failed') {
+                              addToast(
+                                intl.formatMessage(
+                                  messages.tmdbProviderDoesnotWork
+                                ),
+                                {
+                                  appearance: 'error',
+                                  autoDismiss: true,
+                                }
+                              );
+                            } else {
+                              addToast(
+                                intl.formatMessage(
+                                  messages.allChosenProvidersAreOperational
+                                ),
+                                {
+                                  appearance: 'success',
+                                }
+                              );
+                            }
+                          } catch (e) {
+                            addToast(
+                              intl.formatMessage(messages.connectionTestFailed),
+                              {
+                                appearance: 'error',
+                                autoDismiss: true,
+                              }
+                            );
+                          } finally {
+                            setIsTesting(false);
+                          }
+                        }}
+                      >
+                        <BeakerIcon />
+                        <span>
+                          {isTesting
+                            ? intl.formatMessage(globalMessages.testing)
+                            : intl.formatMessage(globalMessages.test)}
+                        </span>
+                      </Button>
+                    </span>
+
+                    <span className="ml-3 inline-flex rounded-md shadow-sm">
+                      <Button
+                        data-testid="metadata-save-button"
+                        buttonType="primary"
+                        type="submit"
+                        disabled={isSubmitting || !isValid || isTesting}
+                      >
+                        <ArrowDownOnSquareIcon />
+                        <span>
+                          {isSubmitting
+                            ? intl.formatMessage(globalMessages.saving)
+                            : intl.formatMessage(globalMessages.save)}
+                        </span>
+                      </Button>
+                    </span>
+                  </div>
+                </div>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+};
+
+export default SettingsMetadata;

src/components/Settings/SettingsNetwork/index.tsx

@@ -126,7 +126,7 @@ const SettingsNetwork = () => {
                 proxy: {
                   enabled: values.proxyEnabled,
                   hostname: values.proxyHostname,
-                  port: values.proxyPort,
+                  port: Number(values.proxyPort),
                   useSsl: values.proxySsl,
                   user: values.proxyUser,
                   password: values.proxyPassword,

src/components/Settings/SettingsOidc/index.tsx

@@ -0,0 +1,164 @@
+import Button from '@app/components/Common/Button';
+import ConfirmButton from '@app/components/Common/ConfirmButton';
+import Modal from '@app/components/Common/Modal';
+import EditOidcModal from '@app/components/Settings/EditOidcModal';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { Transition } from '@headlessui/react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/solid';
+import type { OidcProvider, OidcSettings } from '@server/lib/settings';
+import axios from 'axios';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+
+const messages = defineMessages('components.Settings.SettingsOidc', {
+  configureoidc: 'Configure OpenID Connect',
+  addOidcProvider: 'Add OpenID Connect Provider',
+  oidcMatchUsername: 'Allow {mediaServerName} Usernames',
+  oidcMatchUsernameTip:
+    'Match OIDC users with their {mediaServerName} accounts by username',
+  oidcAutomaticLogin: 'Automatic Login',
+  oidcAutomaticLoginTip:
+    'Automatically navigate to the OIDC login and logout pages. This functionality ' +
+    'only supported when OIDC is the exclusive login method.',
+  deleteError: 'Failed to delete OpenID Connect provider',
+});
+
+interface SettingsOidcProps {
+  show: boolean;
+  onOk?: () => void;
+}
+
+export default function SettingsOidc(props: SettingsOidcProps) {
+  const { addToast } = useToasts();
+  const intl = useIntl();
+  const [editOidcModal, setEditOidcModal] = useState<{
+    open: boolean;
+    provider?: OidcProvider;
+  }>({
+    open: false,
+    provider: undefined,
+  });
+  const { data, mutate: revalidate } = useSWR<OidcSettings>(
+    '/api/v1/settings/oidc'
+  );
+
+  async function onDelete(provider: OidcProvider) {
+    try {
+      const response = await axios.delete<OidcSettings>(
+        `/api/v1/settings/oidc/${provider.slug}`
+      );
+      revalidate(response.data);
+    } catch (e) {
+      addToast(intl.formatMessage(messages.deleteError), {
+        autoDismiss: true,
+        appearance: 'error',
+      });
+    }
+  }
+
+  return (
+    <>
+      <Transition show={props.show}>
+        <Modal
+          okText={intl.formatMessage(globalMessages.close)}
+          onOk={props.onOk}
+          okButtonProps={{ type: 'button' }}
+          title={intl.formatMessage(messages.configureoidc)}
+          backgroundClickable={false}
+        >
+          <ul className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            {data?.providers.map((provider) => (
+              <li
+                className="col-span-1 flex flex-col justify-between rounded-lg bg-gray-700 shadow ring-1 ring-gray-500"
+                key={provider.slug}
+              >
+                <div className="jusfity-between flex w-full items-center space-x-6 p-6">
+                  <div className="flex-1 truncate">
+                    <div className="mb-2 flex items-center space-x-2">
+                      <h3 className="truncate text-lg font-bold leading-5 text-white">
+                        {provider.name}
+                      </h3>
+                    </div>
+                    <p className="mt-1 truncate text-sm leading-5 text-gray-300">
+                      <span className="mr-2 font-bold">Issuer URL</span>
+                      {provider.issuerUrl}
+                    </p>
+                    <p className="mt-1 truncate text-sm leading-5 text-gray-300">
+                      <span className="mr-2 font-bold">Client ID</span>
+                      {provider.clientId}
+                    </p>
+                  </div>
+
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={provider.logo || '/images/openid.svg'}
+                    alt={provider.name}
+                    className="h-10 w-10 flex-shrink-0"
+                  />
+                </div>
+
+                <div className="border-t border-gray-500">
+                  <div className="-mt-px flex">
+                    <div className="flex w-0 flex-1 border-r border-gray-500">
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setEditOidcModal({ open: true, provider })
+                        }
+                        className="focus:ring-blue relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
+                      >
+                        <PencilIcon className="mr-2 h-5 w-5" />
+                        <span>{intl.formatMessage(globalMessages.edit)}</span>
+                      </button>
+                    </div>
+                    <div className="-ml-px flex w-0 flex-1">
+                      <ConfirmButton
+                        onClick={() => onDelete(provider)}
+                        className="focus:ring-blue relative inline-flex w-0 flex-1 items-center justify-center rounded-none rounded-br-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
+                        confirmText={intl.formatMessage(
+                          globalMessages.areyousure
+                        )}
+                      >
+                        <TrashIcon className="mr-2 h-5 w-5" />
+                        <span>{intl.formatMessage(globalMessages.delete)}</span>
+                      </ConfirmButton>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            ))}
+
+            <li className="col-span-1 h-32 rounded-lg border-2 border-dashed border-gray-400 shadow sm:h-44">
+              <div className="flex h-full w-full items-center justify-center">
+                <Button
+                  type="button"
+                  buttonType="ghost"
+                  className="mt-3 mb-3"
+                  onClick={() => setEditOidcModal({ open: true })}
+                >
+                  <PlusIcon />
+                  <span>{intl.formatMessage(messages.addOidcProvider)}</span>
+                </Button>
+              </div>
+            </li>
+          </ul>
+        </Modal>
+      </Transition>
+
+      <EditOidcModal
+        show={editOidcModal.open}
+        provider={editOidcModal.provider}
+        onClose={() => setEditOidcModal((prev) => ({ ...prev, open: false }))}
+        onOk={() => {
+          revalidate();
+          // preserve the provider so that it doesn't disappear while the dialog is closing
+          setEditOidcModal((prev) => ({ ...prev, open: false }));
+        }}
+      />
+    </>
+  );
+}

src/components/Settings/SettingsUsers/index.tsx

@@ -4,14 +4,16 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
 import PermissionEdit from '@app/components/PermissionEdit';
 import QuotaSelector from '@app/components/QuotaSelector';
+import SettingsOidc from '@app/components/Settings/SettingsOidc';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
-import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
+import { ArrowDownOnSquareIcon, CogIcon } from '@heroicons/react/24/outline';
 import { MediaServerType } from '@server/constants/server';
 import type { MainSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
@@ -31,6 +33,9 @@ const messages = defineMessages('components.Settings.SettingsUsers', {
   mediaServerLogin: 'Enable {mediaServerName} Sign-In',
   mediaServerLoginTip:
     'Allow users to sign in using their {mediaServerName} account',
+  oidcLogin: 'Enable OpenID Connect Sign-In',
+  oidcLoginTip:
+    'Allow users to sign in using OpenID Connect identity providers',
   atLeastOneAuth: 'At least one authentication method must be selected.',
   newPlexLogin: 'Enable New {mediaServerName} Sign-In',
   newPlexLoginTip:
@@ -50,23 +55,25 @@ const SettingsUsers = () => {
     mutate: revalidate,
   } = useSWR<MainSettings>('/api/v1/settings/main');
   const settings = useSettings();
+  const [showOidcDialog, setShowOidcDialog] = useState(false);
 
   const schema = yup
     .object()
     .shape({
       localLogin: yup.boolean(),
       mediaServerLogin: yup.boolean(),
+      oidcLogin: yup.boolean(),
     })
     .test({
       name: 'atLeastOneAuth',
       test: function (values) {
-        const isValid = ['localLogin', 'mediaServerLogin'].some(
+        const isValid = ['localLogin', 'mediaServerLogin', 'oidcLogin'].some(
           (field) => !!values[field]
         );
 
         if (isValid) return true;
         return this.createError({
-          path: 'localLogin | mediaServerLogin',
+          path: 'localLogin | mediaServerLogin | oidcLogin',
           message: intl.formatMessage(messages.atLeastOneAuth),
         });
       },
@@ -106,6 +113,7 @@ const SettingsUsers = () => {
           initialValues={{
             localLogin: data?.localLogin,
             mediaServerLogin: data?.mediaServerLogin,
+            oidcLogin: data?.oidcLogin,
             newPlexLogin: data?.newPlexLogin,
             movieQuotaLimit: data?.defaultQuotas.movie.quotaLimit ?? 0,
             movieQuotaDays: data?.defaultQuotas.movie.quotaDays ?? 7,
@@ -120,6 +128,7 @@ const SettingsUsers = () => {
               await axios.post('/api/v1/settings/main', {
                 localLogin: values.localLogin,
                 mediaServerLogin: values.mediaServerLogin,
+                oidcLogin: values.oidcLogin,
                 newPlexLogin: values.newPlexLogin,
                 defaultQuotas: {
                   movie: {
@@ -163,16 +172,21 @@ const SettingsUsers = () => {
                       <span className="label-tip">
                         {intl.formatMessage(messages.loginMethodsTip)}
                       </span>
-                      {'localLogin | mediaServerLogin' in errors && (
+                      {'localLogin | mediaServerLogin | oidcLogin' in
+                        errors && (
                         <span className="error">
-                          {errors['localLogin | mediaServerLogin'] as string}
+                          {
+                            errors[
+                              'localLogin | mediaServerLogin | oidcLogin'
+                            ] as string
+                          }
                         </span>
                       )}
                     </span>
 
                     <div className="form-input-area max-w-lg">
                       <LabeledCheckbox
-                        id="localLogin"
+                        name="localLogin"
                         label={intl.formatMessage(messages.localLogin)}
                         description={intl.formatMessage(
                           messages.localLoginTip,
@@ -183,7 +197,7 @@ const SettingsUsers = () => {
                         }
                       />
                       <LabeledCheckbox
-                        id="mediaServerLogin"
+                        name="mediaServerLogin"
                         className="mt-4"
                         label={intl.formatMessage(
                           messages.mediaServerLogin,
@@ -200,10 +214,41 @@ const SettingsUsers = () => {
                           )
                         }
                       />
+                      <div className="mt-4 flex justify-between">
+                        <LabeledCheckbox
+                          name="oidcLogin"
+                          label={intl.formatMessage(
+                            messages.oidcLogin,
+                            mediaServerFormatValues
+                          )}
+                          description={intl.formatMessage(
+                            messages.oidcLoginTip,
+                            mediaServerFormatValues
+                          )}
+                          onChange={() => {
+                            const newValue = !values.oidcLogin;
+                            setFieldValue('oidcLogin', newValue);
+                            if (newValue) setShowOidcDialog(true);
+                          }}
+                        />
+                        {values.oidcLogin && (
+                          <CogIcon
+                            className="w-8 cursor-pointer text-gray-400"
+                            onClick={() => setShowOidcDialog(true)}
+                          />
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
 
+                {values.oidcLogin && (
+                  <SettingsOidc
+                    show={showOidcDialog}
+                    onOk={() => setShowOidcDialog(false)}
+                  />
+                )}
+
                 <div className="form-row">
                   <label htmlFor="newPlexLogin" className="checkbox-label">
                     {intl.formatMessage(

src/components/TvDetails/Season/index.tsx

@@ -60,7 +60,7 @@ const Season = ({ seasonNumber, tvId }: SeasonProps) => {
                     <CachedImage
                       type="tmdb"
                       className="rounded-lg object-contain"
-                      src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
+                      src={episode.stillPath}
                       alt=""
                       fill
                     />

src/components/TvDetails/index.tsx

@@ -35,6 +35,7 @@ import { sortCrewPriority } from '@app/utils/creditHelpers';
 import defineMessages from '@app/utils/defineMessages';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { Disclosure, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import {
   ArrowRightCircleIcon,
   CogIcon,
@@ -44,8 +45,7 @@ import {
   MinusCircleIcon,
   PlayIcon,
   StarIcon,
-} from '@heroicons/react/24/outline';
-import { ChevronDownIcon } from '@heroicons/react/24/solid';
+} from '@heroicons/react/24/solid';
 import type { RTRating } from '@server/api/rating/rottentomatoes';
 import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
 import { IssueStatus } from '@server/constants/issue';
@@ -118,9 +118,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
   const intl = useIntl();
   const { locale } = useLocale();
   const [showRequestModal, setShowRequestModal] = useState(false);
-  const [showManager, setShowManager] = useState(
-    router.query.manage == '1' ? true : false
-  );
+  const [showManager, setShowManager] = useState(router.query.manage == '1');
   const [showIssueModal, setShowIssueModal] = useState(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
@@ -156,7 +154,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
   );
 
   useEffect(() => {
-    setShowManager(router.query.manage == '1' ? true : false);
+    setShowManager(router.query.manage == '1');
   }, [router.query.manage]);
 
   const closeBlacklistModal = useCallback(

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

@@ -5,7 +5,6 @@ import PageTitle from '@app/components/Common/PageTitle';
 import LanguageSelector from '@app/components/LanguageSelector';
 import QuotaSelector from '@app/components/QuotaSelector';
 import RegionSelector from '@app/components/RegionSelector';
-import type { AvailableLocale } from '@app/context/LanguageContext';
 import { availableLanguages } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
@@ -16,6 +15,7 @@ import defineMessages from '@app/utils/defineMessages';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import { ApiErrorCode } from '@server/constants/error';
 import type { UserSettingsGeneralResponse } from '@server/interfaces/api/userSettingsInterfaces';
+import type { AvailableLocale } from '@server/types/languages';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';

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

@@ -12,6 +12,10 @@ import defineMessages from '@app/utils/defineMessages';
 import PlexOAuth from '@app/utils/plex';
 import { TrashIcon } from '@heroicons/react/24/solid';
 import { MediaServerType } from '@server/constants/server';
+import type {
+  UserSettingsLinkedAccount,
+  UserSettingsLinkedAccountResponse,
+} from '@server/interfaces/api/userSettingsInterfaces';
 import axios from 'axios';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
@@ -42,12 +46,20 @@ enum LinkedAccountType {
   Plex = 'Plex',
   Jellyfin = 'Jellyfin',
   Emby = 'Emby',
+  OpenIdConnect = 'oidc',
 }
 
-type LinkedAccount = {
-  type: LinkedAccountType;
-  username: string;
-};
+type LinkedAccount =
+  | {
+      type:
+        | LinkedAccountType.Plex
+        | LinkedAccountType.Emby
+        | LinkedAccountType.Jellyfin;
+      username: string;
+    }
+  | ({
+      type: LinkedAccountType.OpenIdConnect;
+    } & UserSettingsLinkedAccount);
 
 const UserLinkedAccountsSettings = () => {
   const intl = useIntl();
@@ -62,13 +74,21 @@ const UserLinkedAccountsSettings = () => {
   const { data: passwordInfo } = useSWR<{ hasPassword: boolean }>(
     user ? `/api/v1/user/${user?.id}/settings/password` : null
   );
+  const { data: linkedOidcAccounts, mutate: revalidateLinkedAccounts } =
+    useSWR<UserSettingsLinkedAccountResponse>(
+      user ? `/api/v1/user/${user?.id}/settings/linked-accounts` : null
+    );
   const [showJellyfinModal, setShowJellyfinModal] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const applicationName = settings.currentSettings.applicationTitle;
 
   const accounts: LinkedAccount[] = useMemo(() => {
-    const accounts: LinkedAccount[] = [];
+    const accounts: LinkedAccount[] =
+      linkedOidcAccounts?.map((a) => ({
+        type: LinkedAccountType.OpenIdConnect,
+        ...a,
+      })) ?? [];
     if (!user) return accounts;
     if (user.userType === UserType.PLEX && user.plexUsername)
       accounts.push({
@@ -86,7 +106,7 @@ const UserLinkedAccountsSettings = () => {
         username: user.jellyfinUsername,
       });
     return accounts;
-  }, [user]);
+  }, [user, linkedOidcAccounts]);
 
   const linkPlexAccount = async () => {
     setError(null);
@@ -136,6 +156,24 @@ const UserLinkedAccountsSettings = () => {
         settings.currentSettings.mediaServerType !== MediaServerType.EMBY ||
         accounts.some((a) => a.type === LinkedAccountType.Emby),
     },
+    ...settings.currentSettings.openIdProviders.map((p) => ({
+      name: p.name,
+      action: async () => {
+        try {
+          const res = await axios.get<{ redirectUrl: string }>(
+            `/api/v1/auth/oidc/login/${p.slug}`
+          );
+          window.location.href = res.data.redirectUrl;
+        } catch (e) {
+          setError(intl.formatMessage(messages.errorUnknown));
+        }
+      },
+      hide: accounts.some(
+        (a) =>
+          a.type === LinkedAccountType.OpenIdConnect &&
+          a.provider.slug === p.slug
+      ),
+    })),
   ].filter((l) => !l.hide);
 
   const deleteRequest = async (account: string) => {
@@ -148,6 +186,7 @@ const UserLinkedAccountsSettings = () => {
     }
 
     await revalidateUser();
+    await revalidateLinkedAccounts();
   };
 
   if (
@@ -196,7 +235,7 @@ const UserLinkedAccountsSettings = () => {
           <div>
             <Dropdown text="Link Account" buttonType="ghost">
               {linkable.map(({ name, action }) => (
-                <Dropdown.Item key={name} onClick={action}>
+                <Dropdown.Item key={name} onClick={action} buttonType="ghost">
                   {name}
                 </Dropdown.Item>
               ))}
@@ -219,24 +258,37 @@ const UserLinkedAccountsSettings = () => {
                   </div>
                 ) : acct.type === LinkedAccountType.Emby ? (
                   <EmbyLogo />
-                ) : (
+                ) : acct.type === LinkedAccountType.Jellyfin ? (
                   <JellyfinLogo />
-                )}
+                ) : acct.type === LinkedAccountType.OpenIdConnect ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={acct.provider.logo ?? '/images/openid.svg'}
+                    alt={acct.provider.name}
+                  />
+                ) : null}
               </div>
               <div>
                 <div className="truncate text-sm font-bold text-gray-300">
-                  {acct.type}
+                  {acct.type === LinkedAccountType.OpenIdConnect
+                    ? acct.provider.name
+                    : acct.type}
                 </div>
                 <div className="text-xl font-semibold text-white">
                   {acct.username}
                 </div>
               </div>
               <div className="flex-grow" />
-              {enableMediaServerUnlink && (
+              {(acct.type === LinkedAccountType.OpenIdConnect ||
+                enableMediaServerUnlink) && (
                 <ConfirmButton
                   onClick={() => {
                     deleteRequest(
-                      acct.type === LinkedAccountType.Plex ? 'plex' : 'jellyfin'
+                      acct.type === LinkedAccountType.OpenIdConnect
+                        ? String(acct.id)
+                        : acct.type === LinkedAccountType.Plex
+                        ? 'plex'
+                        : 'jellyfin'
                     );
                   }}
                   confirmText={intl.formatMessage(globalMessages.areyousure)}

src/context/LanguageContext.tsx

@@ -1,41 +1,6 @@
+import { type AvailableLocale } from '@server/types/languages';
 import React from 'react';
 
-export type AvailableLocale =
-  | 'ar'
-  | 'bg'
-  | 'ca'
-  | 'cs'
-  | 'da'
-  | 'de'
-  | 'en'
-  | 'el'
-  | 'es'
-  | 'es-MX'
-  | 'fi'
-  | 'fr'
-  | 'hr'
-  | 'he'
-  | 'hi'
-  | 'hu'
-  | 'it'
-  | 'ja'
-  | 'ko'
-  | 'lt'
-  | 'nb-NO'
-  | 'nl'
-  | 'pl'
-  | 'pt-BR'
-  | 'pt-PT'
-  | 'ro'
-  | 'ru'
-  | 'sq'
-  | 'sr'
-  | 'sv'
-  | 'tr'
-  | 'uk'
-  | 'zh-CN'
-  | 'zh-TW';
-
 type AvailableLanguageObject = Record<
   string,
   { code: AvailableLocale; display: string }

src/context/SettingsContext.tsx

@@ -8,7 +8,7 @@ export interface SettingsContextProps {
   children?: React.ReactNode;
 }
 
-const defaultSettings = {
+const defaultSettings: PublicSettingsResponse = {
   initialized: false,
   applicationTitle: 'Jellyseerr',
   applicationUrl: '',
@@ -31,6 +31,7 @@ const defaultSettings = {
   emailEnabled: false,
   newPlexLogin: true,
   youtubeUrl: '',
+  openIdProviders: [],
 };
 
 export const SettingsContext = React.createContext<SettingsContextProps>({

src/i18n/locale/en.json

@@ -253,6 +253,7 @@
   "components.Login.loginerror": "Something went wrong while trying to sign in.",
   "components.Login.loginwithapp": "Login with {appName}",
   "components.Login.noadminerror": "No admin user found on the server.",
+  "components.Login.oidcLoginError": "An error occurred while logging in with {provider}.",
   "components.Login.orsigninwith": "Or sign in with",
   "components.Login.password": "Password",
   "components.Login.port": "Port",
@@ -308,6 +309,9 @@
   "components.ManageSlideOver.removearr4k": "Remove from 4K {arr}",
   "components.ManageSlideOver.tvshow": "series",
   "components.MediaSlider.ShowMoreCard.seemore": "See More",
+  "components.MetadataSelector.selectMetdataProvider": "Select a metadata provider",
+  "components.MetadataSelector.tmdbLabel": "The Movie Database (TMDB)",
+  "components.MetadataSelector.tvdbLabel": "TheTVDB",
   "components.MovieDetails.MovieCast.fullcast": "Full Cast",
   "components.MovieDetails.MovieCrew.fullcrew": "Full Crew",
   "components.MovieDetails.addtowatchlist": "Add To Watchlist",
@@ -621,6 +625,7 @@
   "components.Settings.Notifications.NotificationsGotify.validationUrlRequired": "You must provide a valid URL",
   "components.Settings.Notifications.NotificationsGotify.validationUrlTrailingSlash": "URL must not end in a trailing slash",
   "components.Settings.Notifications.NotificationsNtfy.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsNtfy.embedPoster": "Embed Poster",
   "components.Settings.Notifications.NotificationsNtfy.ntfysettingsfailed": "Ntfy notification settings failed to save.",
   "components.Settings.Notifications.NotificationsNtfy.ntfysettingssaved": "Ntfy notification settings saved successfully!",
   "components.Settings.Notifications.NotificationsNtfy.password": "Password",
@@ -651,6 +656,7 @@
   "components.Settings.Notifications.NotificationsPushover.accessTokenTip": "<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Jellyseerr",
   "components.Settings.Notifications.NotificationsPushover.agentenabled": "Enable Agent",
   "components.Settings.Notifications.NotificationsPushover.deviceDefault": "Device Default",
+  "components.Settings.Notifications.NotificationsPushover.embedPoster": "Embed Poster",
   "components.Settings.Notifications.NotificationsPushover.pushoversettingsfailed": "Pushover notification settings failed to save.",
   "components.Settings.Notifications.NotificationsPushover.pushoversettingssaved": "Pushover notification settings saved successfully!",
   "components.Settings.Notifications.NotificationsPushover.sound": "Notification Sound",
@@ -663,6 +669,7 @@
   "components.Settings.Notifications.NotificationsPushover.validationTypes": "You must select at least one notification type",
   "components.Settings.Notifications.NotificationsPushover.validationUserTokenRequired": "You must provide a valid user or group key",
   "components.Settings.Notifications.NotificationsSlack.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsSlack.embedPoster": "Embed Poster",
   "components.Settings.Notifications.NotificationsSlack.slacksettingsfailed": "Slack notification settings failed to save.",
   "components.Settings.Notifications.NotificationsSlack.slacksettingssaved": "Slack notification settings saved successfully!",
   "components.Settings.Notifications.NotificationsSlack.toastSlackTestFailed": "Slack test notification failed to send.",
@@ -688,6 +695,7 @@
   "components.Settings.Notifications.NotificationsWebhook.webhooksettingsfailed": "Webhook notification settings failed to save.",
   "components.Settings.Notifications.NotificationsWebhook.webhooksettingssaved": "Webhook notification settings saved successfully!",
   "components.Settings.Notifications.NotificationsWebPush.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsWebPush.embedPoster": "Embed Poster",
   "components.Settings.Notifications.NotificationsWebPush.httpsRequirement": "In order to receive web push notifications, Jellyseerr must be served over HTTPS.",
   "components.Settings.Notifications.NotificationsWebPush.toastWebPushTestFailed": "Web push test notification failed to send.",
   "components.Settings.Notifications.NotificationsWebPush.toastWebPushTestSending": "Sending web push test notification…",
@@ -710,6 +718,7 @@
   "components.Settings.Notifications.emailsender": "Sender Address",
   "components.Settings.Notifications.emailsettingsfailed": "Email notification settings failed to save.",
   "components.Settings.Notifications.emailsettingssaved": "Email notification settings saved successfully!",
+  "components.Settings.Notifications.embedPoster": "Embed Poster",
   "components.Settings.Notifications.enableMentions": "Enable Mentions",
   "components.Settings.Notifications.encryption": "Encryption Method",
   "components.Settings.Notifications.encryptionDefault": "Use STARTTLS if available",
@@ -1025,6 +1034,8 @@
   "components.Settings.SettingsUsers.movieRequestLimitLabel": "Global Movie Request Limit",
   "components.Settings.SettingsUsers.newPlexLogin": "Enable New {mediaServerName} Sign-In",
   "components.Settings.SettingsUsers.newPlexLoginTip": "Allow {mediaServerName} users to sign in without first being imported",
+  "components.Settings.SettingsUsers.oidcLogin": "Enable OpenID Connect Sign-In",
+  "components.Settings.SettingsUsers.oidcLoginTip": "Allow users to sign in using OpenID Connect identity providers",
   "components.Settings.SettingsUsers.toastSettingsFailure": "Something went wrong while saving settings.",
   "components.Settings.SettingsUsers.toastSettingsSuccess": "User settings saved successfully!",
   "components.Settings.SettingsUsers.tvRequestLimitLabel": "Global Series Request Limit",
@@ -1093,12 +1104,17 @@
   "components.Settings.addrule": "New Override Rule",
   "components.Settings.addsonarr": "Add Sonarr Server",
   "components.Settings.advancedTooltip": "Incorrectly configuring this setting may result in broken functionality",
+  "components.Settings.allChosenProvidersAreOperational": "All chosen metadata providers are operational",
+  "components.Settings.animeMetadataProvider": "Anime metadata provider",
   "components.Settings.apiKey": "API key",
   "components.Settings.blacklistedTagImportInstructions": "Paste blacklist tag configuration below.",
   "components.Settings.blacklistedTagImportTitle": "Import Blacklisted Tag Configuration",
   "components.Settings.blacklistedTagsText": "Blacklisted Tags",
   "components.Settings.cancelscan": "Cancel Scan",
+  "components.Settings.chooseProvider": "Choose metadata providers for different content types",
   "components.Settings.clearBlacklistedTagsConfirm": "Are you sure you want to clear the blacklisted tags?",
+  "components.Settings.clickTest": "Click on the \"Test\" button to check connectivity with metadata providers",
+  "components.Settings.connectionTestFailed": "Connection test failed",
   "components.Settings.copyBlacklistedTags": "Copied blacklisted tags to clipboard.",
   "components.Settings.copyBlacklistedTagsEmpty": "Nothing to copy",
   "components.Settings.copyBlacklistedTagsTip": "Copy blacklisted tag configuration",
@@ -1111,6 +1127,9 @@
   "components.Settings.enablessl": "Use SSL",
   "components.Settings.experimentalTooltip": "Enabling this setting may result in unexpected application behavior",
   "components.Settings.externalUrl": "External URL",
+  "components.Settings.failed": "Does not work",
+  "components.Settings.failedToSaveMetadataSettings": "Failed to save metadata provider settings",
+  "components.Settings.general": "General",
   "components.Settings.hostname": "Hostname or IP Address",
   "components.Settings.importBlacklistedTagsTip": "Import blacklisted tag configuration",
   "components.Settings.invalidKeyword": "{keywordId} is not a TMDB keyword.",
@@ -1140,21 +1159,28 @@
   "components.Settings.menuJellyfinSettings": "{mediaServerName}",
   "components.Settings.menuJobs": "Jobs & Cache",
   "components.Settings.menuLogs": "Logs",
+  "components.Settings.menuMetadataProviders": "Metadata Providers",
   "components.Settings.menuNetwork": "Network",
   "components.Settings.menuNotifications": "Notifications",
   "components.Settings.menuPlexSettings": "Plex",
   "components.Settings.menuServices": "Services",
   "components.Settings.menuUsers": "Users",
+  "components.Settings.metadataProviderSelection": "Metadata Provider Selection",
+  "components.Settings.metadataProviderSettings": "Metadata Providers",
+  "components.Settings.metadataSettings": "Settings for metadata provider",
+  "components.Settings.metadataSettingsSaved": "Metadata provider settings saved",
   "components.Settings.no": "No",
   "components.Settings.noDefault4kServer": "A 4K {serverType} server must be marked as default in order to enable users to submit 4K {mediaType} requests.",
   "components.Settings.noDefaultNon4kServer": "If you only have a single {serverType} server for both non-4K and 4K content (or if you only download 4K content), your {serverType} server should <strong>NOT</strong> be designated as a 4K server.",
   "components.Settings.noDefaultServer": "At least one {serverType} server must be marked as default in order for {mediaType} requests to be processed.",
   "components.Settings.noSpecialCharacters": "Configuration must be a comma delimited list of TMDB keyword ids, and must not start or end with a comma.",
   "components.Settings.nooptions": "No results.",
+  "components.Settings.notTested": "Not Tested",
   "components.Settings.notificationAgentSettingsDescription": "Configure and enable notification agents.",
   "components.Settings.notifications": "Notifications",
   "components.Settings.notificationsettings": "Notification Settings",
   "components.Settings.notrunning": "Not Running",
+  "components.Settings.operational": "Operational",
   "components.Settings.overrideRules": "Override Rules",
   "components.Settings.overrideRulesDescription": "Override rules allow you to specify properties that will be replaced if a request matches the rule.",
   "components.Settings.plex": "Plex",
@@ -1163,6 +1189,7 @@
   "components.Settings.plexsettings": "Plex Settings",
   "components.Settings.plexsettingsDescription": "Configure the settings for your Plex server. Jellyseerr scans your Plex libraries to determine content availability.",
   "components.Settings.port": "Port",
+  "components.Settings.providerStatus": "Metadata Provider Status",
   "components.Settings.radarrsettings": "Radarr Settings",
   "components.Settings.restartrequiredTooltip": "Jellyseerr must be restarted for changes to this setting to take effect",
   "components.Settings.save": "Save Changes",
@@ -1171,6 +1198,7 @@
   "components.Settings.scanbackground": "Scanning will run in the background. You can continue the setup process in the meantime.",
   "components.Settings.scanning": "Syncing…",
   "components.Settings.searchKeywords": "Search keywords…",
+  "components.Settings.seriesMetadataProvider": "Series metadata provider",
   "components.Settings.serverLocal": "local",
   "components.Settings.serverRemote": "remote",
   "components.Settings.serverSecure": "secure",
@@ -1181,6 +1209,7 @@
   "components.Settings.serviceSettingsDescription": "Configure your {serverType} server(s) below. You can connect multiple {serverType} servers, but only two of them can be marked as defaults (one non-4K and one 4K). Administrators are able to override the server used to process new requests prior to approval.",
   "components.Settings.services": "Services",
   "components.Settings.settingUpPlexDescription": "To set up Plex, you can either enter the details manually or select a server retrieved from <RegisterPlexTVLink>plex.tv</RegisterPlexTVLink>. Press the button to the right of the dropdown to fetch the list of available servers.",
+  "components.Settings.settings": "Settings",
   "components.Settings.sonarrsettings": "Sonarr Settings",
   "components.Settings.ssl": "SSL",
   "components.Settings.startscan": "Start Scan",
@@ -1192,6 +1221,7 @@
   "components.Settings.tautulliSettingsDescription": "Optionally configure the settings for your Tautulli server. Jellyseerr fetches watch history data for your Plex media from Tautulli.",
   "components.Settings.timeout": "Timeout",
   "components.Settings.tip": "Tip",
+  "components.Settings.tmdbProviderDoesnotWork": "TMDB provider does not work, please select another metadata provider",
   "components.Settings.toastPlexConnecting": "Attempting to connect to Plex…",
   "components.Settings.toastPlexConnectingFailure": "Failed to connect to Plex.",
   "components.Settings.toastPlexConnectingSuccess": "Plex connection established successfully!",
@@ -1200,6 +1230,7 @@
   "components.Settings.toastPlexRefreshSuccess": "Plex server list retrieved successfully!",
   "components.Settings.toastTautulliSettingsFailure": "Something went wrong while saving Tautulli settings.",
   "components.Settings.toastTautulliSettingsSuccess": "Tautulli settings saved successfully!",
+  "components.Settings.tvdbProviderDoesnotWork": "TVDB provider does not work, please select another metadata provider",
   "components.Settings.urlBase": "URL Base",
   "components.Settings.validationApiKey": "You must provide an API key",
   "components.Settings.validationHostnameRequired": "You must provide a valid hostname or IP address",
@@ -1572,5 +1603,29 @@
   "pages.pagenotfound": "Page Not Found",
   "pages.returnHome": "Return Home",
   "pages.serviceunavailable": "Service Unavailable",
-  "pages.somethingwentwrong": "Something Went Wrong"
+  "pages.somethingwentwrong": "Something Went Wrong",
+  "settings.settings.SettingsOidc.addoidc": "Add New OpenID Connect Provider",
+  "settings.settings.SettingsOidc.editoidc": "Edit {name}",
+  "settings.settings.SettingsOidc.oidcClientId": "Client ID",
+  "settings.settings.SettingsOidc.oidcClientIdTip": "The Client ID assigned to Jellyseerr",
+  "settings.settings.SettingsOidc.oidcClientSecret": "Client Secret",
+  "settings.settings.SettingsOidc.oidcClientSecretTip": "The Client Secret assigned to Jellyseerr",
+  "settings.settings.SettingsOidc.oidcDomain": "Issuer URL",
+  "settings.settings.SettingsOidc.oidcDomainTip": "The base URL of the identity provider's OpenID Connect endpoint",
+  "settings.settings.SettingsOidc.oidcLogo": "Logo",
+  "settings.settings.SettingsOidc.oidcLogoTip": "The logo to display for the provider. Should be a URL or base64 encoded image",
+  "settings.settings.SettingsOidc.oidcName": "Provider Name",
+  "settings.settings.SettingsOidc.oidcNameTip": "Name of the provider which appears on the login screen",
+  "settings.settings.SettingsOidc.oidcNewUserLogin": "Allow New Users",
+  "settings.settings.SettingsOidc.oidcNewUserLoginTip": "Create accounts for new users logging in with this provider",
+  "settings.settings.SettingsOidc.oidcRequiredClaims": "Required Claims",
+  "settings.settings.SettingsOidc.oidcRequiredClaimsTip": "Space-separated list of boolean claims that are required to log in",
+  "settings.settings.SettingsOidc.oidcScopes": "Scopes",
+  "settings.settings.SettingsOidc.oidcScopesTip": "Space-separated list of scopes to request from the provider",
+  "settings.settings.SettingsOidc.oidcSlug": "Provider Slug",
+  "settings.settings.SettingsOidc.oidcSlugTip": "Unique identifier for the provider",
+  "settings.settings.SettingsOidc.required": "{field} is required",
+  "settings.settings.SettingsOidc.saveError": "Failed to save OpenID Connect provider configuration",
+  "settings.settings.SettingsOidc.saveSuccess": "OpenID Connect provider saved successfully!",
+  "settings.settings.SettingsOidc.url": "{field} must be a valid URL"
 }

src/pages/_app.tsx

@@ -6,7 +6,6 @@ import StatusChecker from '@app/components/StatusChecker';
 import Toast from '@app/components/Toast';
 import ToastContainer from '@app/components/ToastContainer';
 import { InteractionProvider } from '@app/context/InteractionContext';
-import type { AvailableLocale } from '@app/context/LanguageContext';
 import { LanguageContext } from '@app/context/LanguageContext';
 import { SettingsProvider } from '@app/context/SettingsContext';
 import { UserContext } from '@app/context/UserContext';
@@ -16,6 +15,7 @@ import '@app/styles/globals.css';
 import { polyfillIntl } from '@app/utils/polyfillIntl';
 import { MediaServerType } from '@server/constants/server';
 import type { PublicSettingsResponse } from '@server/interfaces/api/settingsInterfaces';
+import type { AvailableLocale } from '@server/types/languages';
 import axios from 'axios';
 import type { AppInitialProps, AppProps } from 'next/app';
 import App from 'next/app';
@@ -236,6 +236,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     series4kEnabled: false,
     localLogin: true,
     mediaServerLogin: true,
+    openIdProviders: [],
     discoverRegion: '',
     streamingRegion: '',
     originalLanguage: '',
@@ -286,7 +287,10 @@ CoreApp.getInitialProps = async (initialProps) => {
         );
         user = response.data;
 
-        if (router.pathname.match(/(setup|login)/)) {
+        if (
+          router.pathname.match(/(setup|login)/) &&
+          !router.query.callback === true
+        ) {
           ctx.res.writeHead(307, {
             Location: '/',
           });

src/pages/settings/metadata.tsx

@@ -0,0 +1,16 @@
+import SettingsLayout from '@app/components/Settings/SettingsLayout';
+import SettingsMetadata from '@app/components/Settings/SettingsMetadata';
+import useRouteGuard from '@app/hooks/useRouteGuard';
+import { Permission } from '@app/hooks/useUser';
+import type { NextPage } from 'next';
+
+const MetadataSettingsPage: NextPage = () => {
+  useRouteGuard(Permission.ADMIN);
+  return (
+    <SettingsLayout>
+      <SettingsMetadata />
+    </SettingsLayout>
+  );
+};
+
+export default MetadataSettingsPage;