Authentication

/**
 * Main login page component with Material UI styling
 * @param props - Login page configuration props
 * @returns Complete login page with form and styling
 */
function Login(props: LoginProps): ReactElement;

interface LoginProps extends HtmlHTMLAttributes<HTMLDivElement> {
  /** Background image URL for login page */
  backgroundImage?: string;
  /** Custom login form component or any content */
  children?: ReactNode;
  /** CSS class name for styling */
  className?: string;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { Login } from "ra-ui-materialui";

// Basic login page
const MyLogin = () => <Login />;

// Custom login with background
const CustomLogin = () => (
  <Login 
    backgroundImage="/admin-background.jpg"
    theme={nanoDarkTheme}
  />
);

/**
 * Login form component with username/password fields
 * @param props - Login form configuration props
 * @returns Form component with validation and submission
 */
function LoginForm(props: LoginFormProps): ReactElement;

interface LoginFormProps {
  /** Redirect path after successful login */
  redirectTo?: string;
  /** Custom submit button component */
  submitButton?: ReactElement;
  /** Whether to validate on blur */
  validateOnBlur?: boolean;
}

import { LoginForm } from "ra-ui-materialui";

// Basic login form
const MyLoginForm = () => <LoginForm />;

// Custom login form with redirect
const CustomLoginForm = () => (
  <LoginForm 
    redirectTo="/dashboard"
    validateOnBlur={true}
  />
);

/**
 * Logout button component with confirmation
 * @param props - Logout button configuration props
 * @returns Logout button with confirmation dialog
 */
function Logout(props: LogoutProps): ReactElement;

interface LogoutProps {
  /** Button label text */
  label?: string;
  /** Button icon component */
  icon?: ReactElement;
  /** Redirect path after logout */
  redirectTo?: string;
  /** Click handler */
  onClick?: () => void;
  /** Button className */
  className?: string;
}

import { Logout } from "ra-ui-materialui";
import { ExitToApp } from "@mui/icons-material";

// Basic logout button
const MyLogout = () => <Logout />;

// Custom logout with icon
const CustomLogout = () => (
  <Logout 
    label="Sign Out"
    icon={<ExitToApp />}
    redirectTo="/login"
  />
);

/**
 * User menu dropdown component for authenticated users
 * @param props - User menu configuration props
 * @returns Dropdown menu with user options
 */
function UserMenu(props: UserMenuProps): ReactElement;

interface UserMenuProps {
  /** Custom logout component */
  logout?: ReactElement;
  /** Custom profile menu component */
  profileMenu?: ReactElement;
  /** User menu icon */
  icon?: ReactElement;
  /** Menu label */
  label?: string;
}

import { UserMenu, Logout } from "ra-ui-materialui";
import { AccountCircle } from "@mui/icons-material";

// Basic user menu
const MyUserMenu = () => <UserMenu />;

// Custom user menu with components
const CustomUserMenu = () => (
  <UserMenu 
    icon={<AccountCircle />}
    logout={<Logout label="Log Out" />}
    label="Profile"
  />
);

/**
 * Authentication callback page for external auth services
 * @returns Callback handling component with loading or error state
 */
function AuthCallback(): ReactElement;

import { AuthCallback } from "ra-ui-materialui";

// Set as auth callback page in Admin
const App = () => (
  <Admin authCallbackPage={AuthCallback} authProvider={authProvider}>
    {/* admin content */}
  </Admin>
);

/**
 * Authentication error page component
 * @param props - Error page configuration props
 * @returns Error page with message and login link
 */
function AuthError(props: AuthErrorProps): ReactElement;

interface AuthErrorProps {
  /** CSS class name for styling */
  className?: string;
  /** Error page title (translation key or text) */
  title?: string;
  /** Error message (translation key or text) */
  message?: string;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { AuthError } from "ra-ui-materialui";

// Basic auth error page
const MyAuthError = () => <AuthError />;

// Custom auth error with message
const CustomAuthError = () => (
  <AuthError 
    title="Authentication Failed"
    message="Invalid credentials. Please try again."
  />
);

/**
 * Hook for accessing current user identity information
 * @returns User identity object with loading and error states
 */
function useGetIdentity(): {
  data: UserIdentity | undefined;
  error: any;
  loading: boolean;
  refetch: () => void;
};

/**
 * Hook for accessing user permissions
 * @returns User permissions with loading and error states
 */
function usePermissions(): {
  permissions: any;
  error: any;
  loading: boolean;
};

/**
 * Hook for checking authentication status
 * @returns Authentication state with loading and error information
 */
function useAuthState(): {
  loading: boolean;
  loaded: boolean;
  authenticated: boolean | undefined;
  error?: any;
};

import { useGetIdentity, usePermissions } from "ra-ui-materialui";

const UserProfile = () => {
  const { data: identity, loading } = useGetIdentity();
  const { permissions } = usePermissions();
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <div>
      <h2>Welcome {identity?.fullName}</h2>
      <p>Role: {permissions?.role}</p>
    </div>
  );
};

interface UserIdentity {
  id: string | number;
  fullName?: string;
  avatar?: string;
  email?: string;
  [key: string]: any;
}

interface LoginParams {
  username: string;
  password: string;
  [key: string]: any;
}

interface AuthProvider {
  login: (params: LoginParams) => Promise<any>;
  logout: (params: any) => Promise<void | false | string>;
  checkAuth: (params: any) => Promise<void>;
  checkError: (error: any) => Promise<void>;
  getIdentity: () => Promise<UserIdentity>;
  getPermissions: (params: any) => Promise<any>;
}