From 432f5a0ee40a6e29242346d3757365c969c167ad Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Wed, 13 Nov 2024 18:57:51 +0530
Subject: [PATCH] =?UTF-8?q?Show=20appropriate=20message=20when=20unauthori?=
 =?UTF-8?q?zed=20user=20tried=20to=20access=20the=20a=E2=80=A6=20(#571)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Show appropriate message when unauthorized user tried to access the application

* Fix firebase logout
---
 .../ui/mesop/auth/firebase/firebase_auth.py   | 21 +++++++++++--------
 fastagency/ui/mesop/data_model.py             |  1 +
 javascript/firebase_auth_component.js         |  6 +++---
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/fastagency/ui/mesop/auth/firebase/firebase_auth.py b/fastagency/ui/mesop/auth/firebase/firebase_auth.py
index d5fd90b0..bb570972 100644
--- a/fastagency/ui/mesop/auth/firebase/firebase_auth.py
+++ b/fastagency/ui/mesop/auth/firebase/firebase_auth.py
@@ -23,6 +23,9 @@
 
 
 class FirebaseAuth:  # implements AuthProtocol
+    SIGN_IN_MESSAGE = "Sign in to your account"
+    UN_AUTHORIZED_ERROR_MESSAGE = """You are not authorized to access this application. Please contact the application administrators for access."""
+
     def __init__(
         self,
         sign_in_methods: list[Literal["google"]],
@@ -147,17 +150,16 @@ def on_auth_changed(self, e: mel.WebEvent) -> None:
 
         if not firebase_auth_token:
             state.authenticated_user = ""
+            state.auth_error = None
             return
 
         decoded_token = auth.verify_id_token(firebase_auth_token)
-
-        if not self.is_authorized(decoded_token):
-            raise me.MesopUserException(
-                "You are not authorized to access this application. "
-                "Please contact the application administrators for access."
-            )
-
-        state.authenticated_user = decoded_token["email"]
+        if self.is_authorized(decoded_token):
+            state.authenticated_user = decoded_token["email"]
+            state.auth_error = None
+        else:
+            state.authenticated_user = ""
+            state.auth_error = FirebaseAuth.UN_AUTHORIZED_ERROR_MESSAGE
 
     # maybe me.Component is wrong
     def auth_component(self) -> me.component:
@@ -171,7 +173,8 @@ def auth_component(self) -> me.component:
         else:
             with me.box(style=styles.login_box):  # noqa: SIM117
                 with me.box(style=styles.login_btn_container):
-                    me.text("Sign in to your account", style=styles.header_text)
+                    message = state.auth_error or FirebaseAuth.SIGN_IN_MESSAGE
+                    me.text(message, style=styles.header_text)
                     firebase_auth_component(
                         on_auth_changed=self.on_auth_changed, config=self.config
                     )
diff --git a/fastagency/ui/mesop/data_model.py b/fastagency/ui/mesop/data_model.py
index c642afeb..bce5a3c8 100644
--- a/fastagency/ui/mesop/data_model.py
+++ b/fastagency/ui/mesop/data_model.py
@@ -37,3 +37,4 @@ class State:
     available_workflows_initialized = False
     available_workflows_exception = False
     authenticated_user: Optional[str] = None
+    auth_error: Optional[str] = None
diff --git a/javascript/firebase_auth_component.js b/javascript/firebase_auth_component.js
index 274c57d1..c4929d81 100644
--- a/javascript/firebase_auth_component.js
+++ b/javascript/firebase_auth_component.js
@@ -108,11 +108,11 @@ class FirebaseAuthComponent extends LitElement {
       ></div>
       <div
         class="firebaseui-container firebaseui-page-provider-sign-in firebaseui-id-page-provider-sign-in firebaseui-use-spinner"
-        style="${this.isSignedIn ? "" : "display: none"}"
+        style="${this.isSignedIn ? "" : "display: none"} ; text-align:center"
       >
         <button
-          style="background-color:#ffffff"
-          class="firebaseui-idp-button mdl-button mdl-js-button mdl-button--raised firebaseui-idp-google firebaseui-id-idp-button"
+          style="background-color:#ffffff;margin-top:10px;"
+          class=" mdl-button mdl-js-button mdl-button--raised firebaseui-idp-google firebaseui-id-idp-button"
           @click="${this.signOut}"
         >
           <span