@frank-auth/react/dist/types/hooks/use-oauth.d.ts

Flexible and customizable React UI components for Frank Authentication

import { AuthProvider } from '@frank-auth/client';
import { AuthError } from '../provider/types';
export interface UseOAuthReturn {
    providers: AuthProvider[];
    isLoading: boolean;
    error: AuthError | null;
    signInWithProvider: (provider: string, options?: OAuthSignInOptions) => Promise<void>;
    handleCallback: (provider: string, code?: string, state?: string) => Promise<OAuthCallbackResult>;
    connectProvider: (provider: string, options?: OAuthConnectOptions) => Promise<void>;
    disconnectProvider: (provider: string) => Promise<void>;
    isProviderConnected: (provider: string) => boolean;
    getProviderInfo: (provider: string) => AuthProvider | null;
    signInWithGoogle: (options?: OAuthSignInOptions) => Promise<void>;
    signInWithMicrosoft: (options?: OAuthSignInOptions) => Promise<void>;
    signInWithGitHub: (options?: OAuthSignInOptions) => Promise<void>;
    signInWithApple: (options?: OAuthSignInOptions) => Promise<void>;
    signInWithFacebook: (options?: OAuthSignInOptions) => Promise<void>;
    signInWithTwitter: (options?: OAuthSignInOptions) => Promise<void>;
    signInWithLinkedIn: (options?: OAuthSignInOptions) => Promise<void>;
    signInWithDiscord: (options?: OAuthSignInOptions) => Promise<void>;
    refreshProviders: () => Promise<void>;
    getAuthUrl: (provider: string, options?: OAuthSignInOptions) => Promise<string>;
}
export interface OAuthSignInOptions {
    redirectUrl?: string;
    scopes?: string[];
    state?: string;
    prompt?: 'none' | 'consent' | 'select_account';
    organizationId?: string;
    connection?: string;
}
export interface OAuthConnectOptions {
    redirectUrl?: string;
    scopes?: string[];
    state?: string;
}
export interface OAuthCallbackResult {
    success: boolean;
    user?: any;
    session?: any;
    error?: string;
}
export declare const OAUTH_PROVIDERS: {
    readonly google: {
        readonly name: "Google";
        readonly displayName: "Google";
        readonly icon: "🔴";
        readonly color: "#4285f4";
        readonly defaultScopes: readonly ["openid", "profile", "email"];
    };
    readonly microsoft: {
        readonly name: "Microsoft";
        readonly displayName: "Microsoft";
        readonly icon: "🟦";
        readonly color: "#00a1f1";
        readonly defaultScopes: readonly ["openid", "profile", "email"];
    };
    readonly github: {
        readonly name: "GitHub";
        readonly displayName: "GitHub";
        readonly icon: "⚫";
        readonly color: "#333333";
        readonly defaultScopes: readonly ["user:email"];
    };
    readonly apple: {
        readonly name: "Apple";
        readonly displayName: "Apple";
        readonly icon: "🍎";
        readonly color: "#000000";
        readonly defaultScopes: readonly ["name", "email"];
    };
    readonly facebook: {
        readonly name: "Facebook";
        readonly displayName: "Facebook";
        readonly icon: "🔵";
        readonly color: "#1877f2";
        readonly defaultScopes: readonly ["email", "public_profile"];
    };
    readonly twitter: {
        readonly name: "Twitter";
        readonly displayName: "Twitter";
        readonly icon: "🐦";
        readonly color: "#1da1f2";
        readonly defaultScopes: readonly ["users.read", "tweet.read"];
    };
    readonly linkedin: {
        readonly name: "LinkedIn";
        readonly displayName: "LinkedIn";
        readonly icon: "🔵";
        readonly color: "#0077b5";
        readonly defaultScopes: readonly ["r_liteprofile", "r_emailaddress"];
    };
    readonly discord: {
        readonly name: "Discord";
        readonly displayName: "Discord";
        readonly icon: "🎮";
        readonly color: "#5865f2";
        readonly defaultScopes: readonly ["identify", "email"];
    };
};
export type OAuthProviderType = keyof typeof OAUTH_PROVIDERS;
/**
 * OAuth authentication hook providing integration with multiple providers
 *
 * @example Basic OAuth sign-in
 * ```tsx
 * import { useOAuth } from '@frank-auth/react';
 *
 * function OAuthSignIn() {
 *   const {
 *     providers,
 *     signInWithGoogle,
 *     signInWithGitHub,
 *     signInWithProvider,
 *     isLoading
 *   } = useOAuth();
 *
 *   return (
 *     <div>
 *       <h3>Sign in with</h3>
 *       <button
 *         onClick={() => signInWithGoogle()}
 *         disabled={isLoading}
 *       >
 *         Continue with Google
 *       </button>
 *       <button
 *         onClick={() => signInWithGitHub()}
 *         disabled={isLoading}
 *       >
 *         Continue with GitHub
 *       </button>
 *
 *       {providers.map(provider => (
 *         <button
 *           key={provider.name}
 *           onClick={() => signInWithProvider(provider.name)}
 *           disabled={isLoading}
 *         >
 *           Continue with {provider.displayName}
 *         </button>
 *       ))}
 *     </div>
 *   );
 * }
 * ```
 *
 * @example OAuth callback handling
 * ```tsx
 * import { useEffect } from 'react';
 * import { useOAuth } from '@frank-auth/react';
 * import { useSearchParams } from 'react-router-dom';
 *
 * function OAuthCallback() {
 *   const { handleCallback } = useOAuth();
 *   const [searchParams] = useSearchParams();
 *
 *   useEffect(() => {
 *     const code = searchParams.get('code');
 *     const state = searchParams.get('state');
 *     const provider = searchParams.get('provider') || 'google';
 *
 *     if (code) {
 *       handleCallback(provider, code, state)
 *         .then(result => {
 *           if (result.success) {
 *             console.log('OAuth sign-in successful:', result.user);
 *             // Redirect to dashboard or handle success
 *           } else {
 *             console.error('OAuth sign-in failed:', result.error);
 *           }
 *         })
 *         .catch(error => {
 *           console.error('OAuth callback error:', error);
 *         });
 *     }
 *   }, [handleCallback, searchParams]);
 *
 *   return <div>Processing OAuth callback...</div>;
 * }
 * ```
 *
 * @example Provider connection management
 * ```tsx
 * function ConnectedAccounts() {
 *   const {
 *     providers,
 *     isProviderConnected,
 *     connectProvider,
 *     disconnectProvider
 *   } = useOAuth();
 *
 *   return (
 *     <div>
 *       <h3>Connected Accounts</h3>
 *       {providers.map(provider => {
 *         const isConnected = isProviderConnected(provider.name);
 *
 *         return (
 *           <div key={provider.name}>
 *             <span>{provider.displayName}</span>
 *             {isConnected ? (
 *               <button onClick={() => disconnectProvider(provider.name)}>
 *                 Disconnect
 *               </button>
 *             ) : (
 *               <button onClick={() => connectProvider(provider.name)}>
 *                 Connect
 *               </button>
 *             )}
 *           </div>
 *         );
 *       })}
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useOAuth(): UseOAuthReturn;
/**
 * Hook for specific OAuth provider
 */
export declare function useOAuthProvider(providerName: OAuthProviderType): {
    provider: {
        readonly name: "Google";
        readonly displayName: "Google";
        readonly icon: "🔴";
        readonly color: "#4285f4";
        readonly defaultScopes: readonly ["openid", "profile", "email"];
    } | {
        readonly name: "Microsoft";
        readonly displayName: "Microsoft";
        readonly icon: "🟦";
        readonly color: "#00a1f1";
        readonly defaultScopes: readonly ["openid", "profile", "email"];
    } | {
        readonly name: "GitHub";
        readonly displayName: "GitHub";
        readonly icon: "⚫";
        readonly color: "#333333";
        readonly defaultScopes: readonly ["user:email"];
    } | {
        readonly name: "Apple";
        readonly displayName: "Apple";
        readonly icon: "🍎";
        readonly color: "#000000";
        readonly defaultScopes: readonly ["name", "email"];
    } | {
        readonly name: "Facebook";
        readonly displayName: "Facebook";
        readonly icon: "🔵";
        readonly color: "#1877f2";
        readonly defaultScopes: readonly ["email", "public_profile"];
    } | {
        readonly name: "Twitter";
        readonly displayName: "Twitter";
        readonly icon: "🐦";
        readonly color: "#1da1f2";
        readonly defaultScopes: readonly ["users.read", "tweet.read"];
    } | {
        readonly name: "LinkedIn";
        readonly displayName: "LinkedIn";
        readonly icon: "🔵";
        readonly color: "#0077b5";
        readonly defaultScopes: readonly ["r_liteprofile", "r_emailaddress"];
    } | {
        readonly name: "Discord";
        readonly displayName: "Discord";
        readonly icon: "🎮";
        readonly color: "#5865f2";
        readonly defaultScopes: readonly ["identify", "email"];
    };
    providerInfo: AuthProvider | null;
    isConnected: boolean;
    signIn: (options?: OAuthSignInOptions) => Promise<void>;
    connect: (options?: OAuthConnectOptions) => Promise<void>;
    disconnect: () => Promise<void>;
    isLoading: boolean;
    error: AuthError | null;
    isEnabled: boolean;
};
/**
 * Hook for OAuth callback handling
 */
export declare function useOAuthCallback(): {
    processCallback: (provider?: string, code?: string, state?: string) => Promise<OAuthCallbackResult | {
        success: boolean;
        error: any;
    } | undefined>;
    state: "idle" | "success" | "error" | "processing";
    result: OAuthCallbackResult | null;
    isProcessing: boolean;
    isSuccess: boolean;
    isError: boolean;
};
//# sourceMappingURL=use-oauth.d.ts.map