@magic-ext/magic-widget 0.1.0

package/dist/cjs/types/MagicWidget.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function MagicWidget(): React.JSX.Element;

package/dist/cjs/types/components/EmailInput.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmailInput: () => React.JSX.Element;

package/dist/cjs/types/components/Pending.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface PendingProps {
+    onPressBack: () => void;
+    title: string;
+    description: string;
+    Icon: React.ElementType;
+    isPending: boolean;
+    errorMessage: string | null;
+}
+export declare const Pending: ({ onPressBack, title, description, Icon, isPending, errorMessage }: PendingProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/components/ProviderButton.d.ts

@@ -0,0 +1,9 @@
+import React, { ElementType } from 'react';
+interface ProviderButtonProps {
+    label?: string;
+    Icon: ElementType;
+    onPress: () => void;
+    hideLabel?: boolean;
+}
+export declare const ProviderButton: ({ label, Icon, onPress, hideLabel }: ProviderButtonProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/components/SocialProviders.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OAuthProvider } from '../types';
+import { WidgetAction } from 'src/reducer';
+interface SocialProvidersProps {
+    providers: OAuthProvider[];
+    onPress: (provider: OAuthProvider) => void;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const SocialProviders: ({ providers, onPress, dispatch }: SocialProvidersProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/components/WidgetHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type WidgetHeaderProps = {
+    showHeaderText?: boolean;
+    onPressBack?: () => void;
+};
+export default function WidgetHeader({ showHeaderText, onPressBack }: WidgetHeaderProps): React.JSX.Element;
+export {};

package/dist/cjs/types/constants.d.ts

@@ -0,0 +1,3 @@
+import { OAuthProvider, ProviderMetadata, ThirdPartyWallets } from './types';
+export declare const WALLET_METADATA: Record<ThirdPartyWallets, ProviderMetadata>;
+export declare const OAUTH_METADATA: Record<OAuthProvider, ProviderMetadata>;

package/dist/cjs/types/context/EmailLoginContext.d.ts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { WidgetAction } from '../reducer';
+interface EmailLoginContextValue {
+    /** Start the email OTP login flow */
+    startEmailLogin: (email: string) => void;
+    /** Submit the OTP code for verification */
+    submitOTP: (otp: string) => void;
+    /** Submit the TOTP code for MFA verification */
+    submitMFA: (totp: string) => void;
+    /** Lost device */
+    lostDevice: () => void;
+    /** Submit recovery code for verification */
+    submitRecoveryCode: (recoveryCode: string) => void;
+    /** Cancel the current login flow */
+    cancelLogin: () => void;
+    /** Retry device verification */
+    retryDeviceVerification: () => void;
+    /** Resend the email OTP */
+    resendEmailOTP: () => void;
+    /** Current email being used for login */
+    email: string | null;
+}
+interface EmailLoginProviderProps {
+    children: ReactNode;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare function EmailLoginProvider({ children, dispatch }: EmailLoginProviderProps): React.JSX.Element;
+/**
+ * Hook to access the email login context
+ * @throws Error if used outside of EmailLoginProvider
+ */
+export declare function useEmailLogin(): EmailLoginContextValue;
+export {};

package/dist/cjs/types/context/index.d.ts

@@ -0,0 +1 @@
+export { EmailLoginProvider, useEmailLogin } from './EmailLoginContext';

package/dist/cjs/types/extension.d.ts

@@ -0,0 +1,180 @@
+import { Extension, SDKBase } from '@magic-sdk/provider';
+import { JsonRpcRequestPayload } from '@magic-sdk/types';
+import { ClientConfig } from './types/client-config';
+export declare const MAGIC_WIDGET_PROVIDER = "magic-widget";
+export type OAuthProvider = 'google' | 'facebook' | 'apple' | 'github' | 'bitbucket' | 'gitlab' | 'linkedin' | 'twitter' | 'discord' | 'twitch' | 'microsoft';
+export interface OpenIDConnectUserInfo {
+    name?: string;
+    familyName?: string;
+    givenName?: string;
+    middleName?: string;
+    nickname?: string;
+    preferredUsername?: string;
+    profile?: string;
+    picture?: string;
+    website?: string;
+    email?: string;
+    emailVerified?: boolean;
+    gender?: string;
+    birthdate?: string;
+    zoneinfo?: string;
+    locale?: string;
+    phoneNumber?: string;
+    phoneNumberVerified?: boolean;
+    sub?: string;
+    sources?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface MagicUserMetadata {
+    issuer: string | null;
+    publicAddress: string | null;
+    email: string | null;
+    phoneNumber?: string | null;
+    isMfaEnabled?: boolean;
+    recoveryFactors?: Array<{
+        type: string;
+        value: string;
+    }>;
+}
+export interface OAuthRedirectResult {
+    oauth: {
+        provider: OAuthProvider;
+        scope: string[];
+        userHandle: string;
+        userInfo: OpenIDConnectUserInfo;
+    };
+    magic: {
+        idToken: string;
+        userMetadata: MagicUserMetadata;
+    };
+}
+export interface OAuthRedirectError {
+    provider: OAuthProvider;
+    error: string;
+    error_description?: string;
+    error_uri?: string;
+}
+export interface SiweGenerateNonceParams {
+    address?: string;
+}
+export interface SiweGenerateMessageParams {
+    address: string;
+    chainId?: number;
+    statement?: string;
+}
+export interface SiweLoginParams {
+    message: string;
+    signature: string;
+}
+/**
+ * Get the initialized MagicWidgetExtension instance.
+ * Used internally by React components to access SIWE methods.
+ * @throws Error if extension hasn't been initialized yet
+ */
+export declare function getExtensionInstance(): MagicWidgetExtension;
+export declare class MagicWidgetExtension extends Extension.Internal<'magicWidget'> {
+    name: "magicWidget";
+    config: {};
+    private clientConfig;
+    private configPromise;
+    private eventsListenerAdded;
+    private reconnectPromise;
+    constructor();
+    /**
+     * Called by Magic SDK when the extension is initialized.
+     * We override to store a reference for internal React component access.
+     */
+    init(sdk: SDKBase): void;
+    private restoreWalletConnection;
+    /**
+     * Set up the connected state after successful SIWE login.
+     * This enables RPC request routing through the 3rd party wallet.
+     */
+    setConnectedState(address: string, chainId?: number): void;
+    /**
+     * Clear the connected state (called on logout/disconnect).
+     */
+    clearConnectedState(): void;
+    /**
+     * Get the current wallet provider from wagmi.
+     * Returns null if not connected.
+     */
+    getWalletProvider(): Promise<any | null>;
+    /**
+     * Execute an RPC request through the connected 3rd party wallet.
+     * This is called by ThirdPartyWalletsModule for magic-widget provider.
+     */
+    walletRequest<T = unknown>(payload: Partial<JsonRpcRequestPayload>): Promise<T>;
+    /**
+     * Set up event listeners for account and chain changes.
+     */
+    private setupEip1193EventListeners;
+    /**
+     * Handle wallet disconnect - clear SDK state AND invalidate Magic iframe session.
+     * Called when user disconnects wallet via wallet extension UI.
+     */
+    private handleWalletDisconnect;
+    private postWalletUpdate;
+    /**
+     * Generate a nonce for SIWE message construction.
+     * This calls the Magic backend to get a unique nonce.
+     */
+    generateNonce(params?: SiweGenerateNonceParams): Promise<string>;
+    /**
+     * Generate a complete SIWE message.
+     * Fetches a nonce from the backend and constructs the message client-side.
+     */
+    generateMessage(params: SiweGenerateMessageParams): Promise<string>;
+    /**
+     * Login with SIWE message and signature.
+     * Sends the signed message to Magic backend for verification and returns a DID token.
+     */
+    login(params: SiweLoginParams): Promise<string>;
+    /**
+     * Login with OAuth popup.
+     * Opens a popup for the specified OAuth provider and returns the result.
+     */
+    loginWithPopup(provider: OAuthProvider): Promise<OAuthRedirectResult>;
+    /**
+     * Fetch client configuration via RPC (proxied through embedded-wallet iframe).
+     * This avoids CORS issues by having the iframe make the request.
+     */
+    fetchConfig(): Promise<ClientConfig>;
+    /**
+     * Get the cached client configuration (synchronous).
+     * Returns null if config hasn't been fetched yet.
+     */
+    getConfig(): ClientConfig | null;
+    /**
+     * Login with Email OTP
+     */
+    loginWithEmailOTP(email: string): import("@magic-sdk/provider").PromiEvent<string | null, {
+        "email-otp-sent": () => void;
+        "login-throttled": () => void;
+        "invalid-email-otp": () => void;
+        "invalid-mfa-otp": () => void;
+        "expired-email-otp": () => void;
+        "mfa-sent-handle": () => void;
+        "recovery-code-sent-handle": () => void;
+        "invalid-recovery-code": () => void;
+        "recovery-code-success": () => void;
+        "Auth/id-token-created": (idToken: string) => void;
+        "Wallet/wallet-info-fetched": () => void;
+        "verify-email-otp": (otp: string) => void;
+        "verify-mfa-code": (mfa: string) => void;
+        "lost-device": () => void;
+        "verify-recovery-code": (recoveryCode: string) => void;
+        cancel: () => void;
+    } & {
+        "device-needs-approval": () => void;
+        "device-verification-email-sent": () => void;
+        "device-verification-link-expired": () => void;
+        "device-approved": () => void;
+        "device-retry": () => void;
+    } & {
+        done: (result: string | null) => void;
+        error: (reason: any) => void;
+        settled: () => void;
+        "closed-by-user": () => void;
+    }>;
+}

package/dist/cjs/types/hooks/useOAuthLogin.d.ts

@@ -0,0 +1,9 @@
+import { OAuthProvider, OAuthRedirectResult } from '../extension';
+export interface UseOAuthLoginResult {
+    performOAuthLogin: (provider: OAuthProvider) => Promise<OAuthRedirectResult>;
+    isLoading: boolean;
+    error: Error | null;
+    isSuccess: boolean;
+    result: OAuthRedirectResult | null;
+}
+export declare function useOAuthLogin(): UseOAuthLoginResult;

package/dist/cjs/types/hooks/useSiweLogin.d.ts

@@ -0,0 +1,8 @@
+export interface UseSiweLoginResult {
+    performSiweLogin: (address: string, chainId?: number) => Promise<string>;
+    isLoading: boolean;
+    error: Error | null;
+    isSuccess: boolean;
+    publicAddress: string | null;
+}
+export declare function useSiweLogin(): UseSiweLoginResult;

package/dist/cjs/types/hooks/useWalletConnect.d.ts

@@ -0,0 +1,12 @@
+import { ThirdPartyWallets } from '../types';
+export interface UseWalletConnectResult {
+    connectWallet: () => Promise<void>;
+    isPending: boolean;
+    error: Error | null;
+    address: `0x${string}` | undefined;
+    isConnected: boolean;
+    /** Whether the currently connected wallet matches the selected provider */
+    isConnectedToSelectedProvider: boolean;
+    disconnect: () => void;
+}
+export declare function useWalletConnect(provider: ThirdPartyWallets): UseWalletConnectResult;

package/dist/cjs/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MagicWidget';
+export * from './extension';

package/dist/cjs/types/lib/provider-config.d.ts

@@ -0,0 +1,2 @@
+import { LoginProvider, ProviderConfig } from '../types';
+export declare function getProviderConfig(provider: LoginProvider): ProviderConfig;

package/dist/cjs/types/lib/validators.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Function to check if an email belongs to a sanctioned domain
+ * @param {string} email - The email address to be checked
+ * @returns {boolean} - Returns true if the email is allowed, false otherwise
+ */
+export declare function isSanctionedEmail(email: string): boolean;
+/**
+ * Returns `true` if the given `source` is an email address, `false` otherwise.
+ */
+export declare function isValidEmail(source?: string | null): boolean;

package/dist/cjs/types/reducer.d.ts

@@ -0,0 +1,61 @@
+import { LoginProvider, OAuthProvider, ThirdPartyWallets } from './types';
+export type View = 'login' | 'otp' | 'additional_providers' | 'wallet_pending' | 'oauth_pending' | 'email_otp_pending' | 'device_verification' | 'mfa_pending' | 'recovery_code' | 'lost_recovery_code' | 'login_success';
+export type EmailLoginStatus = 'idle' | 'sending' | 'otp_sent' | 'verifying_otp' | 'invalid_otp' | 'expired_otp' | 'device_needs_approval' | 'device_verification_sent' | 'device_verification_expired' | 'device_approved' | 'mfa_required' | 'recovery_code' | 'success' | 'mfa_verifying' | 'mfa_invalid' | 'recovery_code_verifying' | 'lost_recovery_code' | 'error';
+export interface WidgetState {
+    view: View;
+    email?: string;
+    selectedProvider?: LoginProvider;
+    error?: string;
+    emailLoginStatus?: EmailLoginStatus;
+}
+export type WidgetAction = {
+    type: 'GO_TO_LOGIN';
+} | {
+    type: 'EMAIL_OTP_START';
+    email: string;
+} | {
+    type: 'EMAIL_OTP_SENT';
+} | {
+    type: 'EMAIL_OTP_INVALID';
+} | {
+    type: 'EMAIL_OTP_EXPIRED';
+} | {
+    type: 'EMAIL_OTP_VERIFYING';
+} | {
+    type: 'DEVICE_NEEDS_APPROVAL';
+} | {
+    type: 'DEVICE_VERIFICATION_SENT';
+} | {
+    type: 'DEVICE_VERIFICATION_EXPIRED';
+} | {
+    type: 'DEVICE_APPROVED';
+} | {
+    type: 'MFA_REQUIRED';
+} | {
+    type: 'MFA_VERIFYING';
+} | {
+    type: 'MFA_INVALID';
+} | {
+    type: 'LOST_DEVICE';
+} | {
+    type: 'RECOVERY_CODE_VERIFYING';
+} | {
+    type: 'LOST_RECOVERY_CODE';
+} | {
+    type: 'LOGIN_SUCCESS';
+} | {
+    type: 'RESET_EMAIL_ERROR';
+} | {
+    type: 'LOGIN_ERROR';
+    error: string;
+} | {
+    type: 'SELECT_PROVIDER';
+    provider: OAuthProvider;
+} | {
+    type: 'GO_TO_ADDITIONAL_PROVIDERS';
+} | {
+    type: 'SELECT_WALLET';
+    provider: ThirdPartyWallets;
+};
+export declare const initialState: WidgetState;
+export declare function widgetReducer(state: WidgetState, action: WidgetAction): WidgetState;

package/dist/cjs/types/types/client-config.d.ts

@@ -0,0 +1,19 @@
+export interface ClientTheme {
+    appName: string;
+    assetUri: string;
+    textColor: `#${string}`;
+    buttonColor: `#${string}` | undefined;
+    buttonRadius: string | undefined;
+    containerRadius: string | undefined;
+    backgroundColor: `#${string}` | undefined;
+    themeColor: 'auto' | 'dark' | 'light';
+}
+export interface ClientConfig {
+    clientId: string;
+    theme: ClientTheme;
+    authProviders: {
+        primary: string[];
+        secondary: string[];
+        social: string[];
+    };
+}

package/dist/cjs/types/types.d.ts

@@ -0,0 +1,44 @@
+import { ComponentType } from 'react';
+export declare enum ThirdPartyWallets {
+    METAMASK = "metamask",
+    WALLETCONNECT = "walletconnect",
+    COINBASE = "coinbase",
+    PHANTOM = "phantom",
+    RABBY = "rabby"
+}
+export interface ProviderMetadata {
+    displayName: string;
+    Icon: ComponentType<{
+        width?: number;
+        height?: number;
+        className?: string;
+    }>;
+}
+export declare enum RpcErrorMessage {
+    MalformedEmail = "Invalid params: Please provide a valid email address.",
+    SanEmail = "We are unable to create an account with that email."
+}
+export declare enum OAuthProvider {
+    GOOGLE = "google",
+    APPLE = "apple",
+    FACEBOOK = "facebook",
+    GITHUB = "github",
+    TWITTER = "twitter",
+    LINKEDIN = "linkedin",
+    MICROSOFT = "microsoft",
+    TWITCH = "twitch",
+    BITBUCKET = "bitbucket",
+    DISCORD = "discord",
+    GITLAB = "gitlab",
+    TELEGRAM = "telegram"
+}
+export type LoginProvider = OAuthProvider | ThirdPartyWallets;
+export interface ProviderConfig {
+    title: string;
+    description: string;
+    Icon: ComponentType<{
+        width?: number;
+        height?: number;
+        className?: string;
+    }>;
+}

package/dist/cjs/types/views/AdditionalProvidersView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetAction } from 'src/reducer';
+interface AdditionalProvidersViewProps {
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export default function AdditionalProvidersView({ dispatch }: AdditionalProvidersViewProps): React.JSX.Element;
+export {};

package/dist/cjs/types/views/DeviceVerificationView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from '../reducer';
+interface DeviceVerificationViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const DeviceVerificationView: ({ state, dispatch }: DeviceVerificationViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/views/EmailOTPView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from '../reducer';
+interface EmailOTPViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const EmailOTPView: ({ state, dispatch }: EmailOTPViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/views/LoginSuccessView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetState } from '../reducer';
+interface LoginSuccessViewProps {
+    state: WidgetState;
+}
+export declare const LoginSuccessView: ({ state }: LoginSuccessViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/views/LoginView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetAction } from '../reducer';
+interface LoginViewProps {
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const LoginView: ({ dispatch }: LoginViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/views/LostRecoveryCode.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LostRecoveryCode: () => React.JSX.Element;

package/dist/cjs/types/views/MfaView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from 'src/reducer';
+interface MFAViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const MFAView: ({ state, dispatch }: MFAViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/views/OAuthPendingView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WidgetAction } from '../reducer';
+import { OAuthProvider } from '../types';
+interface OAuthPendingViewProps {
+    provider: OAuthProvider;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const OAuthPendingView: ({ provider, dispatch }: OAuthPendingViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/views/RecoveryCode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetAction, WidgetState } from 'src/reducer';
+interface RecoveryCodeViewProps {
+    state: WidgetState;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const RecoveryCodeView: ({ state, dispatch }: RecoveryCodeViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/views/WalletPendingView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WidgetAction } from '../reducer';
+import { ThirdPartyWallets } from '../types';
+interface WalletPendingViewProps {
+    provider: ThirdPartyWallets;
+    dispatch: React.Dispatch<WidgetAction>;
+}
+export declare const WalletPendingView: ({ provider, dispatch }: WalletPendingViewProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/wagmi/config.d.ts

@@ -0,0 +1,6 @@
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
+import type { AppKitNetwork } from '@reown/appkit/networks';
+export declare const projectId = "141e0e0e531b47a47d662bca4eb70fae";
+export declare const networks: [AppKitNetwork, ...AppKitNetwork[]];
+export declare const wagmiAdapter: WagmiAdapter;
+export declare const wagmiConfig: import("wagmi").Config;

package/dist/cjs/types/wagmi/connectors.d.ts

@@ -0,0 +1,9 @@
+import { ThirdPartyWallets } from '../types';
+/**
+ * Map ThirdPartyWallets enum to wagmi connector IDs
+ */
+export declare const CONNECTOR_IDS: Record<ThirdPartyWallets, string>;
+/**
+ * Alternative names to match connectors by name if ID doesn't match
+ */
+export declare const CONNECTOR_NAME_PATTERNS: Record<ThirdPartyWallets, string>;