build ok,

002_source/cms/src/components/dashboard/layout/user-popover/auth0-sign-out.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+
+import { paths } from '@/paths';
+
+export function Auth0SignOut(): React.JSX.Element {
+  return (
+    <MenuItem component="a" href={paths.auth.auth0.signOut} sx={{ justifyContent: 'center' }}>
+      Sign out
+    </MenuItem>
+  );
+}

002_source/cms/src/components/dashboard/layout/user-popover/cognito-sign-out.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { signOut } from '@aws-amplify/auth';
+import MenuItem from '@mui/material/MenuItem';
+
+import { logger } from '@/lib/default-logger';
+import { toast } from '@/components/core/toaster';
+
+export function CognitoSignOut(): React.JSX.Element {
+  const handleSignOut = React.useCallback(async (): Promise<void> => {
+    try {
+      await signOut();
+      // UserProvider will handle Router refresh
+      // After refresh, GuestGuard will handle the redirect
+    } catch (err) {
+      logger.error('Sign out error', err);
+      toast.error('Something went wrong, unable to sign out');
+    }
+  }, []);
+
+  return (
+    <MenuItem component="div" onClick={handleSignOut} sx={{ justifyContent: 'center' }}>
+      Sign out
+    </MenuItem>
+  );
+}

002_source/cms/src/components/dashboard/layout/user-popover/custom-sign-out.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import MenuItem from '@mui/material/MenuItem';
+
+import { authClient } from '@/lib/auth/custom/client';
+import { logger } from '@/lib/default-logger';
+import { useUser } from '@/hooks/use-user';
+import { toast } from '@/components/core/toaster';
+
+export function CustomSignOut(): React.JSX.Element {
+  const { checkSession } = useUser();
+
+  const router = useRouter();
+
+  const handleSignOut = React.useCallback(async (): Promise<void> => {
+    try {
+      const { error } = await authClient.signOut();
+
+      if (error) {
+        logger.error('Sign out error', error);
+        toast.error('Something went wrong, unable to sign out');
+        return;
+      }
+
+      // Refresh the auth state
+      await checkSession?.();
+
+      // UserProvider, for this case, will not refresh the router and we need to do it manually
+      router.refresh();
+      // After refresh, AuthGuard will handle the redirect
+    } catch (err) {
+      logger.error('Sign out error', err);
+      toast.error('Something went wrong, unable to sign out');
+    }
+  }, [checkSession, router]);
+
+  return (
+    <MenuItem component="div" onClick={handleSignOut} sx={{ justifyContent: 'center' }}>
+      Sign out
+    </MenuItem>
+  );
+}

002_source/cms/src/components/dashboard/layout/user-popover/firebase-sign-out.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import type { Auth } from 'firebase/auth';
+import { signOut } from 'firebase/auth';
+
+import { getFirebaseAuth } from '@/lib/auth/firebase/client';
+import { logger } from '@/lib/default-logger';
+import { toast } from '@/components/core/toaster';
+
+export function FirebaseSignOut(): React.JSX.Element {
+  const [firebaseAuth] = React.useState<Auth>(getFirebaseAuth());
+
+  const handleSignOut = React.useCallback(async (): Promise<void> => {
+    try {
+      await signOut(firebaseAuth);
+      // UserProvider will handle Router refresh
+      // After refresh, GuestGuard will handle the redirect
+    } catch (err) {
+      logger.error('Sign out error', err);
+      toast.error('Something went wrong, unable to sign out');
+    }
+  }, [firebaseAuth]);
+
+  return (
+    <MenuItem component="div" onClick={handleSignOut} sx={{ justifyContent: 'center' }}>
+      Sign out
+    </MenuItem>
+  );
+}

002_source/cms/src/components/dashboard/layout/user-popover/supabase-sign-out.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+import { logger } from '@/lib/default-logger';
+import { createClient as createSupabaseClient } from '@/lib/supabase/client';
+import { toast } from '@/components/core/toaster';
+
+export function SupabaseSignOut(): React.JSX.Element {
+  const [supabaseClient] = React.useState<SupabaseClient>(createSupabaseClient());
+
+  const handleSignOut = React.useCallback(async (): Promise<void> => {
+    try {
+      const { error } = await supabaseClient.auth.signOut();
+
+      if (error) {
+        logger.error('Sign out error', error);
+        toast.error('Something went wrong, unable to sign out');
+      } else {
+        // UserProvider will handle Router refresh
+        // After refresh, GuestGuard will handle the redirect
+      }
+    } catch (err) {
+      logger.error('Sign out error', err);
+      toast.error('Something went wrong, unable to sign out');
+    }
+  }, [supabaseClient]);
+
+  return (
+    <MenuItem component="div" onClick={handleSignOut} sx={{ justifyContent: 'center' }}>
+      Sign out
+    </MenuItem>
+  );
+}

002_source/cms/src/components/dashboard/layout/user-popover/user-popover.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import MenuItem from '@mui/material/MenuItem';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { LockKey as LockKeyIcon } from '@phosphor-icons/react/dist/ssr/LockKey';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+
+import type { User } from '@/types/user';
+import { config } from '@/config';
+import { paths } from '@/paths';
+import { AuthStrategy } from '@/lib/auth/strategy';
+
+import { Auth0SignOut } from './auth0-sign-out';
+import { CognitoSignOut } from './cognito-sign-out';
+import { CustomSignOut } from './custom-sign-out';
+import { FirebaseSignOut } from './firebase-sign-out';
+import { SupabaseSignOut } from './supabase-sign-out';
+
+const user = {
+  id: 'USR-000',
+  name: 'Sofia Rivers',
+  avatar: '/assets/avatar.png',
+  email: 'sofia@devias.io',
+} satisfies User;
+
+export interface UserPopoverProps {
+  anchorEl: null | Element;
+  onClose?: () => void;
+  open: boolean;
+}
+
+export function UserPopover({ anchorEl, onClose, open }: UserPopoverProps): React.JSX.Element {
+  return (
+    <Popover
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      onClose={onClose}
+      open={Boolean(open)}
+      slotProps={{ paper: { sx: { width: '280px' } } }}
+      transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+    >
+      <Box sx={{ p: 2 }}>
+        <Typography>{user.name}</Typography>
+        <Typography color="text.secondary" variant="body2">
+          {user.email}
+        </Typography>
+      </Box>
+      <Divider />
+      <List sx={{ p: 1 }}>
+        <MenuItem component={RouterLink} href={paths.dashboard.settings.account} onClick={onClose}>
+          <ListItemIcon>
+            <UserIcon />
+          </ListItemIcon>
+          Account
+        </MenuItem>
+        <MenuItem component={RouterLink} href={paths.dashboard.settings.security} onClick={onClose}>
+          <ListItemIcon>
+            <LockKeyIcon />
+          </ListItemIcon>
+          Security
+        </MenuItem>
+        <MenuItem component={RouterLink} href={paths.dashboard.settings.billing} onClick={onClose}>
+          <ListItemIcon>
+            <CreditCardIcon />
+          </ListItemIcon>
+          Billing
+        </MenuItem>
+      </List>
+      <Divider />
+      <Box sx={{ p: 1 }}>
+        {config.auth.strategy === AuthStrategy.CUSTOM ? <CustomSignOut /> : null}
+        {config.auth.strategy === AuthStrategy.AUTH0 ? <Auth0SignOut /> : null}
+        {config.auth.strategy === AuthStrategy.COGNITO ? <CognitoSignOut /> : null}
+        {config.auth.strategy === AuthStrategy.FIREBASE ? <FirebaseSignOut /> : null}
+        {config.auth.strategy === AuthStrategy.SUPABASE ? <SupabaseSignOut /> : null}
+      </Box>
+    </Popover>
+  );
+}