CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-refinedev--core

React meta-framework for building enterprise CRUD applications with authentication, data management, and headless UI integration

Pending
Overview
Eval results
Files

authentication.mddocs/

Authentication & Authorization

Complete authentication system with login, logout, registration flows, and fine-grained access control for resources and actions.

Capabilities

Authentication Hooks

useLogin Hook

Handles user login operations with credential validation and session management.

/**
 * Handles user login operations
 * @param params - Configuration for login mutation
 * @returns Login mutation function and state
 */
function useLogin<TData = {}, TError = {}, TVariables = {}>(
  params?: UseLoginConfig<TData, TError, TVariables>
): UseLoginReturnType<TData, TError, TVariables>;

interface UseLoginConfig<TData, TError, TVariables> {
  /** React Query mutation options */
  mutationOptions?: UseMutationOptions<TData, TError, TVariables>;
}

interface UseLoginReturnType<TData, TError, TVariables> {
  /** Login mutation function */
  mutate: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => void;
  /** Async login mutation function */
  mutateAsync: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => Promise<TData>;
  /** React Query mutation result */
  mutation: UseMutationResult<TData, TError, TVariables>;
}

Usage Example:

import { useLogin } from "@refinedev/core";

function LoginForm() {
  const { mutate: login, isLoading } = useLogin<
    { success: boolean },
    { message: string },
    { email: string; password: string }
  >();
  
  const handleSubmit = (credentials: { email: string; password: string }) => {
    login(credentials, {
      onSuccess: (data) => {
        console.log("Login successful:", data);
      },
      onError: (error) => {
        console.error("Login failed:", error.message);
      }
    });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" placeholder="Email" />
      <input name="password" type="password" placeholder="Password" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Logging in..." : "Login"}
      </button>
    </form>
  );
}

useLogout Hook

Handles user logout operations and session cleanup.

/**
 * Handles user logout operations
 * @param params - Configuration for logout mutation
 * @returns Logout mutation function and state
 */
function useLogout<TData = {}, TError = {}, TVariables = {}>(
  params?: UseLogoutConfig<TData, TError, TVariables>
): UseLogoutReturnType<TData, TError, TVariables>;

interface UseLogoutConfig<TData, TError, TVariables> {
  /** React Query mutation options */
  mutationOptions?: UseMutationOptions<TData, TError, TVariables>;
}

interface UseLogoutReturnType<TData, TError, TVariables> {
  /** Logout mutation function */
  mutate: (variables?: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => void;
  /** Async logout mutation function */
  mutateAsync: (variables?: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => Promise<TData>;
  /** React Query mutation result */
  mutation: UseMutationResult<TData, TError, TVariables>;
}

useRegister Hook

Handles user registration with validation and automatic login.

/**
 * Handles user registration
 * @param params - Configuration for registration mutation
 * @returns Registration mutation function and state
 */
function useRegister<TData = {}, TError = {}, TVariables = {}>(
  params?: UseRegisterConfig<TData, TError, TVariables>
): UseRegisterReturnType<TData, TError, TVariables>;

interface UseRegisterConfig<TData, TError, TVariables> {
  /** React Query mutation options */
  mutationOptions?: UseMutationOptions<TData, TError, TVariables>;
}

interface UseRegisterReturnType<TData, TError, TVariables> {
  /** Registration mutation function */
  mutate: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => void;
  /** Async registration mutation function */
  mutateAsync: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => Promise<TData>;
  /** React Query mutation result */
  mutation: UseMutationResult<TData, TError, TVariables>;
}

useIsAuthenticated Hook

Checks current authentication status and manages authentication state.

/**
 * Checks if user is authenticated
 * @param params - Configuration for authentication check
 * @returns Authentication status query result
 */
function useIsAuthenticated<TData = {}>(
  params?: UseIsAuthenticatedConfig<TData>
): UseIsAuthenticatedReturnType<TData>;

interface UseIsAuthenticatedConfig<TData> {
  /** Additional parameters for auth check */
  params?: any;
  /** React Query options */
  queryOptions?: UseQueryOptions<TData>;
}

interface UseIsAuthenticatedReturnType<TData> {
  /** Query result with authentication status */
  query: UseQueryResult<TData>;
  /** Authentication check result */
  data: CheckResponse | undefined;
  /** Whether the check is loading */
  isLoading: boolean;
  /** Whether the check has error */
  isError: boolean;
  /** Error if authentication check failed */
  error: unknown;
}

interface CheckResponse {
  /** Whether user is authenticated */
  authenticated: boolean;
  /** Redirect URL if not authenticated */
  redirectTo?: string;
  /** Whether to show logout button */
  logout?: boolean;
  /** Error information */
  error?: Error;
}

Usage Example:

import { useIsAuthenticated } from "@refinedev/core";

function AuthChecker() {
  const { data: authData, isLoading } = useIsAuthenticated();
  
  if (isLoading) {
    return <div>Checking authentication...</div>;
  }
  
  if (authData?.authenticated) {
    return <div>User is logged in</div>;
  }
  
  return <div>User needs to login</div>;
}

useGetIdentity Hook

Retrieves current user identity and profile information.

/**
 * Gets current user identity/profile
 * @param params - Configuration for identity query
 * @returns User identity query result
 */
function useGetIdentity<TData = {}>(
  params?: UseGetIdentityConfig<TData>
): UseGetIdentityReturnType<TData>;

interface UseGetIdentityConfig<TData> {
  /** React Query options */
  queryOptions?: UseQueryOptions<TData>;
}

interface UseGetIdentityReturnType<TData> {
  /** Query result with user identity */
  query: UseQueryResult<TData>;
  /** User identity data */
  data: TData | undefined;
}

usePermissions Hook

Retrieves user permissions for access control decisions.

/**
 * Gets user permissions
 * @param params - Configuration for permissions query
 * @returns User permissions query result
 */
function usePermissions<TData = any>(
  params?: UsePermissionsConfig<TData>
): UsePermissionsReturnType<TData>;

interface UsePermissionsConfig<TData> {
  /** Additional parameters for permission check */
  params?: any;
  /** React Query options */
  queryOptions?: UseQueryOptions<TData>;
}

interface UsePermissionsReturnType<TData> {
  /** Query result with permissions */
  query: UseQueryResult<TData>;
  /** Permissions data */
  data: TData | undefined;
}

Password Management

useForgotPassword Hook

Handles forgot password flow with email verification.

/**
 * Handles forgot password flow
 * @param params - Configuration for forgot password mutation
 * @returns Forgot password mutation function and state
 */
function useForgotPassword<TData = {}, TError = {}, TVariables = {}>(
  params?: UseForgotPasswordConfig<TData, TError, TVariables>
): UseForgotPasswordReturnType<TData, TError, TVariables>;

interface UseForgotPasswordConfig<TData, TError, TVariables> {
  /** React Query mutation options */
  mutationOptions?: UseMutationOptions<TData, TError, TVariables>;
}

interface UseForgotPasswordReturnType<TData, TError, TVariables> {
  /** Forgot password mutation function */
  mutate: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => void;
  /** Async forgot password mutation function */
  mutateAsync: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => Promise<TData>;
  /** React Query mutation result */
  mutation: UseMutationResult<TData, TError, TVariables>;
}

useUpdatePassword Hook

Handles password update operations with validation.

/**
 * Handles password update
 * @param params - Configuration for password update mutation
 * @returns Password update mutation function and state
 */
function useUpdatePassword<TData = {}, TError = {}, TVariables = {}>(
  params?: UseUpdatePasswordConfig<TData, TError, TVariables>
): UseUpdatePasswordReturnType<TData, TError, TVariables>;

interface UseUpdatePasswordConfig<TData, TError, TVariables> {
  /** React Query mutation options */
  mutationOptions?: UseMutationOptions<TData, TError, TVariables>;
}

interface UseUpdatePasswordReturnType<TData, TError, TVariables> {
  /** Password update mutation function */
  mutate: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => void;
  /** Async password update mutation function */
  mutateAsync: (variables: TVariables, options?: MutationObserverOptions<TData, TError, TVariables>) => Promise<TData>;
  /** React Query mutation result */
  mutation: UseMutationResult<TData, TError, TVariables>;
}

Error Handling

useOnError Hook

Handles authentication-related errors and automatic logout on token expiration.

/**
 * Handles authentication errors
 * @param params - Configuration for error handling
 * @returns Error handling mutation
 */
function useOnError(params?: UseOnErrorConfig): UseOnErrorReturnType;

interface UseOnErrorConfig {
  /** React Query mutation options */
  mutationOptions?: UseMutationOptions<OnErrorResponse, Error, any>;
}

interface UseOnErrorReturnType {
  /** Error handling mutation function */
  mutate: (error: any) => void;
  /** Async error handling function */
  mutateAsync: (error: any) => Promise<OnErrorResponse>;
  /** Mutation result */
  mutation: UseMutationResult<OnErrorResponse, Error, any>;
}

interface OnErrorResponse {
  /** Whether to redirect user */
  redirectTo?: string;
  /** Whether to logout user */
  logout?: boolean;
  /** Error message to display */
  error?: Error;
}

Access Control

useCan Hook

Checks permissions for specific resources and actions with role-based access control.

/**
 * Checks permissions for actions on resources
 * @param params - Permission check configuration
 * @returns Permission check query result
 */
function useCan(params: UseCanConfig): UseCanReturnType;

interface UseCanConfig {
  /** Resource name to check permissions for */
  resource?: string;
  /** Action to check permissions for */
  action: string;
  /** Additional parameters for permission check */
  params?: CanParams;
  /** React Query options */
  queryOptions?: UseQueryOptions<CanReturnType>;
}

interface UseCanReturnType {
  /** Query result with permission status */
  query: UseQueryResult<CanReturnType>;
  /** Permission check result */
  data: CanReturnType | undefined;
}

interface CanReturnType {
  /** Whether access is granted */
  can: boolean;
  /** Reason for denial if access not granted */
  reason?: string;
}

interface CanParams {
  /** Resource being accessed */
  resource?: string;
  /** Action being performed */
  action?: string;
  /** Record ID being accessed */
  id?: BaseKey;
  /** Additional context data */
  [key: string]: any;
}

Usage Example:

import { useCan } from "@refinedev/core";

function PostActions({ postId }: { postId: string }) {
  const { data: canEdit } = useCan({
    resource: "posts",
    action: "edit",
    params: { id: postId }
  });
  
  const { data: canDelete } = useCan({
    resource: "posts", 
    action: "delete",
    params: { id: postId }
  });
  
  return (
    <div>
      {canEdit?.can && (
        <button>Edit Post</button>
      )}
      {canDelete?.can && (
        <button>Delete Post</button>
      )}
      {!canEdit?.can && canEdit?.reason && (
        <p>Cannot edit: {canEdit.reason}</p>
      )}
    </div>
  );
}

Authentication Providers

useAuthenticated Hook

Higher-level authentication check with automatic redirects and loading states.

/**
 * Higher-level authentication check with redirects
 * @param params - Authentication check configuration
 * @returns Authentication check result with redirect handling
 */
function useAuthenticated(params?: UseAuthenticatedConfig): UseAuthenticatedReturnType;

interface UseAuthenticatedConfig {
  /** Parameters for authentication check */
  params?: any;
  /** Where to redirect on authentication failure */
  redirectOnFail?: string;
  /** Whether to append current path to redirect URL */
  appendCurrentPathToQuery?: boolean;
}

interface UseAuthenticatedReturnType {
  /** Whether user is authenticated */
  isLoading: boolean;
  /** Authentication error if any */
  error: any;
  /** Authentication check data */
  data: CheckResponse | undefined;
}

Types

interface AuthProvider {
  /** Login function */
  login: (params: any) => Promise<AuthActionResponse>;
  /** Logout function */
  logout: (params: any) => Promise<AuthActionResponse>;
  /** Check authentication status */
  check: (params?: any) => Promise<CheckResponse>;
  /** Handle authentication errors */
  onError: (error: any) => Promise<OnErrorResponse>;
  /** Register new user */
  register?: (params: any) => Promise<AuthActionResponse>;
  /** Forgot password flow */
  forgotPassword?: (params: any) => Promise<AuthActionResponse>;
  /** Update password */
  updatePassword?: (params: any) => Promise<AuthActionResponse>;
  /** Get user permissions */
  getPermissions?: (params?: any) => Promise<any>;
  /** Get user identity */
  getIdentity?: (params?: any) => Promise<any>;
}

interface AuthActionResponse {
  /** Whether the action was successful */
  success: boolean;
  /** Redirect URL after action */
  redirectTo?: string;
  /** Error information if failed */
  error?: Error;
}

interface IdentityResponse {
  /** User ID */
  id: BaseKey;
  /** User name or display name */
  name: string;
  /** User email */
  email?: string;
  /** User avatar/profile image URL */
  avatar?: string;
  /** Additional user properties */
  [key: string]: any;
}

interface PermissionResponse {
  /** Array of user permissions */
  permissions: string[];
  /** User roles */
  roles?: string[];
  /** Additional permission data */
  [key: string]: any;
}

interface AccessControlProvider {
  /** Check if user can perform action on resource */
  can: (params: CanParams) => Promise<CanReturnType>;
}

interface ValidationErrors {
  [field: string]: string | string[];
}

Install with Tessl CLI

npx tessl i tessl/npm-refinedev--core

docs

application-setup.md

authentication.md

data-operations.md

forms.md

index.md

navigation.md

tables-lists.md

utilities.md

tile.json