OAuth 2.0 login / MAS for Element Call SPA

README.md

@@ -209,6 +209,7 @@ A docker compose file `dev-backend-docker-compose.yml` is provided to start the
 whole stack of components which is required for a local development environment:
 
 - Minimum Synapse Setup (servername: `synapse.m.localhost`)
+- Matrix Authentication Service Setup (issuer: `mas.m.localhost`)
 - MatrixRTC Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
 - Minimum LiveKit SFU Setup using dev defaults for config
 - Redis db for completeness
@@ -218,6 +219,7 @@ whole stack of components which is required for a local development environment:
     certificates
 - Minimum TLS reverse proxy for
   - Synapse homeserver: `synapse.m.localhost`
+  - Matrix Authentication Service: `mas.m.localhost`
   - MatrixRTC backend: `matrix-rtc.m.localhost`
   - Local Element Call development `call.m.localhost` via `yarn dev --host `
   - Element Web `app.m.localhost`

backend/dev_homeserver.yaml

@@ -12,6 +12,11 @@ listeners:
       - names: [client, federation, openid]
         compress: false
 
+matrix_authentication_service:
+  enabled: true
+  secret: "mas-matrix-secret"
+  endpoint: http://mas:8080
+
 database:
   name: sqlite3
   args:
@@ -46,9 +51,5 @@ rc_message:
   per_second: 0.5
   burst_count: 30
 
-# Required for Element Call in Single Page Mode due to on-the-fly user registration
-enable_registration: true
-enable_registration_without_verification: true
-
 report_stats: false
 serve_server_wellknown: true

backend/dev_mas.yaml

@@ -0,0 +1,96 @@
+http:
+  listeners:
+  - name: web
+    resources:
+    - name: discovery
+    - name: human
+    - name: oauth
+    - name: assets
+    - name: adminapi
+    binds:
+    - address: '[::]:8080'
+    proxy_protocol: false
+  trusted_proxies:
+  - 192.168.0.0/16
+  - 172.16.0.0/12
+  - 10.0.0.0/10
+  - 127.0.0.1/8
+  - fd00::/8
+  - ::1/128
+  public_base: https://mas.m.localhost/
+database:
+  uri: postgres://postgres@mas-db/mas
+  max_connections: 10
+  min_connections: 0
+  connect_timeout: 30
+  idle_timeout: 600
+  max_lifetime: 1800
+email:
+  from: '"Authentication Service" <root@localhost>'
+  reply_to: '"Authentication Service" <root@localhost>'
+  transport: blackhole
+secrets:
+  encryption: 91c9eda308d874d1b8ba51c0fe3b7cbb868638c8fbb82d7eec0e6912586bdabd
+  keys:
+  - kid: H30QE7M5eX
+    key: |
+      -----BEGIN RSA PRIVATE KEY-----
+      MIIEogIBAAKCAQEA3+t9XjM8LhYMpagIKXnpTXVWxIo5zwM/R8wYRPg0MPGCrOUB
+      i/L/Vof4yK7lIMWtCT724e989PLR4YmG2pXBpB8P7SZ3feggLoUMi8+QNzyKsGD+
+      lYmZd0D/2aVmxBxK83JP3LLodmoHduva2qSBF9YdZ6Greg/IcEdG2UY3iGYeojsQ
+      1Wx7V2+WPeUCtaIONBPk/rwOgWmzAhqGyCXONbvGazElNEuM0fwI278qveP5kNoh
+      aL6HvlaYQbMSGAg1tf06AKOjsJG0CRsvsMdFxuG9GEwd4pJr9+v+OqwnaFJHJ70z
+      kQFC3s/w+xCk4NnO+jSopBptu8ycwjZYMuq2kQIDAQABAoIBAHbDqFL2Sc0H1N1o
+      KiwVhTCYM9U6mz65Mi8aiSTLoKL09aJONGvODrAOnl2SpeSj9AsbYkajh1tEDx3Y
+      m7YECBjMgN3/sREOtUL3PphJFuy1J7o1N9KIkOU3jHwbxk3t07MbxlAAdFuaESt6
+      HTIqXm4OGrqEfTbYeC9VHrbPD1VAFj/OGHsYDurJzhfIlFSlZWZqHNjdNh2HAOJM
+      FElqJWqqR9fj2pYYdpo+oaheI/iIAuWpAgcZOJzaZ4iui4R9i4od+qqQ3EVECPvS
+      /QnezvDpiobShG6WOmrRj3WBtheiPLdNlNB0sVW9h3dHcrkE/l2n5pfArVbHB+wg
+      4e5FEAECgYEA4XjB6hpN1iX66ADf27L5mHymu1hTojZLoQdy76OcjgG+4ZoQl71U
+      OAww4ek9I6Alz+aQqTAnRtLHBKH+xSuO2VoxQfimk71mUmByCr25vIU8mGtXRIJO
+      rtWEVE4HQPhK2LODLm5zbp3I1GsrfNgMCsuA/yse5MIczC8bRFyf+DECgYEA/jzx
+      ddl1asjArcFcQyKFJxdobNqYJ4P+rbDLIOmC9IQ8n/v+ETERCzj/y93yaXXqCBlR
+      uHDzo72F/+SYDDWGYanpRmN2cUv1A0XTUs+dWYjfrscFJUEx8CZh0GeoLE4H3uru
+      GlwqPnc9sMPee98mj4yDMyrNqLx/VaXV+wnpbGECgYAh4JoKSa9+SLCdYVxBT2/v
+      OHN43LmcOto8NLlRRl0EfUCn9xUdJ4Za8YH6v6e/DZYA2dzMfv63xn2+tXRpPbU1
+      9TZHekvVEPUp1XHtKTqaF87V+/LdyVJ3NH+whxTR7zyXuMkyFchkS3Lcb8nV9URB
+      7vfP3zPCHWRkTYOkTuJ+UQKBgFCrj8ZgMOSoPJMlppvayTtFLypTFjJ7rIT6cwnH
+      bnkduIrfD5fu5MSV2nyauT+DXbYiKo8GsBhFm849f41oMnKs0ks2Zi++9UiLkGlX
+      XUs6phc0KUrP7AOSejkBmxgrzk2KZ/DPS8w0U8vR6reNcBPedwb2Tvl6jkDj9QjJ
+      9VohAoGAISjlufqw3y8F/0on1AhqyROlJghTBsQ+xDEBZ9txx/HcKVghqMhBCbFj
+      LRf8B4vH9QXtlZVtPFj0wE3INxsYtilsbD8wbwkxsLeGUFdPDucPacfBSyX+wLRh
+      S1/twrPS9KVhkU5d0TbyfOlEB1OSXZTWZ1n9NaqOZUPf6FAwm78=
+      -----END RSA PRIVATE KEY-----
+  - kid: VrRd3Y2OeF
+    key: |
+      -----BEGIN EC PRIVATE KEY-----
+      MHcCAQEEIB3zBxhuh275A3piMMDZ2BEM6vsoxswNLrTJRiaY+m80oAoGCCqGSM49
+      AwEHoUQDQgAECqFotDpyEYNrWf2UZaUB0CZz6KiptQL2wi8oRNkKlarjgDDNCBzR
+      dgCokx9C8bLpfqhTJE/6aSe6T19qkaPHIg==
+      -----END EC PRIVATE KEY-----
+  - kid: SHaCwxflXU
+    key: |
+      -----BEGIN EC PRIVATE KEY-----
+      MIGkAgEBBDCdchyP7aFxQce7vA+QMPkMkOaYKbmNoN1fnlKviKsJK1riq+1eKSEe
+      UeUF5BOczfugBwYFK4EEACKhZANiAAR1pIE4xN9xkULiCgMd/uztt4Lnu8FhvEZD
+      3BhUfy5kdBVbYyk1khgKy3k+dQvXaTVkzsHkQN8K78WxlUDlF5zKXLjgkeEiqgz7
+      HU0rr2e8geUiaEE2AkzWhvmIikvhuMo=
+      -----END EC PRIVATE KEY-----
+  - kid: ngjUaMfCuT
+    key: |
+      -----BEGIN EC PRIVATE KEY-----
+      MHQCAQEEIE11jnxjUvPk93ylMuIcwcayJsFUhsSH2EqAn97CiHf8oAcGBSuBBAAK
+      oUQDQgAE1XySwFNBUkzZ946MBf2/3ecXVptrauZEQ8d8zqUdBS7wOe5pZwZ15Jx4
+      aZhlusZ3BPl0KiTlWwOlaRDMrw9EGA==
+      -----END EC PRIVATE KEY-----
+passwords:
+  enabled: true
+  schemes:
+  - version: 1
+    algorithm: argon2id
+  minimum_complexity: 0
+matrix:
+  kind: synapse
+  homeserver: synapse.m.localhost
+  secret: "mas-matrix-secret"
+  endpoint: http://homeserver:8008/

backend/dev_nginx.conf

@@ -40,6 +40,23 @@ server {
 
 }
 
+# Matrix Authentication Server reverse proxy
+server {
+    listen                  443 ssl;
+    listen                  [::]:443 ssl;
+    server_name             mas.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+    location / {
+        proxy_pass "http://mas:8080";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+}
+
 # MatrixRTC reverse proxy
 # - MatrixRTC Authorization Service
 # - LiveKit SFU websocket signaling connection

config/config.devenv.json

@@ -15,5 +15,8 @@
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
+  },
+  "oidc_metadata": {
+    "client_name": "Element Call (dev)"
   }
 }

dev-backend-docker-compose.yml

@@ -68,6 +68,31 @@ services:
     volumes:
       - ./backend/synapse_tmp:/data:Z
       - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+    depends_on:
+      - mas
+    networks:
+      - ecbackend
+
+  mas:
+    # To add users, see `docker exec element-call-mas-1 mas-cli manage register-user -h`
+    image: ghcr.io/element-hq/matrix-authentication-service:latest
+    pull_policy: always
+    hostname: mas
+    volumes:
+      - ./backend/dev_mas.yaml:/config.yaml:ro,Z
+    depends_on:
+      - mas-db
+    networks:
+      - ecbackend
+
+  mas-db:
+    image: docker.io/postgres:16-alpine
+    hostname: mas-db
+    restart: always
+    shm_size: 128mb
+    environment:
+      - POSTGRES_HOST_AUTH_METHOD=trust
+      - POSTGRES_DB=mas
     networks:
       - ecbackend
 
@@ -101,7 +126,9 @@ services:
       - "host.docker.internal:host-gateway"
     depends_on:
       - synapse
+      - mas
     networks:
       ecbackend:
         aliases:
+          - mas.m.localhost
           - matrix-rtc.m.localhost

locales/en/app.json

@@ -90,6 +90,7 @@
     "e2ee_unsupported_description": "Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.",
     "generic": "Something went wrong",
     "generic_description": "Submitting debug logs will help us track down the problem.",
+    "homeserver_misconfig": "Misconfigured homeserver",
     "insufficient_capacity": "Insufficient capacity",
     "insufficient_capacity_description": "The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.",
     "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",

src/App.tsx

@@ -20,6 +20,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
+import { OidcRedirectPage } from "./auth/OidcRedirectPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
@@ -88,6 +89,7 @@ export const App: FC<Props> = ({ vm }) => {
             <Routes>
               <SentryRoute path="/" element={<HomePage />} />
               <SentryRoute path="/login" element={<LoginPage />} />
+              <SentryRoute path="/after-login" element={<OidcRedirectPage />} />
               <SentryRoute path="/register" element={<RegisterPage />} />
               <SentryRoute path="*" element={<RoomPage />} />
             </Routes>

src/Avatar.test.tsx

@@ -21,6 +21,7 @@ const TestComponent: FC<
     <ClientContextProvider
       value={{
         state: "valid",
+        oidcClientConfig: null,
         disconnected: false,
         supportedFeatures: {
           reactions: true,

src/ClientContext.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021-2024 New Vector Ltd.
+Copyright 2021-2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -19,7 +19,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
-import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
+import { ClientEvent, type OidcClientConfig, type MatrixClient } from "matrix-js-sdk";
 
 import type { WidgetApi } from "matrix-widget-api";
 import { ErrorPage } from "./FullScreenView";
@@ -29,6 +29,7 @@ import {
   RegistrationType,
 } from "./analytics/PosthogAnalytics";
 import { useEventTarget } from "./useEvents";
+import { getAuthMetadata } from "./utils/oidc/discovery";
 import { OpenElsewhereError } from "./RichError";
 
 declare global {
@@ -42,6 +43,7 @@ export type ClientState = ValidClientState | ErrorState;
 
 export type ValidClientState = {
   state: "valid";
+  oidcClientConfig: OidcClientConfig | null,
   authenticated?: AuthenticatedClient;
   // 'Disconnected' rather than 'connected' because it tracks specifically
   // whether the client is supposed to be connected but is not
@@ -74,17 +76,20 @@ export const useClientState = (): ClientState | undefined => use(ClientContext);
 export function useClient(): {
   client?: MatrixClient;
   setClient?: (client: MatrixClient, session: Session) => void;
+  oidcClientConfig: OidcClientConfig | null | undefined;
 } {
   let client;
   let setClient;
+  let oidcClientConfig;
 
   const clientState = useClientState();
   if (clientState?.state === "valid") {
     client = clientState.authenticated?.client;
     setClient = clientState.setClient;
+    oidcClientConfig = clientState.oidcClientConfig;
   }
 
-  return { client, setClient };
+  return { client, setClient, oidcClientConfig };
 }
 
 // Plain representation of the `ClientContext` as a helper for old components that expected an object with multiple fields.
@@ -140,6 +145,12 @@ interface Props {
 export const ClientProvider: FC<Props> = ({ children }) => {
   const navigate = useNavigate();
 
+  // null = no OIDC config, undefined = loading
+  const [oidcClientConfig, setOidcClientConfig] = useState<
+    OidcClientConfig | null | undefined
+  >(undefined);
+  const [oidcErr, setOidcErr] = useState<Error | undefined>(undefined);
+
   // null = signed out, undefined = loading
   const [initClientState, setInitClientState] = useState<
     InitResult | null | undefined
@@ -153,6 +164,11 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     if (initializing.current) return;
     initializing.current = true;
 
+    if (!widget) {
+      // TODO: spec says this may change over time & should be refreshed upon cache expiry
+      getAuthMetadata().then(setOidcClientConfig, setOidcErr);
+    }
+
     loadClient()
       .then((initResult) => {
         setInitClientState(initResult);
@@ -251,12 +267,18 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   const [supportsReactions, setSupportsReactions] = useState(false);
   const [supportsThumbnails, setSupportsThumbnails] = useState(false);
 
-  const state: ClientState | undefined = useMemo(() => {
-    if (alreadyOpenedErr) {
-      return { state: "error", error: alreadyOpenedErr };
+  const state = useMemo((): ClientState | undefined => {
+    const error = alreadyOpenedErr || oidcErr;
+    if (error) {
+      return { state: "error", error };
     }
 
-    if (initClientState === undefined) return undefined;
+    if (
+      initClientState === undefined ||
+      oidcClientConfig === undefined
+    ) {
+      return undefined;
+    }
 
     const authenticated =
       initClientState === null
@@ -270,6 +292,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
     return {
       state: "valid",
+      oidcClientConfig,
       authenticated,
       setClient,
       disconnected: isDisconnected,
@@ -280,6 +303,8 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     };
   }, [
     alreadyOpenedErr,
+    oidcErr,
+    oidcClientConfig,
     changePassword,
     initClientState,
     logout,
@@ -345,8 +370,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     };
   }, [initClientState, onSync]);
 
-  if (alreadyOpenedErr) {
-    return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
+  const error = alreadyOpenedErr || oidcErr;
+  if (error) {
+    return <ErrorPage widget={widget} error={error} />;
   }
 
   return <ClientContext value={state}>{children}</ClientContext>;