@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
168 lines (167 loc) • 6.2 kB
TypeScript
'use client';
import { Organization, PasswordResetConfirmRequest, PasswordResetConfirmResponse, PasswordResetResponse, ResendVerificationRequest, ResendVerificationResponse, Session, User, ValidateTokenInputBody, ValidateTokenResponse, VerificationRequest, VerificationResponse } from '@frank-auth/client';
import { AuthError, OrganizationMembership, SDKState, SetActiveParams, SignInParams, SignInResult, SignUpParams, SignUpResult, UpdateUserParams } from '../provider/types';
import { PasswordResetRequest } from '@frank-auth/sdk';
export interface UseAuthReturn {
sdk: SDKState;
isLoaded: boolean;
isLoading: boolean;
isSignedIn: boolean;
user: User | null;
session: Session | null;
organization: Organization | null;
organizationMemberships: OrganizationMembership[];
activeOrganization: Organization | null;
error: AuthError | null;
signIn: (params: SignInParams) => Promise<SignInResult>;
signUp: (params: SignUpParams) => Promise<SignUpResult>;
signOut: () => Promise<void>;
resendVerification: (request: ResendVerificationRequest) => Promise<ResendVerificationResponse>;
verifyIdentity: (type: "email" | "phone", request: VerificationRequest) => Promise<VerificationResponse>;
createSession: (token: string) => Promise<Session>;
setActive: (params: SetActiveParams) => Promise<void>;
setActiveOrganization: (organizationId: string) => Promise<void>;
switchOrganization: (organizationId: string) => Promise<void>;
updateUser: (params: UpdateUserParams) => Promise<User>;
deleteUser: () => Promise<void>;
reload: () => Promise<void>;
resetPassword: (params: PasswordResetConfirmRequest) => Promise<PasswordResetConfirmResponse>;
requestPasswordReset: (request: PasswordResetRequest) => Promise<PasswordResetResponse>;
extractEmailFromUrl: (url?: string) => (string | null);
extractTokenFromUrl: (url?: string) => (string | null);
validateToken: (request: ValidateTokenInputBody) => Promise<ValidateTokenResponse>;
userId: string | null;
userEmail: string | null;
userName: string | null;
organizationId: string | null;
organizationName: string | null;
userType: string | null;
hasOrganization: boolean;
isOrganizationMember: boolean;
isOrganizationAdmin: boolean;
isAuthenticated: boolean;
requiresVerification: boolean;
requiresMFA: boolean;
}
/**
* Main authentication hook providing access to all authentication functionality
*
* @example Basic usage
* ```tsx
* import { useAuth } from '@frank-auth/react';
*
* function MyComponent() {
* const { user, signIn, signOut, isLoaded } = useAuth();
*
* if (!isLoaded) return <div>Loading...</div>;
*
* if (!user) {
* return <button onClick={() => signIn({ strategy: 'password', identifier: 'user@example.com', password: 'password' })}>
* Sign In
* </button>;
* }
*
* return (
* <div>
* <p>Welcome, {user.firstName}!</p>
* <button onClick={signOut}>Sign Out</button>
* </div>
* );
* }
* ```
*
* @example Organization management
* ```tsx
* function OrganizationSwitcher() {
* const { organizationMemberships, activeOrganization, switchOrganization } = useAuth();
*
* return (
* <select
* value={activeOrganization?.id || ''}
* onChange={(e) => switchOrganization(e.target.value)}
* >
* {organizationMemberships.map((membership) => (
* <option key={membership.organization.id} value={membership.organization.id}>
* {membership.organization.name}
* </option>
* ))}
* </select>
* );
* }
* ```
*/
export declare function useAuth(): UseAuthReturn;
/**
* Hook for authentication state only (no methods)
* Useful for components that only need to display auth state
*/
export declare function useAuthState(): {
isLoaded: boolean;
isLoading: boolean;
isSignedIn: boolean;
user: User | null;
session: Session | null;
organization: Organization | null;
activeOrganization: Organization | null;
error: AuthError | null;
userId: string | null;
userEmail: string | null;
userName: string | null;
organizationId: string | null;
organizationName: string | null;
userType: string | null;
hasOrganization: boolean;
isOrganizationMember: boolean;
isOrganizationAdmin: boolean;
isAuthenticated: boolean;
requiresVerification: boolean;
requiresMFA: boolean;
};
/**
* Hook for authentication methods only
* Useful for forms and action components
*/
export declare function useAuthActions(): {
signIn: (params: SignInParams) => Promise<SignInResult>;
signUp: (params: SignUpParams) => Promise<SignUpResult>;
signOut: () => Promise<void>;
createSession: (token: string) => Promise<Session>;
setActive: (params: SetActiveParams) => Promise<void>;
setActiveOrganization: (organizationId: string) => Promise<void>;
switchOrganization: (organizationId: string) => Promise<void>;
updateUser: (params: UpdateUserParams) => Promise<User>;
deleteUser: () => Promise<void>;
reload: () => Promise<void>;
};
/**
* Hook for organization-specific authentication data
* Useful for multi-tenant applications
*/
export declare function useAuthOrganization(): {
organization: Organization | null;
organizationMemberships: OrganizationMembership[];
activeOrganization: Organization | null;
organizationId: string | null;
organizationName: string | null;
hasOrganization: boolean;
isOrganizationMember: boolean;
isOrganizationAdmin: boolean;
setActiveOrganization: (organizationId: string) => Promise<void>;
switchOrganization: (organizationId: string) => Promise<void>;
};
/**
* Authentication status hook with loading states
* Useful for conditional rendering based on auth status
*/
export declare function useAuthStatus(): {
isLoaded: boolean;
isLoading: boolean;
isSignedIn: boolean;
isAuthenticated: boolean;
requiresVerification: boolean;
requiresMFA: boolean;
hasError: boolean;
error: AuthError | null;
status: string;
};
//# sourceMappingURL=use-auth.d.ts.map