Sistema Auth Multi-Tenant - Guida Utilizzo

import { useUser } from "@/store/hooks/useAuth";
 
function MyComponent() {
  const user = useUser();
 
  if (!user) return <div>Loading...</div>;
 
  return (
    <div>
      <h1>Benvenuto, {user.firstName}!</h1>
      <p>Email: {user.email}</p>
      <p>Ruolo: {user.role}</p>
    </div>
  );
}

import { useTenant } from "@/store/hooks/useAuth";
 
function CompanyInfo() {
  const tenant = useTenant();
 
  if (!tenant) return null;
 
  return (
    <div>
      <h2>{tenant.companyName}</h2>
      <p>P.IVA: {tenant.vatNumber}</p>
      <p>Piano: {tenant.plan}</p>
      <p>
        Indirizzo: {tenant.address}, {tenant.city}
      </p>
    </div>
  );
}

import { useIsAuthenticated } from "@/store/hooks/useAuth";
 
function ProtectedContent() {
  const isAuthenticated = useIsAuthenticated();
 
  if (!isAuthenticated) {
    return <div>Devi effettuare il login</div>;
  }
 
  return <div>Contenuto protetto</div>;
}

import { useAuth } from "@/store/hooks/useAuth";
 
function AuthStatus() {
  const { user, tenant, isLoading, isAuthenticated, error } = useAuth();
 
  if (isLoading) return <div>Caricamento...</div>;
  if (error) return <div>Errore: {error}</div>;
  if (!isAuthenticated) return <div>Non autenticato</div>;
 
  return (
    <div>
      <p>
        Utente: {user?.firstName} {user?.lastName}
      </p>
      <p>Azienda: {tenant?.companyName}</p>
    </div>
  );
}

import { useAppDispatch } from "@/store/hooks";
import { logout } from "@/store/slices/authSlice";
 
function LogoutButton() {
  const dispatch = useAppDispatch();
 
  const handleLogout = async () => {
    await dispatch(logout());
    window.location.href = "/auth/login";
  };
 
  return <button onClick={handleLogout}>Logout</button>;
}

{
  userId: string;
  email: string;
  firstName: string;
  lastName: string;
  phone?: string;
  role: string; // "owner" | "chef" | "manager" | "accountant" | "staff"
  tenant_id: string;
  isActive: boolean;
  lastLogin?: Date;
}

{
  _id: string;
  name: string;
  companyName: string;
  vatNumber?: string;
  taxCode?: string;
  address?: string;
  city?: string;
  postalCode?: string;
  country?: string;
  pec?: string;
  sdi?: string;
  plan: "starter" | "professional" | "enterprise";
  isActive: boolean;
}

"use client";
 
import { useUser, useTenant } from "@/store/hooks/useAuth";
import { Card } from "@/components/ui/card";
 
export default function DashboardPage() {
  const user = useUser();
  const tenant = useTenant();
 
  return (
    <div className="p-6">
      <h1>Dashboard</h1>
 
      {user && (
        <Card className="p-4 mb-4">
          <h2>Informazioni Utente</h2>
          <p>
            Nome: {user.firstName} {user.lastName}
          </p>
          <p>Email: {user.email}</p>
          <p>Ruolo: {user.role}</p>
        </Card>
      )}
 
      {tenant && (
        <Card className="p-4">
          <h2>Informazioni Azienda</h2>
          <p>Ragione Sociale: {tenant.companyName}</p>
          <p>P.IVA: {tenant.vatNumber}</p>
          <p>Piano: {tenant.plan}</p>
        </Card>
      )}
    </div>
  );
}