Offer guest mode login if advertised by OIDC Provider

Author: hughns

src/domain/login/LoginViewModel.ts

@@ -46,6 +46,7 @@ export class LoginViewModel extends ViewModel<SegmentType, Options> {
     private _startSSOLoginViewModel?: StartSSOLoginViewModel;
     private _completeSSOLoginViewModel?: CompleteSSOLoginViewModel;
     private _startOIDCLoginViewModel?: StartOIDCLoginViewModel;
+    private _startOIDCGuestLoginViewModel?: StartOIDCLoginViewModel;
     private _completeOIDCLoginViewModel?: CompleteOIDCLoginViewModel;
     private _loadViewModel?: SessionLoadViewModel;
     private _loadViewModelSubscription?: () => void;
@@ -85,6 +86,10 @@ export class LoginViewModel extends ViewModel<SegmentType, Options> {
         return this._startOIDCLoginViewModel;
     }
 
+    get startOIDCGuestLoginViewModel(): StartOIDCLoginViewModel {
+        return this._startOIDCGuestLoginViewModel;
+    }
+
     get completeOIDCLoginViewModel(): CompleteOIDCLoginViewModel {
         return this._completeOIDCLoginViewModel;
     }
@@ -169,7 +174,7 @@ export class LoginViewModel extends ViewModel<SegmentType, Options> {
 
     private async _showOIDCLogin(): Promise<void> {
         this._startOIDCLoginViewModel = this.track(
-            new StartOIDCLoginViewModel(this.childOptions({loginOptions: this._loginOptions}))
+            new StartOIDCLoginViewModel(this.childOptions({loginOptions: this._loginOptions, asGuest: false}))
         );
         this.emitChange("startOIDCLoginViewModel");
         try {
@@ -180,6 +185,19 @@ export class LoginViewModel extends ViewModel<SegmentType, Options> {
         }
     }
 
+    private async _showOIDCGuestLogin(): Promise<void> {
+        this._startOIDCGuestLoginViewModel = this.track(
+            new StartOIDCLoginViewModel(this.childOptions({loginOptions: this._loginOptions, asGuest: true}))
+        );
+        this.emitChange("startOIDCGuestLoginViewModel");
+        try {
+            await this._startOIDCLoginViewModel.discover();
+        } catch (err) {
+            this._showError(err.message);
+            this._disposeViewModels();
+        }
+    }
+
     private _showError(message: string): void {
         this._errorMessage = message;
         this.emitChange("errorMessage");
@@ -190,6 +208,7 @@ export class LoginViewModel extends ViewModel<SegmentType, Options> {
         this._passwordLoginViewModel?.setBusy(status);
         this._startSSOLoginViewModel?.setBusy(status);
         this._startOIDCLoginViewModel?.setBusy(status);
+        this._startOIDCGuestLoginViewModel?.setBusy(status);
         this.emitChange("isBusy");
     }
 
@@ -244,6 +263,7 @@ export class LoginViewModel extends ViewModel<SegmentType, Options> {
         this._passwordLoginViewModel = this.disposeTracked(this._passwordLoginViewModel);
         this._completeSSOLoginViewModel = this.disposeTracked(this._completeSSOLoginViewModel);
         this._startOIDCLoginViewModel = this.disposeTracked(this._startOIDCLoginViewModel);
+        this._startOIDCGuestLoginViewModel = this.disposeTracked(this._startOIDCGuestLoginViewModel);
         this.emitChange("disposeViewModels");
     }
 
@@ -309,6 +329,7 @@ export class LoginViewModel extends ViewModel<SegmentType, Options> {
             if (this._loginOptions.sso) { this._showSSOLogin(); }
             if (this._loginOptions.password) { this._showPasswordLogin(); }
             if (this._loginOptions.oidc) { this._showOIDCLogin(); }
+            if (this._loginOptions.oidc?.guestAvailable) { this._showOIDCGuestLogin(); }
             if (!this._loginOptions.sso && !this._loginOptions.password && !this._loginOptions.oidc) {
                 this._showError("This homeserver supports neither SSO nor password based login flows or has a usable OIDC Provider");
             } 
@@ -335,6 +356,6 @@ export type LoginOptions = {
     homeserver: string;
     password?: (username: string, password: string) => PasswordLoginMethod;
     sso?: SSOLoginHelper;
-    oidc?: { issuer: string };
+    oidc?: { issuer: string, guestAvailable: boolean };
     token?: (loginToken: string) => TokenLoginMethod;
 };

src/domain/login/StartOIDCLoginViewModel.js

@@ -32,6 +32,7 @@ export class StartOIDCLoginViewModel extends ViewModel {
             urlRouter: this.urlRouter,
             staticClients: this.platform.config["staticOidcClients"],
         });
+        this._asGuest = options.asGuest;
     }
 
     get isBusy() { return this._isBusy; }
@@ -60,7 +61,7 @@ export class StartOIDCLoginViewModel extends ViewModel {
     async startOIDCLogin() {
         const deviceScope = this._api.generateDeviceScope();
         const p = this._api.generateParams({
-            scope: `openid urn:matrix:org.matrix.msc2967.client:api:* ${deviceScope}`,
+            scope: `openid urn:matrix:org.matrix.msc2967.client:api:${this._asGuest ? 'guest' : '*'} ${deviceScope}`,
             redirectUri: this.urlRouter.createOIDCRedirectURL(),
         });
         const clientId = await this._api.clientId();

src/matrix/Client.js

@@ -141,9 +141,11 @@ export class Client {
                     });
                     await oidcApi.validate();
 
+                    const guestAvailable = await oidcApi.isGuestAvailable();
+
                     return {
                         homeserver,
-                        oidc: { issuer, account },
+                        oidc: { issuer, account, guestAvailable },
                     };
                 } catch (e) {
                     console.log(e);

src/matrix/net/OidcApi.ts

@@ -226,6 +226,11 @@ export class OidcApi<N extends object = SegmentType> {
         return metadata["revocation_endpoint"];
     }
 
+    async isGuestAvailable(): Promise<boolean> {
+        const metadata = await this.metadata();
+        return metadata["scopes_supported"]?.includes("urn:matrix:org.matrix.msc2967.client:api:guest");
+    }
+
     generateDeviceScope(): String {
         const deviceId = randomString(10);
         return `urn:matrix:org.matrix.msc2967.client:device:${deviceId}`;

src/platform/web/ui/css/login.css

@@ -68,13 +68,13 @@ limitations under the License.
     --size: 20px;
 }
 
-.StartSSOLoginView, .StartOIDCLoginView {
+.StartSSOLoginView, .StartOIDCLoginView, .StartOIDCGuestLoginView {
     display: flex;
     flex-direction: column;
     padding: 0 0.4em 0;
 }
 
-.StartSSOLoginView_button, .StartOIDCLoginView_button {
+.StartSSOLoginView_button, .StartOIDCLoginView_button, .StartOIDCGuestLoginView_button {
     flex: 1;
     margin-top: 12px;
 }

src/platform/web/ui/login/LoginView.js

@@ -58,6 +58,8 @@ export class LoginView extends TemplateView {
             t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)),
             t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null),
             t.mapView(vm => vm.startOIDCLoginViewModel, vm => vm ? new StartOIDCLoginView(vm) : null),
+            t.if(vm => vm.startOIDCLoginViewModel && vm.startOIDCGuestLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)),
+            t.mapView(vm => vm.startOIDCGuestLoginViewModel, vm => vm ? new StartOIDCGuestLoginView(vm) : null),
             t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null),
             // use t.mapView rather than t.if to create a new view when the view model changes too
             t.p(hydrogenGithubLink(t))
@@ -90,3 +92,16 @@ class StartOIDCLoginView extends TemplateView {
         );
     }
 }
+
+class StartOIDCGuestLoginView extends TemplateView {
+    render(t, vm) {
+        return t.div({ className: "StartOIDCGuestLoginView" },
+            t.a({
+                className: "StartOIDCGuestLoginView_button button-action primary",
+                type: "button",
+                onClick: () => vm.startOIDCLogin(),
+                disabled: vm => vm.isBusy
+            }, vm.i18n`Continue as Guest`)
+        );
+    }
+}