Repository: matrix-org/synapse

Issue:
SSO-over-UIA flow is ugly and not mobile-friendly
1. It starts with something nice in the client app, like: 

   > ![image](https://user-images.githubusercontent.com/1389908/105166647-90fbf300-5b0f-11eb-9dd8-d0aa3f7d3490.png)

   That bit is fine.

2. After you click "Single Sign On", you get taken to a new tab, which looks like:

   > ![image](https://user-images.githubusercontent.com/1389908/105170712-41b8c100-5b15-11eb-909d-34c419bfca56.png)

   That is (a) ugly, (b) not mobile-friendly, (c) we don't seem to know if "sign-on" is hyphenated or not.

   For context, [MSC2454](https://github.com/matrix-org/matrix-doc/blob/master/proposals/2454-ui-interactive-auth-for-sso.md#why-we-need-user-to-confirm-before-the-sso-flow) explains why this page is required.

3. Clicking "reauthenticate with single sign-on" takes you to the SSO provider's pages, which are outside our control and probably fine.

4. Then when you finish SSO you end up back at a page which looks like:

   > ![image](https://user-images.githubusercontent.com/1389908/105172493-9d844980-5b17-11eb-86cc-412e72acc731.png)

   ... which is also ugly and not mobile-friendly. It's also missing a full stop. It's worth noting that the intention is that the user should never see this page, but various bugs (https://github.com/vector-im/element-web/issues/16219, https://github.com/matrix-org/matrix-doc/issues/2977) mean that is not the case today.

5. There are also some error pages a user might see along the way. 

    For example, a generic error page:

    > ![image](https://user-images.githubusercontent.com/1389908/105172832-1b485500-5b18-11eb-9690-505e1f41f7a2.png)

   Or, "you seem to have logged into your SSO provider with a different user to what we expected":

   > ![image](https://user-images.githubusercontent.com/1389908/105173101-78440b00-5b18-11eb-92f0-eb907e548f4a.png)

   In both cases we do a poor job of explaining to the user how they should proceed. Oh and now single-sign-on has *two* hyphens!

There's a general theme here that these templates are very basic and would benefit from some wordsmithing and design. *However*, note that they are part of the *homeserver*, not the client, so Element branding is inappropriate. For `matrix.org`, we could consider customising the default templates with Matrix branding, but it would be nice to consider whether we can improve the default templates that are shipped as part of the Synapse package so that all deployments can benefit from the improvements.


Discussion:

Resolving patch:
diff --git a/synapse/config/sso.py b/synapse/config/sso.py
--- a/synapse/config/sso.py
+++ b/synapse/config/sso.py
@@ -113,8 +113,13 @@ def generate_config_section(self, **kwargs):
             #
             #     * providers: a list of available Identity Providers. Each element is
             #       an object with the following attributes:
+            #
             #         * idp_id: unique identifier for the IdP
             #         * idp_name: user-facing name for the IdP
+            #         * idp_icon: if specified in the IdP config, an MXC URI for an icon
+            #              for the IdP
+            #         * idp_brand: if specified in the IdP config, a textual identifier
+            #              for the brand of the IdP
             #
             #   The rendered HTML page should contain a form which submits its results
             #   back as a GET request, with the following query parameters:
@@ -192,6 +197,16 @@ def generate_config_section(self, **kwargs):
             #
             #     * description: the operation which the user is being asked to confirm
             #
+            #     * idp: details of the Identity Provider that we will use to confirm
+            #       the user's identity: an object with the following attributes:
+            #
+            #         * idp_id: unique identifier for the IdP
+            #         * idp_name: user-facing name for the IdP
+            #         * idp_icon: if specified in the IdP config, an MXC URI for an icon
+            #              for the IdP
+            #         * idp_brand: if specified in the IdP config, a textual identifier
+            #              for the brand of the IdP
+            #
             # * HTML page shown after a successful user interactive authentication session:
             #   'sso_auth_success.html'.
             #
diff --git a/synapse/handlers/auth.py b/synapse/handlers/auth.py
--- a/synapse/handlers/auth.py
+++ b/synapse/handlers/auth.py
@@ -1388,7 +1388,9 @@ async def start_sso_ui_auth(self, request: SynapseRequest, session_id: str) -> s
         )
 
         return self._sso_auth_confirm_template.render(
-            description=session.description, redirect_url=redirect_url,
+            description=session.description,
+            redirect_url=redirect_url,
+            idp=sso_auth_provider,
         )
 
     async def complete_sso_login(


Test patch: