@oxyhq/services 10.4.0 → 10.5.0

package/lib/commonjs/ui/components/SignInModal.js

@@ -8,39 +8,31 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _socket = _interopRequireDefault(require("socket.io-client"));
-var _reactNativeQrcodeSvg = _interopRequireDefault(require("react-native-qrcode-svg"));
 var _theme = require("@oxyhq/bloom/theme");
 var _button = require("@oxyhq/bloom/button");
 var _loading = require("@oxyhq/bloom/loading");
 var _OxyContext = require("../context/OxyContext.js");
 var _OxyLogo = _interopRequireDefault(require("./OxyLogo.js"));
-var _core = require("@oxyhq/core");
-var _deviceFlowSignIn = require("../../utils/deviceFlowSignIn.js");
+var _AnotherDeviceQR = _interopRequireDefault(require("./AnotherDeviceQR.js"));
+var _useOxyAuthSession = require("../hooks/useOxyAuthSession.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
- * SignInModal - Full screen sign-in modal with QR code
+ * SignInModal - Web-first centered sign-in modal (Continue with Oxy)
  *
- * A semi-transparent full-screen modal that displays:
- * - QR code for scanning with Oxy Accounts app
- * - Button to open the Oxy Auth approval page
+ * A semi-transparent full-screen modal whose primary action is the one-tap
+ * "Continue with Oxy" approval flow. The QR code is demoted to a collapsed
+ * "Sign in on another device" disclosure (you can't scan your own screen).
  *
- * Animates with fade-in effect.
+ * ALL of the auth-session machinery (session-token creation, QR data, socket +
+ * polling, waiting/error/retry state, the open-auth handler, deep-link return,
+ * and cleanup) lives in the shared `useOxyAuthSession` hook, which the native
+ * `OxyAuthScreen` also consumes — neither container re-implements the transport.
+ *
+ * Animates with a fade + scale effect.
  */
 
-const debug = (0, _core.createDebugLogger)('SignInModal');
-const {
-  width: SCREEN_WIDTH,
-  height: SCREEN_HEIGHT
-} = _reactNative.Dimensions.get('window');
-
-// Auth session expiration (5 minutes)
-const AUTH_SESSION_EXPIRY_MS = 5 * 60 * 1000;
-
-// Polling interval (fallback if socket fails)
-const POLLING_INTERVAL_MS = 3000;
 // Store for modal visibility with subscription support
 let modalVisible = false;
 let setModalVisibleCallback = null;
@@ -68,10 +60,6 @@ const subscribeToSignInModal = listener => {
 exports.subscribeToSignInModal = subscribeToSignInModal;
 const SignInModal = () => {
   const [visible, setVisible] = (0, _react.useState)(false);
-  const [authSession, setAuthSession] = (0, _react.useState)(null);
-  const [isLoading, setIsLoading] = (0, _react.useState)(false);
-  const [error, setError] = (0, _react.useState)(null);
-  const [isWaiting, setIsWaiting] = (0, _react.useState)(false);
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const theme = (0, _theme.useTheme)();
   const {
@@ -79,42 +67,59 @@ const SignInModal = () => {
     switchSession,
     clientId
   } = (0, _OxyContext.useOxy)();
-  const socketRef = (0, _react.useRef)(null);
-  const pollingIntervalRef = (0, _react.useRef)(null);
-  const isProcessingRef = (0, _react.useRef)(false);
-
-  // Animation values
-  const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
-  const scale = (0, _reactNativeReanimated.useSharedValue)(0.9);
 
-  // Register callback
+  // Register the imperative visibility callback.
   (0, _react.useEffect)(() => {
     setModalVisibleCallback = setVisible;
     return () => {
       setModalVisibleCallback = null;
     };
   }, []);
+  if (!visible) return null;
+
+  // The hook owns the whole auth-session lifecycle. Mounting it only while the
+  // modal is visible matches the previous behavior (session created on open,
+  // cleaned up on close) — the inner component is unmounted when `visible`
+  // flips false, which runs the hook's unmount cleanup.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SignInModalContent, {
+    theme: theme,
+    insets: insets,
+    oxyServices: oxyServices,
+    switchSession: switchSession,
+    clientId: clientId
+  });
+};
+const SignInModalContent = ({
+  theme,
+  insets,
+  oxyServices,
+  switchSession,
+  clientId
+}) => {
+  const {
+    qrData,
+    isLoading,
+    error,
+    isWaiting,
+    openAuthApproval,
+    retry
+  } = (0, _useOxyAuthSession.useOxyAuthSession)(oxyServices, clientId, switchSession, {
+    onSignedIn: hideSignInModal
+  });
+
+  // Entrance animation.
+  const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
+  const scale = (0, _reactNativeReanimated.useSharedValue)(0.96);
 
-  // Animate in/out
-  // biome-ignore lint/correctness/useExhaustiveDependencies: opacity and scale are Reanimated SharedValues (stable refs) that should not be listed as dependencies
+  // biome-ignore lint/correctness/useExhaustiveDependencies: opacity/scale are Reanimated SharedValues (stable refs) and must not be listed as deps; this runs once on mount to play the entrance.
   (0, _react.useEffect)(() => {
-    if (visible) {
-      opacity.value = (0, _reactNativeReanimated.withTiming)(1, {
-        duration: 250
-      });
-      scale.value = (0, _reactNativeReanimated.withTiming)(1, {
-        duration: 250
-      });
-      generateAuthSession();
-    } else {
-      opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
-        duration: 200
-      });
-      scale.value = (0, _reactNativeReanimated.withTiming)(0.9, {
-        duration: 200
-      });
-    }
-  }, [visible]);
+    opacity.value = (0, _reactNativeReanimated.withTiming)(1, {
+      duration: 250
+    });
+    scale.value = (0, _reactNativeReanimated.withTiming)(1, {
+      duration: 250
+    });
+  }, []);
   const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: opacity.value
   }));
@@ -124,245 +129,14 @@ const SignInModal = () => {
       scale: scale.value
     }]
   }));
-
-  // Handle successful authorization.
-  //
-  // The auth-session socket (or fallback poll) hands us the new
-  // `sessionId`. Before any session-management code can touch it we
-  // MUST first exchange the secret `sessionToken` (held only by this
-  // client) for the first access token via `claimSessionByToken` —
-  // this is the device-flow equivalent of OAuth's code-for-token
-  // exchange (RFC 8628 §3.4).
-  //
-  // Without that exchange the SDK has no bearer token and the app never
-  // becomes authenticated even though the session is authorized server-side.
-  // Once `claimSessionByToken` plants the tokens in the HttpService, the rest
-  // of the session wiring (state, persistence, language preference) flows
-  // through the normal `switchSession` path.
-  const handleAuthSuccess = (0, _react.useCallback)(async (sessionId, sessionToken) => {
-    if (isProcessingRef.current) return;
-    isProcessingRef.current = true;
-    try {
-      // Claim the first access token with the secret sessionToken, then
-      // hydrate the session. Shared with the native `OxyAuthScreen` via
-      // `completeDeviceFlowSignIn` so the two paths cannot drift.
-      if (!switchSession) {
-        throw new Error('Session management unavailable');
-      }
-      await (0, _deviceFlowSignIn.completeDeviceFlowSignIn)({
-        oxyServices,
-        sessionId,
-        sessionToken,
-        switchSession
-      });
-      hideSignInModal();
-    } catch (err) {
-      debug.error('Error completing auth:', err);
-      setError('Authorization successful but failed to complete sign in. Please try again.');
-      isProcessingRef.current = false;
-    }
-  }, [oxyServices, switchSession]);
-
-  // Cleanup socket and polling
-  const cleanup = (0, _react.useCallback)(() => {
-    setIsWaiting(false);
-    if (socketRef.current) {
-      socketRef.current.disconnect();
-      socketRef.current = null;
-    }
-    if (pollingIntervalRef.current) {
-      clearInterval(pollingIntervalRef.current);
-      pollingIntervalRef.current = null;
-    }
-  }, []);
-
-  // Connect to socket for real-time updates
-  const connectSocket = (0, _react.useCallback)(sessionToken => {
-    const baseURL = oxyServices.getBaseURL();
-    const socket = (0, _socket.default)(`${baseURL}/auth-session`, {
-      transports: ['websocket', 'polling'],
-      reconnection: true,
-      reconnectionAttempts: 3,
-      reconnectionDelay: 1000
-    });
-    socketRef.current = socket;
-    socket.on('connect', () => {
-      debug.log('Auth socket connected');
-      socket.emit('join', sessionToken);
-    });
-    socket.on('auth_update', payload => {
-      debug.log('Auth update received:', payload);
-      if (payload.status === 'authorized' && payload.sessionId) {
-        cleanup();
-        // `sessionToken` was generated by this client and is in scope
-        // via the `sessionToken` arg — pass it through so the claim
-        // call can exchange it for the first access token.
-        handleAuthSuccess(payload.sessionId, sessionToken);
-      } else if (payload.status === 'cancelled') {
-        cleanup();
-        setError('Authorization was denied.');
-      } else if (payload.status === 'expired') {
-        cleanup();
-        setError('Session expired. Please try again.');
-      }
-    });
-    socket.on('connect_error', err => {
-      debug.log('Socket connection error, falling back to polling:', err instanceof Error ? err.message : null);
-      socket.disconnect();
-      startPolling(sessionToken);
-    });
-  }, [oxyServices, handleAuthSuccess, cleanup]);
-
-  // Start polling for authorization.
-  //
-  // Idempotent: if a poll interval is already running this is a no-op, so the
-  // `connect_error` path (which also calls this) cannot stack a second
-  // interval on top of the always-on poll started in `generateAuthSession`.
-  const startPolling = (0, _react.useCallback)(sessionToken => {
-    if (pollingIntervalRef.current) return;
-    pollingIntervalRef.current = setInterval(async () => {
-      if (isProcessingRef.current) return;
-      try {
-        const response = await oxyServices.makeRequest('GET', `/auth/session/status/${sessionToken}`, undefined, {
-          cache: false
-        });
-        if (response.authorized && response.sessionId) {
-          cleanup();
-          // Pass the original sessionToken through; the claim
-          // exchange needs it to mint the first access token.
-          handleAuthSuccess(response.sessionId, sessionToken);
-        } else if (response.status === 'cancelled') {
-          cleanup();
-          setError('Authorization was denied.');
-        } else if (response.status === 'expired') {
-          cleanup();
-          setError('Session expired. Please try again.');
-        }
-      } catch (err) {
-        debug.log('Auth polling error:', err);
-      }
-    }, POLLING_INTERVAL_MS);
-  }, [oxyServices, handleAuthSuccess, cleanup]);
-
-  // Generate a new auth session
-  const generateAuthSession = (0, _react.useCallback)(async () => {
-    setIsLoading(true);
-    setError(null);
-    isProcessingRef.current = false;
-
-    // The cross-app device sign-in flow identifies the requesting app by its
-    // real registered OAuth client id (ApplicationCredential publicKey).
-    // Without it the API cannot resolve the consent identity, so we fail
-    // fast with a clear configuration error rather than creating a session
-    // the server would reject.
-    if (!clientId) {
-      setError('This app is not configured for sign-in (missing clientId).');
-      setIsLoading(false);
-      return;
-    }
-    try {
-      const sessionToken = generateSessionToken();
-      const expiresAt = Date.now() + AUTH_SESSION_EXPIRY_MS;
-      await oxyServices.makeRequest('POST', '/auth/session/create', {
-        sessionToken,
-        expiresAt,
-        clientId
-      }, {
-        cache: false
-      });
-      setAuthSession({
-        sessionToken,
-        expiresAt
-      });
-      setIsWaiting(true);
-      // Socket is the fast path; the poll is a transport-independent
-      // backstop that guarantees completion even if the socket connects
-      // but silently never delivers auth_update (RN transport /
-      // idle-timeout).
-      connectSocket(sessionToken);
-      startPolling(sessionToken);
-    } catch (err) {
-      setError((err instanceof Error ? err.message : null) || 'Failed to create auth session');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [oxyServices, connectSocket, startPolling, clientId]);
-
-  // Generate a cryptographically random session token.
-  // 16 random bytes -> 32 hex chars (128 bits of entropy) — unguessable.
-  // crypto.getRandomValues is guaranteed available because importing
-  // @oxyhq/core installs a polyfill via expo-crypto on React Native.
-  const generateSessionToken = () => {
-    const bytes = new Uint8Array(16);
-    crypto.getRandomValues(bytes);
-    return Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
-  };
-
-  // Build the QR code data
-  const getQRData = () => {
-    if (!authSession) return '';
-    return `oxyauth://${authSession.sessionToken}`;
-  };
-
-  // Open Oxy Auth approval page for this device-flow session.
-  const handleOpenAuthApproval = (0, _react.useCallback)(async () => {
-    if (!authSession) return;
-    const baseURL = oxyServices.getBaseURL();
-    // Resolve auth web URL
-    let authWebUrl = oxyServices.config?.authWebUrl;
-    if (!authWebUrl) {
-      try {
-        const url = new URL(baseURL);
-        if (url.port === '3001') {
-          url.port = '3002';
-          authWebUrl = url.origin;
-        } else if (url.hostname.startsWith('api.')) {
-          url.hostname = `auth.${url.hostname.slice(4)}`;
-          authWebUrl = url.origin;
-        }
-      } catch {
-        authWebUrl = 'https://auth.oxy.so';
-      }
-    }
-    authWebUrl = authWebUrl || 'https://auth.oxy.so';
-    const webUrl = new URL('/authorize', authWebUrl);
-    webUrl.searchParams.set('token', authSession.sessionToken);
-    if (_reactNative.Platform.OS === 'web') {
-      // Open a separate approval window on web for the device-flow token.
-      const width = 500;
-      const height = 650;
-      const screenWidth = window.screen?.width ?? width;
-      const screenHeight = window.screen?.height ?? height;
-      const left = (screenWidth - width) / 2;
-      const top = (screenHeight - height) / 2;
-      window.open(webUrl.toString(), 'oxy-auth-approval', `width=${width},height=${height},left=${left},top=${top}`);
-    } else {
-      // Open in browser on native
-      _reactNative.Linking.openURL(webUrl.toString());
-    }
-  }, [authSession, oxyServices]);
-
-  // Refresh session
-  const handleRefresh = (0, _react.useCallback)(() => {
-    cleanup();
-    generateAuthSession();
-  }, [generateAuthSession, cleanup]);
-
-  // Handle close
   const handleClose = (0, _react.useCallback)(() => {
-    cleanup();
     hideSignInModal();
-  }, [cleanup]);
-
-  // Clean up on unmount
-  (0, _react.useEffect)(() => {
-    return () => {
-      cleanup();
-    };
-  }, [cleanup]);
-  if (!visible) return null;
+  }, []);
+  const handleCreateAccount = (0, _react.useCallback)(() => {
+    _reactNative.Linking.openURL(_useOxyAuthSession.OXY_ACCOUNTS_WEB_URL);
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-    visible: visible,
+    visible: true,
     transparent: true,
     animationType: "none",
     statusBarTranslucent: true,
@@ -376,15 +150,22 @@ const SignInModal = () => {
         onPress: handleClose,
         activeOpacity: 1
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
-        style: [styles.content, contentStyle, {
-          paddingTop: insets.top + 20,
-          paddingBottom: insets.bottom + 20
-        }],
+        style: [styles.card, {
+          backgroundColor: theme.colors.card,
+          paddingTop: insets.top + 24,
+          paddingBottom: insets.bottom + 24
+        }, contentStyle],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.closeButton,
+          style: [styles.closeButton, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
           onPress: handleClose,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close sign in",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.closeButtonText,
+            style: [styles.closeButtonText, {
+              color: theme.colors.textSecondary
+            }],
             children: "\xD7"
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -395,11 +176,11 @@ const SignInModal = () => {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             className: "text-foreground",
             style: styles.title,
-            children: "Sign in with Oxy"
+            children: "Sign in to Oxy"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             className: "text-muted-foreground",
             style: styles.subtitle,
-            children: "Scan with Oxy Accounts app or use the button below"
+            children: "Continue with your Oxy identity to sign in securely"
           })]
         }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.loadingContainer,
@@ -417,54 +198,54 @@ const SignInModal = () => {
             style: styles.errorText,
             children: error
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-            onPress: handleRefresh,
+            variant: "primary",
+            onPress: retry,
+            style: styles.primaryButton,
             children: "Try Again"
           })]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.qrContainer, {
-              backgroundColor: 'white'
-            }],
-            children: authSession ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeQrcodeSvg.default, {
-              value: getQRData(),
-              size: 200,
-              backgroundColor: "white",
-              color: "black"
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
-              size: "large"
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.dividerContainer,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.divider, {
-                backgroundColor: 'rgba(255,255,255,0.3)'
-              }]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.dividerText, {
-                color: 'rgba(255,255,255,0.7)'
-              }],
-              children: "or"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.divider, {
-                backgroundColor: 'rgba(255,255,255,0.3)'
-              }]
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-            onPress: handleOpenAuthApproval,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            variant: "primary",
+            onPress: openAuthApproval,
             icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
               variant: "icon",
               size: 20,
-              fillColor: theme.colors.card
+              fillColor: theme.colors.primaryForeground,
+              style: styles.buttonIcon
             }),
-            children: "Open Oxy Auth"
+            style: styles.primaryButton,
+            children: "Continue with Oxy"
           }), isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: styles.statusContainer,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
-              size: "small"
+              size: "small",
+              style: styles.statusSpinner
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.statusText,
+              style: [styles.statusText, {
+                color: theme.colors.textSecondary
+              }],
               children: "Waiting for authorization..."
             })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.qrSection,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnotherDeviceQR.default, {
+              qrData: qrData
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.footer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.footerText,
+            className: "text-muted-foreground",
+            children: ["Don't have an Oxy account?", ' ']
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: handleCreateAccount,
+            accessibilityRole: "link",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.footerLink,
+              className: "text-primary",
+              children: "Create one"
+            })
           })]
         })]
       })]
@@ -477,11 +258,12 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
-  content: {
+  card: {
     width: '100%',
     maxWidth: 400,
     alignItems: 'center',
-    paddingHorizontal: 24
+    paddingHorizontal: 24,
+    borderRadius: 24
   },
   closeButton: {
     position: 'absolute',
@@ -490,58 +272,52 @@ const styles = _reactNative.StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 10
   },
   closeButtonText: {
-    color: 'white',
     fontSize: 28,
     fontWeight: '300',
     lineHeight: 32
   },
   header: {
     alignItems: 'center',
-    marginBottom: 32
+    marginBottom: 28
   },
   title: {
-    fontSize: 28,
+    fontSize: 26,
     fontWeight: 'bold',
-    marginTop: 16
+    marginTop: 16,
+    textAlign: 'center'
   },
   subtitle: {
     fontSize: 15,
     marginTop: 8,
     textAlign: 'center'
   },
-  qrContainer: {
-    padding: 20,
-    borderRadius: 16
-  },
-  dividerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 24,
-    width: '100%'
-  },
-  divider: {
-    flex: 1,
-    height: 1
+  primaryButton: {
+    width: '100%',
+    borderRadius: 12
   },
-  dividerText: {
-    marginHorizontal: 16,
-    fontSize: 14
+  buttonIcon: {
+    marginRight: 10
   },
   statusContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 24
+    marginTop: 20
+  },
+  statusSpinner: {
+    flex: undefined
   },
   statusText: {
     marginLeft: 8,
-    fontSize: 14,
-    color: 'rgba(255, 255, 255, 0.7)'
+    fontSize: 14
+  },
+  qrSection: {
+    width: '100%',
+    marginTop: 24
   },
   loadingContainer: {
     alignItems: 'center',
@@ -560,6 +336,19 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     textAlign: 'center',
     marginBottom: 16
+  },
+  footer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginTop: 28
+  },
+  footerText: {
+    fontSize: 14
+  },
+  footerLink: {
+    fontSize: 14,
+    fontWeight: '600'
   }
 });
 var _default = exports.default = SignInModal;