React meta-framework for building enterprise CRUD applications with authentication, data management, and headless UI integration
—
Complete authentication system with login, logout, registration flows, and fine-grained access control for resources and actions.
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>
);
}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>;
}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>;
}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>;
}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;
}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;
}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>;
}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>;
}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;
}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>
);
}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;
}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