Show appropriate message when unauthorized user tried to access the a…

…pplication

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"]],
@@ -52,6 +55,7 @@ def __init__(
 
         self.config = config
         self.allowed_users = allowed_users
+        self._is_unauthorized_user = False
 
         # Validate sign_in_methods type
         if not isinstance(sign_in_methods, list):
@@ -147,17 +151,15 @@ def on_auth_changed(self, e: mel.WebEvent) -> None:
 
         if not firebase_auth_token:
             state.authenticated_user = ""
+            self._is_unauthorized_user = False
             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"]
+            self._is_unauthorized_user = True
+        else:
+            state.authenticated_user = decoded_token["email"]
 
     # maybe me.Component is wrong
     def auth_component(self) -> me.component:
@@ -171,7 +173,12 @@ 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 = (
+                        FirebaseAuth.UN_AUTHORIZED_ERROR_MESSAGE
+                        if self._is_unauthorized_user
+                        else FirebaseAuth.SIGN_IN_MESSAGE
+                    )
+                    me.text(message, style=styles.header_text)
                     firebase_auth_component(
                         on_auth_changed=self.on_auth_changed, config=self.config
                     )

javascript/firebase_auth_component.js

@@ -95,6 +95,8 @@ class FirebaseAuthComponent extends LitElement {
   signOut() {
     try {
       firebase.auth().signOut();
+      this.isSignedIn = false;
+      this.dispatchEvent(new MesopEvent(this.authChanged, ""));
     } catch (error) {
       console.error("Sign out error:", error);
     }
@@ -108,11 +110,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