47 - Display Logged in User Info

Author: codingforentrepreneurs

full_stack_python/auth/models.py

@@ -1,14 +1,16 @@
 from datetime import datetime
 import reflex as rx
+from reflex_local_auth.user import LocalUser
 
 import sqlalchemy
-from sqlmodel import Field
+from sqlmodel import Field, Relationship
 
 from .. import utils
 
 class UserInfo(rx.Model, table=True):
     email: str
     user_id: int = Field(foreign_key='localuser.id')
+    user: LocalUser | None = Relationship() # LocalUser instance
     created_at: datetime = Field(
         default_factory=utils.timing.get_utc_now,
         sa_type=sqlalchemy.DateTime(timezone=True),

full_stack_python/auth/state.py

@@ -9,16 +9,28 @@
 
 
 class SessionState(reflex_local_auth.LocalAuthState):
+
+    @rx.cached_var
+    def authenticated_username(self) -> str | None:
+        if self.authenticated_user.id < 0:
+            return None
+        return self.authenticated_user.username
+
     @rx.cached_var
     def authenticated_user_info(self) -> UserInfo | None:
         if self.authenticated_user.id < 0:
-            return
+            return None
         with rx.session() as session:
-            return session.exec(
+            result = session.exec(
                 sqlmodel.select(UserInfo).where(
                     UserInfo.user_id == self.authenticated_user.id
                 ),
             ).one_or_none()
+            if result is None:
+                return None
+            # user_obj = result.user
+            # print(result.user)
+            return result
 
     def on_load(self):
         if not self.is_authenticated:

full_stack_python/ui/sidebar.py

@@ -1,9 +1,46 @@
 import reflex as rx 
 from reflex.style import toggle_color_mode
 
+from ..auth.state import SessionState
 from .. import navigation 
 
-
+def sidebar_user_item() -> rx.Component:
+    user_info_obj = SessionState.authenticated_user_info
+    username_via_user_obj = rx.cond(SessionState.authenticated_username, SessionState.authenticated_username, "Account")
+    return rx.cond(
+        user_info_obj,
+        rx.hstack(
+            rx.icon_button(
+                rx.icon("user"),
+                size="3",
+                radius="full",
+            ),
+            rx.vstack(
+                rx.box(
+                    rx.text(
+                        username_via_user_obj,
+                        size="3",
+                        weight="bold",
+                    ),
+                    rx.text(
+                        f"{user_info_obj.email}",
+                        size="2",
+                        weight="medium",
+                    ),
+                    width="100%",
+                ),
+                spacing="0",
+                align="start",
+                justify="start",
+                width="100%",
+            ),
+            padding_x="0.5rem",
+            align="center",
+            justify="start",
+            width="100%",
+        ),
+        rx.fragment("")
+    )
 
 def sidebar_logout_item() -> rx.Component:
     return rx.box(
@@ -129,36 +166,7 @@ def sidebar() -> rx.Component:
                         width="100%",
                     ),
                     rx.divider(),
-                    rx.hstack(
-                        rx.icon_button(
-                            rx.icon("user"),
-                            size="3",
-                            radius="full",
-                        ),
-                        rx.vstack(
-                            rx.box(
-                                rx.text(
-                                    "My account",
-                                    size="3",
-                                    weight="bold",
-                                ),
-                                rx.text(
-                                    "[email protected]",
-                                    size="2",
-                                    weight="medium",
-                                ),
-                                width="100%",
-                            ),
-                            spacing="0",
-                            align="start",
-                            justify="start",
-                            width="100%",
-                        ),
-                        padding_x="0.5rem",
-                        align="center",
-                        justify="start",
-                        width="100%",
-                    ),
+                    sidebar_user_item(),
                     width="100%",
                     spacing="5",
                 ),
@@ -201,35 +209,7 @@ def sidebar() -> rx.Component:
                                     spacing="1",
                                 ),
                                 rx.divider(margin="0"),
-                                rx.hstack(
-                                    rx.icon_button(
-                                        rx.icon("user"),
-                                        size="3",
-                                        radius="full",
-                                    ),
-                                    rx.vstack(
-                                        rx.box(
-                                            rx.text(
-                                                "My account",
-                                                size="3",
-                                                weight="bold",
-                                            ),
-                                            rx.text(
-                                                "[email protected]",
-                                                size="2",
-                                                weight="medium",
-                                            ),
-                                            width="100%",
-                                        ),
-                                        spacing="0",
-                                        justify="start",
-                                        width="100%",
-                                    ),
-                                    padding_x="0.5rem",
-                                    align="center",
-                                    justify="start",
-                                    width="100%",
-                                ),
+                                sidebar_user_item(),
                                 width="100%",
                                 spacing="5",
                             ),