yaver-feedback-react-native 0.5.5 → 0.6.1

package/README.md

@@ -16,11 +16,16 @@ Manual fallback:
 npm install yaver-feedback-react-native
 ```
 
+> **Mobile only.** This SDK targets React Native (iOS + Android). A `yaver-feedback-web` package exists for browser apps but currently expects a bring-your-own auth token — the equivalent in-app sign-in UX (Apple / Google / GitHub / GitLab / Microsoft / email) for the web SDK will land in a future release. Open an issue if you need it sooner.
+
 ### Peer dependencies
 
-For full functionality, install these optional peer dependencies:
+For full functionality, install these peer dependencies:
 
 ```bash
+# Auth (in-app browser OAuth + native Apple Sign-In)
+npm install expo-web-browser expo-apple-authentication
+
 # Device discovery (stored connections)
 npm install @react-native-async-storage/async-storage
 
@@ -31,11 +36,28 @@ npm install react-native-view-shot
 npm install react-native-audio-recorder-player
 ```
 
-## Quick Start (0.5+: zero-config auth)
+`expo-apple-authentication` is optional — if it's missing, "Continue with Apple" falls through to in-app browser OAuth on Android. iOS hosts that want true native Apple Sign-In must also enable the **Sign in with Apple** capability in Xcode.
+
+Android hosts must register the OAuth callback in `AndroidManifest.xml`:
+
+```xml
+<intent-filter>
+  <action android:name="android.intent.action.VIEW" />
+  <category android:name="android.intent.category.DEFAULT" />
+  <category android:name="android.intent.category.BROWSABLE" />
+  <data android:scheme="yaver" android:host="oauth-callback" />
+</intent-filter>
+```
+
+iOS does not require any URL scheme registration — `ASWebAuthenticationSession` intercepts the redirect inside the auth session.
+
+## Quick Start (0.6+: native auth)
+
+Starting with **0.6.0**, the SDK login screen mirrors the Yaver mobile app: native Apple Sign-In on iOS, in-app browser OAuth for Google / GitHub / GitLab / Microsoft (no codes, no leaving the app), and inline email + password. The user never sees a verification code or has to switch to a web browser.
 
-Starting with **0.5.0**, the SDK ships its own login screen + remote machine picker. Drop in `<FeedbackModal />` and the first time a user triggers feedback without a cached session, they get:
+Drop in `<FeedbackModal />` and the first time a user triggers feedback without a cached session, they get:
 
-1. A full-screen login modal — Apple / Google / GitHub / GitLab / Microsoft via [device-code flow](https://yaver.io/auth/device), or inline email + password.
+1. A full-screen login modal — Apple (native) / Google / GitHub / GitLab / Microsoft (in-app browser) / email + password (inline).
 2. A picker of the machines they can reach — **their own dev boxes** plus **guest-shared machines** (where another user invited them).
 
 Both screens persist their selection to `AsyncStorage`, so subsequent launches reconnect silently.

package/dist/LoginScreen.d.ts

@@ -6,9 +6,8 @@ export interface YaverLoginScreenProps {
     onCancel?: () => void;
 }
 /**
- * Full-screen in-SDK login. Device-code is the default flow — users sign in
- * with any OAuth provider (Apple/Google/GitHub/GitLab/Microsoft) or email on
- * yaver.io and the SDK polls for the issued session token. Email/password is
- * available as an inline fallback for headless environments.
+ * Full-screen in-SDK login. Mirrors the Yaver mobile app login UX: native
+ * Apple Sign-In on iOS, in-app browser OAuth for Google/GitHub/GitLab/
+ * Microsoft (no codes, no leaving the app), and inline email/password.
  */
 export declare const YaverLoginScreen: React.FC<YaverLoginScreenProps>;

package/dist/LoginScreen.js

@@ -37,281 +37,212 @@ exports.YaverLoginScreen = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const auth_1 = require("./auth");
-const PROVIDERS = [
-    { id: 'apple', label: 'Apple', emoji: '' },
-    { id: 'google', label: 'Google', emoji: 'G' },
-    { id: 'github', label: 'GitHub', emoji: '' },
-    { id: 'gitlab', label: 'GitLab', emoji: '' },
-    { id: 'microsoft', label: 'Microsoft', emoji: 'M' },
-];
 /**
- * Full-screen in-SDK login. Device-code is the default flow — users sign in
- * with any OAuth provider (Apple/Google/GitHub/GitLab/Microsoft) or email on
- * yaver.io and the SDK polls for the issued session token. Email/password is
- * available as an inline fallback for headless environments.
+ * Full-screen in-SDK login. Mirrors the Yaver mobile app login UX: native
+ * Apple Sign-In on iOS, in-app browser OAuth for Google/GitHub/GitLab/
+ * Microsoft (no codes, no leaving the app), and inline email/password.
  */
 const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
-    const [mode, setMode] = (0, react_1.useState)('device');
-    const [code, setCode] = (0, react_1.useState)(null);
-    const [codeError, setCodeError] = (0, react_1.useState)(null);
-    const [starting, setStarting] = (0, react_1.useState)(false);
-    const pollRef = (0, react_1.useRef)(null);
-    const expiredTimerRef = (0, react_1.useRef)(null);
-    const [emailMode, setEmailMode] = (0, react_1.useState)('login');
+    const [busyProvider, setBusyProvider] = (0, react_1.useState)(null);
+    const [showEmailForm, setShowEmailForm] = (0, react_1.useState)(false);
+    const [isSignUp, setIsSignUp] = (0, react_1.useState)(false);
     const [fullName, setFullName] = (0, react_1.useState)('');
     const [email, setEmail] = (0, react_1.useState)('');
     const [password, setPassword] = (0, react_1.useState)('');
+    const [confirmPassword, setConfirmPassword] = (0, react_1.useState)('');
     const [emailBusy, setEmailBusy] = (0, react_1.useState)(false);
-    const [emailError, setEmailError] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (mode === 'device' && !code && !starting) {
-            void beginDeviceCode(undefined);
+    const [emailError, setEmailError] = (0, react_1.useState)('');
+    const finish = async (token) => {
+        const user = await (0, auth_1.validateToken)(token);
+        await (0, auth_1.saveToken)(token);
+        if (user)
+            await (0, auth_1.saveUser)(user);
+        onLoggedIn(token);
+    };
+    const handleApple = async () => {
+        setBusyProvider('apple');
+        try {
+            const { token } = await (0, auth_1.signInWithApple)();
+            await finish(token);
         }
-        return () => {
-            stopPolling();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mode]);
-    const stopPolling = () => {
-        if (pollRef.current) {
-            clearInterval(pollRef.current);
-            pollRef.current = null;
+        catch (e) {
+            const msg = e instanceof Error ? e.message : 'Apple Sign-In failed';
+            if (msg !== 'cancelled')
+                react_native_1.Alert.alert('Sign In Failed', msg);
         }
-        if (expiredTimerRef.current) {
-            clearTimeout(expiredTimerRef.current);
-            expiredTimerRef.current = null;
+        finally {
+            setBusyProvider(null);
         }
     };
-    const beginDeviceCode = async (preferredProvider) => {
-        setStarting(true);
-        setCodeError(null);
-        stopPolling();
+    const handleOAuth = async (provider) => {
+        setBusyProvider(provider);
         try {
-            const result = await (0, auth_1.startDeviceCode)({
-                platform: react_native_1.Platform.OS,
-                machineName: `feedback-sdk-${react_native_1.Platform.OS}`,
-                preferredProvider,
-            });
-            setCode(result);
-            pollRef.current = setInterval(async () => {
-                const poll = await (0, auth_1.pollDeviceCode)(result.deviceCode);
-                if (poll.status === 'authorized') {
-                    stopPolling();
-                    const user = await (0, auth_1.validateToken)(poll.token);
-                    await (0, auth_1.saveToken)(poll.token);
-                    if (user)
-                        await (0, auth_1.saveUser)(user);
-                    onLoggedIn(poll.token);
-                }
-                else if (poll.status === 'expired') {
-                    stopPolling();
-                    setCodeError('Kod doldu — tekrar başlat.');
-                    setCode(null);
-                }
-            }, 3000);
-            expiredTimerRef.current = setTimeout(() => {
-                stopPolling();
-                setCode(null);
-                setCodeError('Kod süresi doldu.');
-            }, Math.max(0, result.expiresAt - Date.now()));
+            const { token } = await (0, auth_1.signInWithOAuth)(provider);
+            await finish(token);
         }
-        catch (err) {
-            setCodeError(err instanceof Error ? err.message : String(err));
+        catch (e) {
+            const msg = e instanceof Error ? e.message : 'Sign-in failed';
+            if (msg !== 'cancelled')
+                react_native_1.Alert.alert('Sign In Failed', msg);
         }
         finally {
-            setStarting(false);
+            setBusyProvider(null);
         }
     };
-    const openVerification = () => {
-        if (!code)
-            return;
-        react_native_1.Linking.openURL(code.verificationUrl).catch(() => {
-            setCodeError('Tarayıcı açılamadı — URL’yi elle aç.');
-        });
-    };
     const handleEmailSubmit = async () => {
-        setEmailError(null);
-        if (!email.trim() || !password) {
-            setEmailError('E-posta ve parola zorunlu.');
-            return;
+        setEmailError('');
+        if (isSignUp) {
+            if (!fullName.trim())
+                return setEmailError('Full name is required');
+            if (password !== confirmPassword)
+                return setEmailError('Passwords do not match');
+            if (password.length < 8)
+                return setEmailError('Password must be at least 8 characters');
         }
+        if (!email.trim() || !password)
+            return setEmailError('Email and password are required');
         setEmailBusy(true);
         try {
-            const result = emailMode === 'signup'
-                ? await (0, auth_1.signupWithEmail)(fullName.trim() || email.trim(), email.trim(), password)
+            const result = isSignUp
+                ? await (0, auth_1.signupWithEmail)(fullName.trim(), email.trim(), password)
                 : await (0, auth_1.loginWithEmail)(email.trim(), password);
-            const user = await (0, auth_1.validateToken)(result.token);
-            await (0, auth_1.saveToken)(result.token);
-            if (user)
-                await (0, auth_1.saveUser)(user);
-            onLoggedIn(result.token);
+            await finish(result.token);
         }
-        catch (err) {
-            setEmailError(err instanceof Error ? err.message : String(err));
+        catch (e) {
+            setEmailError(e instanceof Error ? e.message : 'Something went wrong');
         }
         finally {
             setEmailBusy(false);
         }
     };
-    return (<react_native_1.SafeAreaView style={styles.container}>
-      <react_native_1.ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
-        <react_native_1.View style={styles.header}>
-          <react_native_1.Text style={styles.title}>Yaver Girişi</react_native_1.Text>
-          {onCancel && (<react_native_1.TouchableOpacity onPress={onCancel} style={styles.cancel}>
-              <react_native_1.Text style={styles.cancelText}>İptal</react_native_1.Text>
-            </react_native_1.TouchableOpacity>)}
-        </react_native_1.View>
+    const renderProvider = (id, label, onPress) => (<react_native_1.Pressable key={id} style={({ pressed }) => [
+            styles.button,
+            pressed && styles.buttonPressed,
+            busyProvider === id && { opacity: 0.6 },
+        ]} onPress={onPress} disabled={busyProvider !== null}>
+      {busyProvider === id ? (<react_native_1.ActivityIndicator color="#e0e0e0"/>) : (<react_native_1.Text style={styles.buttonText}>{label}</react_native_1.Text>)}
+    </react_native_1.Pressable>);
+    return (<react_native_1.SafeAreaView style={styles.safeArea}>
+      <react_native_1.KeyboardAvoidingView style={{ flex: 1 }} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined}>
+        <react_native_1.ScrollView contentContainerStyle={styles.scrollContainer} keyboardShouldPersistTaps="handled">
+          <react_native_1.View style={styles.header}>
+            <react_native_1.Text style={styles.logo}>Yaver</react_native_1.Text>
+            <react_native_1.Text style={styles.subtitle}>Sign in to send feedback</react_native_1.Text>
+            {onCancel && (<react_native_1.Pressable onPress={onCancel} style={styles.cancel}>
+                <react_native_1.Text style={styles.cancelText}>Cancel</react_native_1.Text>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>
 
-        <react_native_1.View style={styles.tabRow}>
-          <react_native_1.TouchableOpacity style={[styles.tab, mode === 'device' && styles.tabActive]} onPress={() => setMode('device')}>
-            <react_native_1.Text style={[styles.tabText, mode === 'device' && styles.tabTextActive]}>
-              Hızlı Giriş (OAuth)
-            </react_native_1.Text>
-          </react_native_1.TouchableOpacity>
-          <react_native_1.TouchableOpacity style={[styles.tab, mode === 'email' && styles.tabActive]} onPress={() => setMode('email')}>
-            <react_native_1.Text style={[styles.tabText, mode === 'email' && styles.tabTextActive]}>
-              E-posta
-            </react_native_1.Text>
-          </react_native_1.TouchableOpacity>
-        </react_native_1.View>
+          <react_native_1.View style={styles.buttons}>
+            {react_native_1.Platform.OS === 'ios'
+            ? renderProvider('apple', 'Continue with Apple', handleApple)
+            : renderProvider('apple', 'Continue with Apple', () => handleOAuth('apple'))}
+            {renderProvider('google', 'Continue with Google', () => handleOAuth('google'))}
+            {renderProvider('github', 'Continue with GitHub', () => handleOAuth('github'))}
+            {renderProvider('gitlab', 'Continue with GitLab', () => handleOAuth('gitlab'))}
+            {renderProvider('microsoft', 'Continue with Microsoft', () => handleOAuth('microsoft'))}
 
-        {mode === 'device' && (<react_native_1.View style={styles.section}>
-            {starting ? (<react_native_1.ActivityIndicator color="#6366f1" style={{ marginVertical: 40 }}/>) : code ? (<>
-                <react_native_1.Text style={styles.hint}>
-                  Tarayıcıda yaver.io/auth/device aç ve aşağıdaki kodu gir.
-                  Sağlayıcıyla giriş yaptığında buraya otomatik dönecek.
-                </react_native_1.Text>
-                <react_native_1.View style={styles.codeBox}>
-                  <react_native_1.Text style={styles.codeText}>{code.userCode}</react_native_1.Text>
+            {!showEmailForm ? (<react_native_1.Pressable style={({ pressed }) => [
+                styles.button,
+                pressed && styles.buttonPressed,
+            ]} onPress={() => setShowEmailForm(true)} disabled={busyProvider !== null}>
+                <react_native_1.Text style={styles.buttonText}>Continue with Email</react_native_1.Text>
+              </react_native_1.Pressable>) : (<>
+                <react_native_1.View style={styles.divider}>
+                  <react_native_1.View style={styles.dividerLine}/>
+                  <react_native_1.Text style={styles.dividerText}>email</react_native_1.Text>
+                  <react_native_1.View style={styles.dividerLine}/>
                 </react_native_1.View>
-                <react_native_1.TouchableOpacity style={styles.primaryButton} onPress={openVerification}>
-                  <react_native_1.Text style={styles.primaryButtonText}>Tarayıcıda Aç</react_native_1.Text>
-                </react_native_1.TouchableOpacity>
+                {isSignUp && (<react_native_1.TextInput style={styles.input} placeholder="Full Name" placeholderTextColor="#666" value={fullName} onChangeText={setFullName} autoCapitalize="words" autoCorrect={false}/>)}
+                <react_native_1.TextInput style={styles.input} placeholder="Email" placeholderTextColor="#666" value={email} onChangeText={setEmail} keyboardType="email-address" autoCapitalize="none" autoCorrect={false}/>
+                <react_native_1.TextInput style={styles.input} placeholder="Password" placeholderTextColor="#666" value={password} onChangeText={setPassword} secureTextEntry autoCapitalize="none"/>
+                {isSignUp && (<react_native_1.TextInput style={styles.input} placeholder="Confirm Password" placeholderTextColor="#666" value={confirmPassword} onChangeText={setConfirmPassword} secureTextEntry/>)}
 
-                <react_native_1.Text style={[styles.hint, { marginTop: 20 }]}>
-                  Sağlayıcıyı önceden seçmek istersen:
-                </react_native_1.Text>
-                <react_native_1.View style={styles.providerRow}>
-                  {PROVIDERS.map((p) => (<react_native_1.TouchableOpacity key={p.id} style={styles.providerButton} onPress={() => beginDeviceCode(p.id)}>
-                      <react_native_1.Text style={styles.providerButtonText}>{p.label}</react_native_1.Text>
-                    </react_native_1.TouchableOpacity>))}
-                </react_native_1.View>
-              </>) : (<react_native_1.TouchableOpacity style={styles.primaryButton} onPress={() => beginDeviceCode(undefined)}>
-                <react_native_1.Text style={styles.primaryButtonText}>Tekrar Başlat</react_native_1.Text>
-              </react_native_1.TouchableOpacity>)}
-            {codeError && <react_native_1.Text style={styles.error}>{codeError}</react_native_1.Text>}
-          </react_native_1.View>)}
+                {emailError ? (<react_native_1.Text style={styles.errorText}>{emailError}</react_native_1.Text>) : null}
 
-        {mode === 'email' && (<react_native_1.View style={styles.section}>
-            <react_native_1.View style={styles.tabRow}>
-              <react_native_1.TouchableOpacity style={[styles.subTab, emailMode === 'login' && styles.subTabActive]} onPress={() => setEmailMode('login')}>
-                <react_native_1.Text style={styles.subTabText}>Giriş</react_native_1.Text>
-              </react_native_1.TouchableOpacity>
-              <react_native_1.TouchableOpacity style={[styles.subTab, emailMode === 'signup' && styles.subTabActive]} onPress={() => setEmailMode('signup')}>
-                <react_native_1.Text style={styles.subTabText}>Kayıt</react_native_1.Text>
-              </react_native_1.TouchableOpacity>
-            </react_native_1.View>
+                <react_native_1.Pressable style={({ pressed }) => [
+                styles.submitButton,
+                pressed && styles.buttonPressed,
+                emailBusy && { opacity: 0.6 },
+            ]} onPress={handleEmailSubmit} disabled={emailBusy}>
+                  {emailBusy ? (<react_native_1.ActivityIndicator color="#fff"/>) : (<react_native_1.Text style={styles.submitButtonText}>
+                      {isSignUp ? 'Create Account' : 'Sign In'}
+                    </react_native_1.Text>)}
+                </react_native_1.Pressable>
 
-            {emailMode === 'signup' && (<>
-                <react_native_1.Text style={styles.label}>Ad Soyad</react_native_1.Text>
-                <react_native_1.TextInput style={styles.input} value={fullName} onChangeText={setFullName} placeholder="Adın Soyadın" placeholderTextColor="#666" autoCapitalize="words"/>
+                <react_native_1.Pressable onPress={() => {
+                setIsSignUp(!isSignUp);
+                setEmailError('');
+            }}>
+                  <react_native_1.Text style={styles.toggleText}>
+                    {isSignUp
+                ? 'Already have an account? Sign In'
+                : "Don't have an account? Sign Up"}
+                  </react_native_1.Text>
+                </react_native_1.Pressable>
               </>)}
-
-            <react_native_1.Text style={styles.label}>E-posta</react_native_1.Text>
-            <react_native_1.TextInput style={styles.input} value={email} onChangeText={setEmail} placeholder="you@example.com" placeholderTextColor="#666" keyboardType="email-address" autoCapitalize="none" autoCorrect={false}/>
-
-            <react_native_1.Text style={styles.label}>Parola</react_native_1.Text>
-            <react_native_1.TextInput style={styles.input} value={password} onChangeText={setPassword} placeholder="••••••••" placeholderTextColor="#666" secureTextEntry autoCapitalize="none"/>
-
-            <react_native_1.TouchableOpacity style={styles.primaryButton} onPress={handleEmailSubmit} disabled={emailBusy}>
-              {emailBusy ? (<react_native_1.ActivityIndicator color="#fff"/>) : (<react_native_1.Text style={styles.primaryButtonText}>
-                  {emailMode === 'signup' ? 'Kayıt Ol' : 'Giriş Yap'}
-                </react_native_1.Text>)}
-            </react_native_1.TouchableOpacity>
-
-            {emailError && <react_native_1.Text style={styles.error}>{emailError}</react_native_1.Text>}
-          </react_native_1.View>)}
-      </react_native_1.ScrollView>
+          </react_native_1.View>
+        </react_native_1.ScrollView>
+      </react_native_1.KeyboardAvoidingView>
     </react_native_1.SafeAreaView>);
 };
 exports.YaverLoginScreen = YaverLoginScreen;
 const styles = react_native_1.StyleSheet.create({
-    container: { flex: 1, backgroundColor: '#1a1a2e' },
-    content: { padding: 24, paddingTop: 16 },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 20,
+    safeArea: { flex: 1, backgroundColor: '#1a1a2e' },
+    scrollContainer: {
+        flexGrow: 1,
+        paddingHorizontal: 24,
+        justifyContent: 'center',
     },
-    title: { fontSize: 22, fontWeight: '700', color: '#e0e0e0' },
-    cancel: { padding: 8 },
+    header: { alignItems: 'center', marginBottom: 40 },
+    logo: { fontSize: 44, fontWeight: '800', color: '#e0e0e0', letterSpacing: -1 },
+    subtitle: { fontSize: 15, color: '#9ca3af', marginTop: 6 },
+    cancel: { position: 'absolute', right: 0, top: 0, padding: 8 },
     cancelText: { color: '#9ca3af', fontSize: 14 },
-    tabRow: { flexDirection: 'row', gap: 8, marginBottom: 16 },
-    tab: {
-        flex: 1,
-        paddingVertical: 12,
-        borderRadius: 10,
-        backgroundColor: 'rgba(255,255,255,0.05)',
-        alignItems: 'center',
-    },
-    tabActive: { backgroundColor: 'rgba(99,102,241,0.25)' },
-    tabText: { color: '#9ca3af', fontSize: 14, fontWeight: '600' },
-    tabTextActive: { color: '#e0e0e0' },
-    subTab: {
-        flex: 1,
-        paddingVertical: 8,
-        borderRadius: 8,
-        alignItems: 'center',
-        backgroundColor: 'rgba(255,255,255,0.05)',
-    },
-    subTabActive: { backgroundColor: 'rgba(99,102,241,0.2)' },
-    subTabText: { color: '#e0e0e0', fontSize: 13 },
-    section: { marginTop: 4 },
-    hint: { color: '#9ca3af', fontSize: 13, lineHeight: 18 },
-    codeBox: {
-        backgroundColor: 'rgba(99,102,241,0.15)',
+    buttons: { gap: 12 },
+    button: {
+        backgroundColor: 'rgba(255,255,255,0.06)',
         borderWidth: 1,
-        borderColor: 'rgba(99,102,241,0.35)',
-        borderRadius: 14,
-        paddingVertical: 24,
-        alignItems: 'center',
-        marginTop: 16,
-        marginBottom: 16,
-    },
-    codeText: {
-        color: '#e0e7ff',
-        fontSize: 36,
-        fontWeight: '800',
-        letterSpacing: 6,
-        fontVariant: ['tabular-nums'],
-    },
-    primaryButton: {
-        backgroundColor: '#6366f1',
+        borderColor: 'rgba(255,255,255,0.12)',
         borderRadius: 12,
         paddingVertical: 14,
         alignItems: 'center',
-        marginTop: 8,
+        justifyContent: 'center',
     },
-    primaryButtonText: { color: '#fff', fontWeight: '700', fontSize: 15 },
-    providerRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
-    providerButton: {
-        backgroundColor: 'rgba(255,255,255,0.08)',
-        borderRadius: 10,
-        paddingVertical: 10,
-        paddingHorizontal: 14,
+    buttonPressed: { opacity: 0.7 },
+    buttonText: { color: '#e0e0e0', fontSize: 15, fontWeight: '600' },
+    divider: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 16,
+        marginBottom: 8,
     },
-    providerButtonText: { color: '#e0e0e0', fontSize: 13, fontWeight: '600' },
-    label: { color: '#9ca3af', fontSize: 12, marginTop: 14, marginBottom: 6 },
+    dividerLine: { flex: 1, height: 1, backgroundColor: 'rgba(255,255,255,0.12)' },
+    dividerText: { marginHorizontal: 14, fontSize: 12, color: '#6b7280' },
     input: {
-        backgroundColor: 'rgba(255,255,255,0.08)',
+        backgroundColor: 'rgba(255,255,255,0.06)',
         borderWidth: 1,
-        borderColor: 'rgba(255,255,255,0.15)',
-        borderRadius: 10,
+        borderColor: 'rgba(255,255,255,0.12)',
+        borderRadius: 12,
         paddingHorizontal: 14,
-        paddingVertical: 12,
+        paddingVertical: 13,
         color: '#e0e0e0',
         fontSize: 15,
     },
-    error: { color: '#ef4444', fontSize: 13, marginTop: 12 },
+    errorText: { color: '#ef4444', fontSize: 13, textAlign: 'center' },
+    submitButton: {
+        backgroundColor: '#6366f1',
+        borderRadius: 12,
+        paddingVertical: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 4,
+    },
+    submitButtonText: { color: '#fff', fontSize: 15, fontWeight: '700' },
+    toggleText: {
+        color: '#818cf8',
+        fontSize: 14,
+        textAlign: 'center',
+        marginTop: 4,
+    },
 });

package/dist/YaverFeedback.js

@@ -76,6 +76,9 @@ class YaverFeedback {
             convexSiteUrl: cfg.authConvexSiteUrl,
             webBaseUrl: cfg.authWebBaseUrl,
         });
+        // Compile-time lockdown: refuse any browser-hop / device-code fallback
+        // and force ASWebAuthenticationSession in ephemeral mode for OAuth.
+        (0, auth_1.setStrictNativeAuth)(cfg.strictNativeAuth === true);
         // If no explicit convexUrl was set but we have an auth site URL, use it
         // so Discovery.discoverFromConvex() has somewhere to look up the user's
         // machines (works for both LAN-direct and off-LAN relay paths).

package/dist/auth.d.ts

@@ -1,22 +1,19 @@
 /**
  * Authentication + device/agent discovery API used by the Yaver Feedback SDK.
  *
- * This module is a trimmed SDK-local port of mobile/src/lib/auth.ts. It only
- * covers what the embedded login/machine-picker flow needs:
+ * Mirrors mobile/src/lib/auth.ts:
  *
- *   - Device-code login (`POST /auth/device-code` + `GET /auth/device-code/poll`)
- *     so users can sign in via any OAuth provider (apple/google/github/gitlab/
- *     microsoft) on yaver.io without requiring deep-link wiring in the host app.
+ *   - Native Apple Sign-In (`POST /auth/apple-native`) on iOS via
+ *     `expo-apple-authentication`.
+ *   - In-app browser OAuth for Google/Microsoft/GitHub/GitLab via
+ *     `expo-web-browser`'s `openAuthSessionAsync` — same callback URL
+ *     (`yaver://oauth-callback`) the Yaver mobile app uses.
  *   - Email / password sign-up + login (no 2FA flow — for SDK simplicity).
- *   - Token validation + refresh.
+ *   - Token validation.
  *   - `/devices/list` → owned + shared (guest) remote dev machines.
  *
- * All calls target the public Yaver Convex site URL by default; callers may
- * override via `init()` config to point at staging.
- *
- * Token persistence uses `@react-native-async-storage/async-storage` (already
- * a peer dep). SecureStore is intentionally avoided to keep the SDK portable
- * to any RN host app.
+ * Mobile-only. A web equivalent will ship as a separate `yaver-web-feedback`
+ * package; do not import this module from a browser bundle.
  */
 export declare const DEFAULT_CONVEX_SITE_URL = "https://shocking-echidna-394.eu-west-1.convex.site";
 export declare const DEFAULT_WEB_BASE_URL = "https://yaver.io";
@@ -25,6 +22,13 @@ export declare function configureAuthEndpoints(opts: {
     convexSiteUrl?: string;
     webBaseUrl?: string;
 }): void;
+/**
+ * Enable strict native auth: refuse any fallback that would redirect the
+ * user to an external browser (Safari / Chrome) or show a device code.
+ * See FeedbackConfig.strictNativeAuth for rationale.
+ */
+export declare function setStrictNativeAuth(enabled: boolean): void;
+export declare function isStrictNativeAuth(): boolean;
 export declare function getConvexSiteUrl(): string;
 export declare function getWebBaseUrl(): string;
 export type OAuthProvider = 'google' | 'microsoft' | 'apple' | 'github' | 'gitlab';
@@ -44,31 +48,40 @@ export declare function getSelectedDeviceId(): Promise<string | null>;
 export declare function saveSelectedDeviceId(deviceId: string): Promise<void>;
 export declare function clearSelectedDeviceId(): Promise<void>;
 export declare function validateToken(token: string): Promise<User | null>;
-export interface DeviceCodeStart {
-    userCode: string;
-    deviceCode: string;
-    expiresAt: number;
-    verificationUrl: string;
-}
 /**
- * Start a device-code flow. The user opens `verificationUrl`, signs in with
- * any OAuth provider on yaver.io, and the SDK polls `pollDeviceCode` until
- * a session token is issued.
+ * Sign in with Apple using the native ASAuthorization flow. Requires
+ * `expo-apple-authentication` installed and the host app's bundle to have
+ * the "Sign in with Apple" capability enabled. iOS only.
+ *
+ * Throws `cancelled` if the user dismisses the sheet.
+ */
+export declare function signInWithApple(): Promise<{
+    token: string;
+    userId: string;
+}>;
+/**
+ * Default OAuth redirect — the same callback the Yaver mobile app uses
+ * (`yaver://oauth-callback`). `WebBrowser.openAuthSessionAsync` intercepts
+ * this redirect inside the auth session, so the host app does not need to
+ * register the scheme on iOS. On Android, add an `<intent-filter>` for
+ * `yaver://oauth-callback` in the host app's AndroidManifest.xml.
  */
-export declare function startDeviceCode(opts?: {
-    machineName?: string;
-    platform?: string;
-    preferredProvider?: OAuthProvider;
-}): Promise<DeviceCodeStart>;
-export type DeviceCodePoll = {
-    status: 'pending';
-} | {
-    status: 'authorized';
+export declare const DEFAULT_OAUTH_REDIRECT = "yaver://oauth-callback";
+/**
+ * Sign in through the in-app browser via yaver.io. Opens
+ * `https://yaver.io/api/auth/oauth/<provider>?client=mobile`, the user picks
+ * an OAuth provider, and the web callback redirects back to
+ * `yaver://oauth-callback?token=...` which `openAuthSessionAsync` captures
+ * inside the auth session. No deep-link wiring required on iOS.
+ *
+ * Throws `cancelled` if the user dismisses the browser.
+ */
+export declare function signInWithOAuth(provider: OAuthProvider, opts?: {
+    redirectUrl?: string;
+    preferEphemeralSession?: boolean;
+}): Promise<{
     token: string;
-} | {
-    status: 'expired';
-};
-export declare function pollDeviceCode(deviceCode: string): Promise<DeviceCodePoll>;
+}>;
 export declare function signupWithEmail(fullName: string, email: string, password: string): Promise<{
     token: string;
     userId: string;