@authon/react-native 0.1.22 → 0.2.1

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -23,6 +33,9 @@ __export(index_exports, {
   AuthonContext: () => AuthonContext,
   AuthonMobileClient: () => AuthonMobileClient,
   AuthonProvider: () => AuthonProvider,
+  ProviderIcon: () => ProviderIcon,
+  SocialButton: () => SocialButton,
+  SocialButtons: () => SocialButtons,
   useAuthon: () => useAuthon,
   useUser: () => useUser
 });
@@ -38,7 +51,14 @@ var AuthonMobileClient = class {
   apiUrl;
   publishableKey;
   tokens = null;
+  user = null;
   storage = null;
+  refreshTimer = null;
+  listeners = /* @__PURE__ */ new Map();
+  // Cached provider/branding data
+  _providers = [];
+  _branding = null;
+  _initialized = false;
   constructor(config) {
     this.publishableKey = config.publishableKey;
     this.apiUrl = (config.apiUrl || DEFAULT_API_URL).replace(/\/$/, "");
@@ -46,6 +66,7 @@ var AuthonMobileClient = class {
   setStorage(storage) {
     this.storage = storage;
   }
+  // ── Initialization ──
   async initialize() {
     if (!this.storage) return null;
     const stored = await this.storage.getItem(STORAGE_KEY);
@@ -54,6 +75,7 @@ var AuthonMobileClient = class {
       const tokens = JSON.parse(stored);
       if (tokens.expiresAt > Date.now()) {
         this.tokens = tokens;
+        this.scheduleRefresh(tokens.expiresAt);
         return tokens;
       }
       return await this.refreshToken(tokens.refreshToken);
@@ -62,17 +84,39 @@ var AuthonMobileClient = class {
       return null;
     }
   }
+  /** Fetch providers + branding from API (lazy, cached) */
+  async ensureInitialized() {
+    if (this._initialized) return;
+    try {
+      const [branding, providersRes] = await Promise.all([
+        this.request("GET", "/v1/auth/branding"),
+        this.request("GET", "/v1/auth/providers")
+      ]);
+      this._branding = branding;
+      this._providers = providersRes.providers;
+      this._initialized = true;
+    } catch (err) {
+      this.emit("error", err instanceof Error ? err : new Error(String(err)));
+    }
+  }
+  // ── Auth ──
   async signIn(params) {
     const res = await this.request("POST", "/v1/auth/signin", params);
     this.tokens = this.toTokenPair(res);
+    this.user = res.user;
     await this.persistTokens();
-    return this.tokens;
+    this.scheduleRefresh(this.tokens.expiresAt);
+    this.emit("signedIn", res.user);
+    return { tokens: this.tokens, user: res.user };
   }
   async signUp(params) {
     const res = await this.request("POST", "/v1/auth/signup", params);
     this.tokens = this.toTokenPair(res);
+    this.user = res.user;
     await this.persistTokens();
-    return this.tokens;
+    this.scheduleRefresh(this.tokens.expiresAt);
+    this.emit("signedIn", res.user);
+    return { tokens: this.tokens, user: res.user };
   }
   async signOut() {
     if (this.tokens) {
@@ -81,19 +125,23 @@ var AuthonMobileClient = class {
       } catch {
       }
     }
-    this.tokens = null;
-    if (this.storage) {
-      await this.storage.removeItem(STORAGE_KEY);
-    }
+    this.clearSession();
+    this.emit("signedOut");
   }
   async getUser() {
     if (!this.tokens) return null;
     try {
-      return await this.request("GET", "/v1/auth/me");
+      const user = await this.request("GET", "/v1/auth/me");
+      this.user = user;
+      return user;
     } catch {
       return null;
     }
   }
+  getCachedUser() {
+    return this.user;
+  }
+  // ── Token management ──
   async refreshToken(refreshToken) {
     const token = refreshToken || this.tokens?.refreshToken;
     if (!token) return null;
@@ -107,13 +155,15 @@ var AuthonMobileClient = class {
         body: JSON.stringify({ refreshToken: token })
       });
       if (!res.ok) {
-        this.tokens = null;
-        if (this.storage) await this.storage.removeItem(STORAGE_KEY);
+        this.clearSession();
         return null;
       }
       const data = await res.json();
       this.tokens = this.toTokenPair(data);
+      this.user = data.user;
       await this.persistTokens();
+      this.scheduleRefresh(this.tokens.expiresAt);
+      this.emit("tokenRefreshed");
       return this.tokens;
     } catch {
       return null;
@@ -125,6 +175,98 @@ var AuthonMobileClient = class {
   isAuthenticated() {
     return this.tokens !== null && this.tokens.expiresAt > Date.now();
   }
+  // ── OAuth ──
+  async getProviders() {
+    await this.ensureInitialized();
+    return this._providers;
+  }
+  async getBranding() {
+    await this.ensureInitialized();
+    return this._branding;
+  }
+  async getOAuthUrl(provider, redirectUri) {
+    const params = new URLSearchParams({ redirectUri, flow: "redirect" });
+    return await this.request(
+      "GET",
+      `/v1/auth/oauth/${provider}/url?${params.toString()}`
+    );
+  }
+  async pollOAuth(state) {
+    try {
+      const res = await fetch(
+        `${this.apiUrl}/v1/auth/oauth/poll?state=${encodeURIComponent(state)}`,
+        { headers: { "x-api-key": this.publishableKey } }
+      );
+      if (!res.ok) return null;
+      const data = await res.json();
+      if (data.status === "completed" && data.accessToken) {
+        return data;
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+  /** Poll for OAuth completion (3 minute timeout, matching JS SDK) */
+  async completeOAuth(state) {
+    const maxAttempts = 360;
+    for (let i = 0; i < maxAttempts; i++) {
+      const result = await this.pollOAuth(state);
+      if (result) {
+        this.tokens = this.toTokenPair(result);
+        this.user = result.user;
+        await this.persistTokens();
+        this.scheduleRefresh(this.tokens.expiresAt);
+        this.emit("signedIn", result.user);
+        return { tokens: this.tokens, user: result.user };
+      }
+      await new Promise((r) => setTimeout(r, 500));
+    }
+    throw new Error("OAuth timeout");
+  }
+  getApiUrl() {
+    return this.apiUrl;
+  }
+  // ── Event system ──
+  on(event, listener) {
+    if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+    const set = this.listeners.get(event);
+    set.add(listener);
+    return () => set.delete(listener);
+  }
+  emit(event, ...args) {
+    this.listeners.get(event)?.forEach((fn) => fn(...args));
+  }
+  // ── Cleanup ──
+  destroy() {
+    this.clearRefreshTimer();
+    this.listeners.clear();
+  }
+  // ── Private ──
+  clearSession() {
+    this.tokens = null;
+    this.user = null;
+    this.clearRefreshTimer();
+    if (this.storage) {
+      this.storage.removeItem(STORAGE_KEY).catch(() => {
+      });
+    }
+  }
+  clearRefreshTimer() {
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+  /** Schedule auto-refresh 60 seconds before token expiry (like JS SDK) */
+  scheduleRefresh(expiresAt) {
+    this.clearRefreshTimer();
+    const refreshIn = Math.max(expiresAt - Date.now() - 6e4, 3e4);
+    this.refreshTimer = setTimeout(() => {
+      this.refreshToken().catch(() => {
+      });
+    }, refreshIn);
+  }
   async persistTokens() {
     if (this.storage && this.tokens) {
       await this.storage.setItem(STORAGE_KEY, JSON.stringify(this.tokens));
@@ -152,7 +294,8 @@ var AuthonMobileClient = class {
     });
     if (!res.ok) {
       const error = await res.json().catch(() => ({ message: res.statusText }));
-      throw new Error(error.message || `Request failed with status ${res.status}`);
+      const msg = Array.isArray(error.message) ? error.message[0] : error.message || `Request failed with status ${res.status}`;
+      throw new Error(msg);
     }
     const text = await res.text();
     return text ? JSON.parse(text) : void 0;
@@ -172,6 +315,8 @@ function AuthonProvider({ children, storage, ...config }) {
     accessToken: null
   });
   const [user, setUser] = (0, import_react.useState)(null);
+  const [providers, setProviders] = (0, import_react.useState)([]);
+  const [branding, setBranding] = (0, import_react.useState)(null);
   if (!clientRef.current) {
     clientRef.current = new AuthonMobileClient(config);
   }
@@ -180,7 +325,13 @@ function AuthonProvider({ children, storage, ...config }) {
     if (storage) {
       client.setStorage(storage);
     }
-    client.initialize().then(async (tokens) => {
+    const init = async () => {
+      const tokens = await client.initialize();
+      await client.ensureInitialized();
+      const p = await client.getProviders();
+      const b = await client.getBranding();
+      setProviders(p);
+      setBranding(b);
       if (tokens) {
         const u = await client.getUser();
         setUser(u);
@@ -194,11 +345,33 @@ function AuthonProvider({ children, storage, ...config }) {
       } else {
         setAuthState((prev) => ({ ...prev, isLoaded: true }));
       }
-    });
+    };
+    init();
+    const unsubs = [
+      client.on("signedOut", () => {
+        setUser(null);
+        setAuthState({
+          isLoaded: true,
+          isSignedIn: false,
+          userId: null,
+          sessionId: null,
+          accessToken: null
+        });
+      }),
+      client.on("tokenRefreshed", () => {
+        const token = client.getAccessToken();
+        if (token) {
+          setAuthState((prev) => ({ ...prev, accessToken: token }));
+        }
+      })
+    ];
+    return () => {
+      unsubs.forEach((fn) => fn());
+      client.destroy();
+    };
   }, []);
   const signIn = (0, import_react.useCallback)(async (params) => {
-    const tokens = await client.signIn(params);
-    const u = await client.getUser();
+    const { tokens, user: u } = await client.signIn(params);
     setUser(u);
     setAuthState({
       isLoaded: true,
@@ -209,8 +382,7 @@ function AuthonProvider({ children, storage, ...config }) {
     });
   }, [client]);
   const signUp = (0, import_react.useCallback)(async (params) => {
-    const tokens = await client.signUp(params);
-    const u = await client.getUser();
+    const { tokens, user: u } = await client.signUp(params);
     setUser(u);
     setAuthState({
       isLoaded: true,
@@ -222,18 +394,37 @@ function AuthonProvider({ children, storage, ...config }) {
   }, [client]);
   const signOut = (0, import_react.useCallback)(async () => {
     await client.signOut();
-    setUser(null);
-    setAuthState({
-      isLoaded: true,
-      isSignedIn: false,
-      userId: null,
-      sessionId: null,
-      accessToken: null
-    });
   }, [client]);
   const getToken = (0, import_react.useCallback)(() => {
     return client.getAccessToken();
   }, [client]);
+  const startOAuth = (0, import_react.useCallback)(
+    async (provider, redirectUri) => {
+      const uri = redirectUri || `${client.getApiUrl()}/v1/auth/oauth/redirect`;
+      return client.getOAuthUrl(provider, uri);
+    },
+    [client]
+  );
+  const completeOAuthCb = (0, import_react.useCallback)(
+    async (state) => {
+      const { tokens, user: u } = await client.completeOAuth(state);
+      setUser(u);
+      setAuthState({
+        isLoaded: true,
+        isSignedIn: true,
+        userId: u?.id || null,
+        sessionId: null,
+        accessToken: tokens.accessToken
+      });
+    },
+    [client]
+  );
+  const on = (0, import_react.useCallback)(
+    (event, listener) => {
+      return client.on(event, listener);
+    },
+    [client]
+  );
   const value = (0, import_react.useMemo)(
     () => ({
       ...authState,
@@ -241,9 +432,15 @@ function AuthonProvider({ children, storage, ...config }) {
       signIn,
       signUp,
       signOut,
-      getToken
+      getToken,
+      providers,
+      branding,
+      startOAuth,
+      completeOAuth: completeOAuthCb,
+      on,
+      client
     }),
-    [authState, user, signIn, signUp, signOut, getToken]
+    [authState, user, signIn, signUp, signOut, getToken, providers, branding, startOAuth, completeOAuthCb, on, client]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthonContext.Provider, { value, children });
 }
@@ -263,11 +460,195 @@ function useUser() {
   const { isLoaded, isSignedIn, user } = useAuthon();
   return { isLoaded, isSignedIn, user };
 }
+
+// src/icons.tsx
+var import_react3 = require("react");
+var import_react_native_svg = __toESM(require("react-native-svg"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function GoogleIcon({ size = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
+  ] });
+}
+function AppleIcon({ size = 20, color = "#fff" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
+}
+function KakaoIcon({ size = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { fill: "#191919", d: "M12 3C6.48 3 2 6.36 2 10.43c0 2.62 1.75 4.93 4.37 6.23l-1.12 4.14c-.1.36.31.65.62.44l4.93-3.26c.39.04.79.06 1.2.06 5.52 0 10-3.36 10-7.61C22 6.36 17.52 3 12 3z" }) });
+}
+function NaverIcon({ size = 20, color = "#fff" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { fill: color, d: "M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845Z" }) });
+}
+function FacebookIcon({ size = 20, color = "#fff" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { fill: color, d: "M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.62 23.1 24 18.1 24 12.07z" }) });
+}
+function GithubIcon({ size = 20, color = "#fff" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" }) });
+}
+function DiscordIcon({ size = 20, color = "#fff" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M20.32 4.37a19.8 19.8 0 00-4.89-1.52.07.07 0 00-.08.04c-.21.38-.44.87-.61 1.26a18.27 18.27 0 00-5.49 0 12.64 12.64 0 00-.62-1.26.07.07 0 00-.08-.04 19.74 19.74 0 00-4.89 1.52.07.07 0 00-.03.03C1.11 8.39.34 12.28.73 16.12a.08.08 0 00.03.06 19.9 19.9 0 005.99 3.03.08.08 0 00.08-.03c.46-.63.87-1.3 1.22-2a.08.08 0 00-.04-.11 13.1 13.1 0 01-1.87-.9.08.08 0 01-.01-.13c.13-.09.25-.19.37-.29a.07.07 0 01.08-.01c3.93 1.8 8.18 1.8 12.07 0a.07.07 0 01.08 0c.12.1.25.2.37.3a.08.08 0 01-.01.12c-.6.35-1.22.65-1.87.9a.08.08 0 00-.04.1c.36.7.77 1.37 1.22 2a.08.08 0 00.08.03 19.83 19.83 0 006-3.03.08.08 0 00.03-.05c.47-4.87-.78-9.09-3.3-12.84a.06.06 0 00-.03-.03zM8.02 13.62c-1.11 0-2.03-1.02-2.03-2.28 0-1.26.9-2.28 2.03-2.28 1.14 0 2.04 1.03 2.03 2.28 0 1.26-.9 2.28-2.03 2.28zm7.5 0c-1.11 0-2.03-1.02-2.03-2.28 0-1.26.9-2.28 2.03-2.28 1.14 0 2.04 1.03 2.03 2.28 0 1.26-.89 2.28-2.03 2.28z" }) });
+}
+function XIcon({ size = 20, color = "#fff" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
+}
+function LineIcon({ size = 20, color = "#fff" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314" }) });
+}
+function MicrosoftIcon({ size = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native_svg.default, { viewBox: "0 0 24 24", width: size, height: size, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Rect, { fill: "#F25022", x: 1, y: 1, width: 10, height: 10 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Rect, { fill: "#7FBA00", x: 13, y: 1, width: 10, height: 10 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Rect, { fill: "#00A4EF", x: 1, y: 13, width: 10, height: 10 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Rect, { fill: "#FFB900", x: 13, y: 13, width: 10, height: 10 })
+  ] });
+}
+var ICON_MAP = {
+  google: GoogleIcon,
+  apple: AppleIcon,
+  kakao: KakaoIcon,
+  naver: NaverIcon,
+  facebook: FacebookIcon,
+  github: GithubIcon,
+  discord: DiscordIcon,
+  x: XIcon,
+  line: LineIcon,
+  microsoft: MicrosoftIcon
+};
+function ProviderIcon({ provider, size = 20, color }) {
+  const Icon = ICON_MAP[provider];
+  if (!Icon) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { size, color });
+}
+
+// src/SocialButton.tsx
+var import_react4 = require("react");
+var import_react_native = require("react-native");
+var import_shared = require("@authon/shared");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SocialButton({
+  provider,
+  onPress,
+  loading = false,
+  disabled = false,
+  label,
+  style,
+  labelStyle,
+  iconSize = 20,
+  borderRadius = 10,
+  height = 48
+}) {
+  const colors = import_shared.PROVIDER_COLORS[provider] || { bg: "#333", text: "#fff" };
+  const displayName = import_shared.PROVIDER_DISPLAY_NAMES[provider] || provider;
+  const buttonLabel = label ?? `Continue with ${displayName}`;
+  const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native.TouchableOpacity,
+    {
+      style: [
+        styles.button,
+        {
+          backgroundColor: colors.bg,
+          borderRadius,
+          height
+        },
+        needsBorder && styles.bordered,
+        style
+      ],
+      onPress: () => onPress(provider),
+      disabled: disabled || loading,
+      activeOpacity: 0.8,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.ActivityIndicator, { color: colors.text, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProviderIcon, { provider, size: iconSize, color: colors.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_native.Text,
+          {
+            style: [
+              styles.label,
+              { color: colors.text },
+              labelStyle
+            ],
+            numberOfLines: 1,
+            children: buttonLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+var styles = import_react_native.StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    paddingHorizontal: 16
+  },
+  bordered: {
+    borderWidth: 1,
+    borderColor: "#dadce0"
+  },
+  label: {
+    fontSize: 15,
+    fontWeight: "600"
+  }
+});
+
+// src/SocialButtons.tsx
+var import_react5 = require("react");
+var import_react_native2 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SocialButtons({
+  onSuccess,
+  onError,
+  style,
+  gap = 10,
+  buttonProps
+}) {
+  const { providers, startOAuth, completeOAuth } = useAuthon();
+  const [loadingProvider, setLoadingProvider] = (0, import_react5.useState)(null);
+  if (providers.length === 0) return null;
+  const handlePress = async (provider) => {
+    setLoadingProvider(provider);
+    try {
+      const { url, state } = await startOAuth(provider);
+      await import_react_native2.Linking.openURL(url);
+      await completeOAuth(state);
+      onSuccess?.();
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      if (error.message !== "OAuth timeout") {
+        onError?.(error);
+      }
+    } finally {
+      setLoadingProvider(null);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.container, { gap }, style], children: providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    SocialButton,
+    {
+      provider,
+      onPress: handlePress,
+      loading: loadingProvider === provider,
+      disabled: !!loadingProvider,
+      ...buttonProps
+    },
+    provider
+  )) });
+}
+var styles2 = import_react_native2.StyleSheet.create({
+  container: {}
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AuthonContext,
   AuthonMobileClient,
   AuthonProvider,
+  ProviderIcon,
+  SocialButton,
+  SocialButtons,
   useAuthon,
   useUser
 });