feat: basic OpenID Connect support

jellyseerr-api.yml

@@ -4005,6 +4005,77 @@ 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:
+        '302':
+          description: Redirect to the authentication url for the OpenID Connect provider
+          headers:
+            Location:
+              schema:
+                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
+            Set-Cookie:
+              schema:
+                type: string
+                example: 'oidc-state=123456789; HttpOnly; max-age=60000; Secure'
+  /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
@@ -4808,6 +4879,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
@@ -4906,6 +4994,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

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

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/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;
@@ -135,6 +154,7 @@ export interface MainSettings {
   hideBlacklisted: boolean;
   localLogin: boolean;
   mediaServerLogin: boolean;
+  oidcLogin: boolean;
   newPlexLogin: boolean;
   discoverRegion: string;
   streamingRegion: string;
@@ -203,6 +223,7 @@ interface FullPublicSettings extends PublicSettings {
   userEmailRequired: boolean;
   newPlexLogin: boolean;
   youtubeUrl: string;
+  openIdProviders: PublicOidcProvider[];
 }
 
 export interface NotificationAgentConfig {
@@ -354,6 +375,7 @@ export interface AllSettings {
   main: MainSettings;
   plex: PlexSettings;
   jellyfin: JellyfinSettings;
+  oidc: OidcSettings;
   tautulli: TautulliSettings;
   radarr: RadarrSettings[];
   sonarr: SonarrSettings[];
@@ -390,6 +412,7 @@ class Settings {
         hideBlacklisted: false,
         localLogin: true,
         mediaServerLogin: true,
+        oidcLogin: false,
         newPlexLogin: true,
         discoverRegion: '',
         streamingRegion: '',
@@ -421,6 +444,9 @@ class Settings {
         serverId: '',
         apiKey: '',
       },
+      oidc: {
+        providers: [],
+      },
       tautulli: {},
       metadataSettings: {
         tv: MetadataProviderType.TMDB,
@@ -622,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;
   }
@@ -694,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/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,289 @@ 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 OIDC login attempt', {
+      cause: 'Failed to fetch OIDC 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.redirect(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) {
+      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,
+      errorMessage: error.message,
+    });
+    return next({
+      status: 500,
+      message: 'An unknown error occurred',
+    });
+  }
+});
+
+// authRoutes.get('/oidc-logout', async (req, res, next) => {
+//   const settings = getSettings();
+
+//   if (!settings.main.oidcLogin || !settings.main.oidc.automaticLogin) {
+//     return next({
+//       status: 403,
+//       message: 'OpenID Connect sign-in is disabled.',
+//     });
+//   }
+
+//   const oidcEndpoints = await getOIDCWellknownConfiguration(
+//     settings.main.oidc.providerUrl
+//   );
+
+//   return res.redirect(oidcEndpoints.end_session_endpoint);
+// });
+
 authRoutes.post('/logout', async (req, res, next) => {
   try {
     const userId = req.session?.userId;

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/utils/oidc.ts

@@ -0,0 +1,202 @@
+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;
+}
+
+/** 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);
+
+  const callbackUrl = new URL(
+    `/login/oidc/callback/${provider.slug}`,
+    `${req.protocol}://${req.headers.host}`
+  ).toString();
+  url.searchParams.set('redirect_uri', callbackUrl);
+  url.searchParams.set('scope', '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 callbackUrl = new URL(
+    `/login/oidc/callback/${provider.slug}`,
+    `${req.protocol}://${req.headers.host}`
+  );
+
+  const formData = new URLSearchParams();
+  formData.append('client_secret', provider.clientSecret);
+  formData.append('grant_type', 'authorization_code');
+  formData.append('redirect_uri', callbackUrl.toString());
+  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/Login/ErrorCallout.tsx

@@ -0,0 +1,26 @@
+import Alert from '@app/components/Common/Alert';
+import { Transition } from '@headlessui/react';
+import React from 'react';
+
+interface LoginErrorProps {
+  error: string;
+}
+
+const LoginError: React.FC<LoginErrorProps> = ({ error }) => {
+  return (
+    <Transition
+      as="div"
+      show={!!error}
+      enter="transition-opacity duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <Alert type="error">{error}</Alert>
+    </Transition>
+  );
+};
+
+export default LoginError;

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

@@ -13,6 +13,10 @@ import PlexOAuth from '@app/utils/plex';
 import { TrashIcon } from '@heroicons/react/24/solid';
 import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
+import type {
+  UserSettingsLinkedAccount,
+  UserSettingsLinkedAccountResponse,
+} from '@server/interfaces/api/userSettingsInterfaces';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -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,17 @@ const UserLinkedAccountsSettings = () => {
         settings.currentSettings.mediaServerType !== MediaServerType.EMBY ||
         accounts.some((a) => a.type === LinkedAccountType.Emby),
     },
+    ...settings.currentSettings.openIdProviders.map((p) => ({
+      name: p.name,
+      action: () => {
+        window.location.href = `/api/v1/auth/oidc/login/${p.slug}`;
+      },
+      hide: accounts.some(
+        (a) =>
+          a.type === LinkedAccountType.OpenIdConnect &&
+          a.provider.slug === p.slug
+      ),
+    })),
   ].filter((l) => !l.hide);
 
   const deleteRequest = async (account: string) => {
@@ -148,6 +179,7 @@ const UserLinkedAccountsSettings = () => {
     }
 
     await revalidateUser();
+    await revalidateLinkedAccounts();
   };
 
   if (
@@ -219,24 +251,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 ?? ''}
+                    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/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/pages/_app.tsx

@@ -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.pathname.includes('oidc')
+        ) {
           ctx.res.writeHead(307, {
             Location: '/',
           });

src/pages/login/oidc/callback/[slug].tsx

@@ -0,0 +1,74 @@
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import LoginError from '@app/components/Login/ErrorCallout';
+import defineMessages from '@app/utils/defineMessages';
+import { processCallback } from '@app/utils/oidc';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+const messages = defineMessages('components.Login', {
+  loginerror: 'Something went wrong while trying to sign in.',
+  backtologin: 'Back to Login',
+});
+
+const OidcCallback = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const { slug } = router.query as { slug: string };
+
+  const login = async () => {
+    const params = new URLSearchParams(window.location.search);
+    const result = await processCallback(params, slug);
+
+    // is popup window
+    if (window.opener && window.opener !== window) {
+      // send result to the opening window
+      window.opener.postMessage(
+        result,
+        `${window.location.protocol}//${window.location.host}`
+      );
+      // close the popup
+      window.close();
+    } else {
+      if (result.type === 'success') {
+        // redirect to homepage
+        router.push(result.message?.to ?? '/');
+      } else {
+        // display login error
+        setError(result.message);
+      }
+    }
+  };
+
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    login();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="container mx-auto flex h-screen items-center justify-center">
+      {error != null ? (
+        <div className="flex flex-col items-center">
+          <h2 className="mb-4 text-lg text-white">
+            {intl.formatMessage(messages.loginerror)}
+          </h2>
+          <LoginError error={error}></LoginError>
+          <Link href="/login" className="text-indigo-500">
+            ←{' '}
+            <span className="hover:underline">
+              {intl.formatMessage(messages.backtologin)}
+            </span>
+          </Link>
+        </div>
+      ) : (
+        <LoadingSpinner />
+      )}
+    </div>
+  );
+};
+
+export default OidcCallback;

src/utils/oidc.ts

@@ -0,0 +1,28 @@
+export 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 result = await fetch(url);
+    const message = await result.json();
+
+    if (result.status !== 200) {
+      return { type: 'error', message: message.message };
+    }
+    return {
+      type: 'success',
+      message,
+    };
+  } catch (e) {
+    return {
+      type: 'error',
+      message: e.message,
+    };
+  }
+}