@dubsdotapp/expo 0.1.0 → 0.1.2

package/src/ui/AuthGate.tsx

@@ -0,0 +1,520 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  Keyboard,
+} from 'react-native';
+import { useAuth } from '../hooks';
+import { useDubs } from '../provider';
+import { useDubsTheme } from './theme';
+import type { AuthStatus } from '../types';
+import type { DubsClient } from '../client';
+
+// ── Public Types ──
+
+export interface RegistrationScreenProps {
+  /** Called when the user submits registration */
+  onRegister: (username: string, referralCode?: string) => void;
+  /** Whether a registration request is in flight */
+  registering: boolean;
+  /** Error from the last registration attempt, or null */
+  error: Error | null;
+  /** DubsClient instance for checkUsername() availability checks */
+  client: DubsClient;
+}
+
+export interface AuthGateProps {
+  children: React.ReactNode;
+  /** Persist or clear the JWT token (called with null on logout) */
+  onSaveToken: (token: string | null) => void | Promise<void>;
+  /** Load a previously persisted JWT token */
+  onLoadToken: () => string | null | Promise<string | null>;
+  /** Custom loading screen (receives current auth status) */
+  renderLoading?: (status: AuthStatus) => React.ReactNode;
+  /** Custom error screen (receives the error and a retry callback) */
+  renderError?: (error: Error, retry: () => void) => React.ReactNode;
+  /** Custom registration screen */
+  renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
+  /** App name shown in default screens. Defaults to "Dubs" */
+  appName?: string;
+}
+
+// ── AuthGate Component ──
+
+export function AuthGate({
+  children,
+  onSaveToken,
+  onLoadToken,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  appName = 'Dubs',
+}: AuthGateProps) {
+  const { client } = useDubs();
+  const auth = useAuth();
+  const [phase, setPhase] = useState<'init' | 'active'>('init');
+  const [registrationPhase, setRegistrationPhase] = useState(false);
+
+  // Kick off the auth flow on mount
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const savedToken = await onLoadToken();
+        if (cancelled) return;
+
+        if (savedToken) {
+          const restored = await auth.restoreSession(savedToken);
+          if (cancelled) return;
+          if (restored) {
+            setPhase('active');
+            return;
+          }
+          // Token invalid — clear it
+          await onSaveToken(null);
+        }
+
+        if (cancelled) return;
+        setPhase('active');
+        // No valid session — start fresh authentication
+        await auth.authenticate();
+      } catch {
+        if (!cancelled) setPhase('active');
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Track when we enter the registration phase
+  useEffect(() => {
+    if (auth.status === 'needsRegistration') {
+      setRegistrationPhase(true);
+    }
+  }, [auth.status]);
+
+  // Persist token when authentication or registration completes
+  useEffect(() => {
+    if (auth.token) {
+      onSaveToken(auth.token);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [auth.token]);
+
+  const retry = useCallback(() => {
+    setRegistrationPhase(false);
+    auth.reset();
+    auth.authenticate();
+  }, [auth]);
+
+  const handleRegister = useCallback(
+    (username: string, referralCode?: string) => {
+      auth.register(username, referralCode);
+    },
+    [auth],
+  );
+
+  // ── Render Logic ──
+
+  // Phase 1: Loading saved token
+  if (phase === 'init') {
+    if (renderLoading) return <>{renderLoading('authenticating')}</>;
+    return <DefaultLoadingScreen status="authenticating" appName={appName} />;
+  }
+
+  // Authenticated — render app
+  if (auth.status === 'authenticated') {
+    return <>{children}</>;
+  }
+
+  // Registration flow (including errors during registration)
+  if (registrationPhase) {
+    const isRegistering = auth.status === 'registering';
+    const regError = auth.status === 'error' ? auth.error : null;
+
+    if (renderRegistration) {
+      return (
+        <>
+          {renderRegistration({
+            onRegister: handleRegister,
+            registering: isRegistering,
+            error: regError,
+            client,
+          })}
+        </>
+      );
+    }
+    return (
+      <DefaultRegistrationScreen
+        onRegister={handleRegister}
+        registering={isRegistering}
+        error={regError}
+        client={client}
+        appName={appName}
+      />
+    );
+  }
+
+  // Error (non-registration)
+  if (auth.status === 'error' && auth.error) {
+    if (renderError) return <>{renderError(auth.error, retry)}</>;
+    return <DefaultErrorScreen error={auth.error} onRetry={retry} appName={appName} />;
+  }
+
+  // Loading states: idle, authenticating, signing, verifying
+  if (renderLoading) return <>{renderLoading(auth.status)}</>;
+  return <DefaultLoadingScreen status={auth.status} appName={appName} />;
+}
+
+// ── Default Loading Screen ──
+
+function DefaultLoadingScreen({
+  status,
+  appName,
+}: {
+  status: AuthStatus;
+  appName: string;
+}) {
+  const t = useDubsTheme();
+
+  const statusText: Record<AuthStatus, string> = {
+    idle: 'Initializing...',
+    authenticating: 'Connecting...',
+    signing: 'Approve in your wallet...',
+    verifying: 'Verifying...',
+    registering: 'Creating account...',
+    needsRegistration: 'Almost there...',
+    authenticated: 'Ready!',
+    error: 'Something went wrong',
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: t.background }]}>
+      <View style={styles.centerContent}>
+        <View style={styles.brandingSection}>
+          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
+            <Text style={styles.logoText}>D</Text>
+          </View>
+          <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
+        </View>
+        <View style={styles.loadingSection}>
+          <ActivityIndicator size="large" color={t.accent} />
+          <Text style={[styles.statusText, { color: t.textMuted }]}>
+            {statusText[status] || 'Loading...'}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// ── Default Error Screen ──
+
+function DefaultErrorScreen({
+  error,
+  onRetry,
+  appName,
+}: {
+  error: Error;
+  onRetry: () => void;
+  appName: string;
+}) {
+  const t = useDubsTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: t.background }]}>
+      <View style={styles.spreadContent}>
+        <View style={styles.brandingSection}>
+          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
+            <Text style={styles.logoText}>D</Text>
+          </View>
+          <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
+        </View>
+        <View style={styles.actionSection}>
+          <View
+            style={[
+              styles.errorBox,
+              { backgroundColor: t.errorBg, borderColor: t.errorBorder },
+            ]}
+          >
+            <Text style={[styles.errorText, { color: t.errorText }]}>
+              {error.message}
+            </Text>
+          </View>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: t.accent }]}
+            onPress={onRetry}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.buttonText}>Try Again</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// ── Default Registration Screen ──
+
+function DefaultRegistrationScreen({
+  onRegister,
+  registering,
+  error,
+  client,
+  appName,
+}: RegistrationScreenProps & { appName: string }) {
+  const t = useDubsTheme();
+  const [username, setUsername] = useState('');
+  const [referralCode, setReferralCode] = useState('');
+  const [checking, setChecking] = useState(false);
+  const [availability, setAvailability] = useState<{
+    available: boolean;
+    reason?: string;
+  } | null>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Debounced username availability check
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+
+    const trimmed = username.trim();
+    if (trimmed.length < 3) {
+      setAvailability(null);
+      setChecking(false);
+      return;
+    }
+
+    setChecking(true);
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const result = await client.checkUsername(trimmed);
+        setAvailability(result);
+      } catch {
+        setAvailability(null);
+      } finally {
+        setChecking(false);
+      }
+    }, 500);
+
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [username, client]);
+
+  const canSubmit =
+    username.trim().length >= 3 &&
+    availability?.available === true &&
+    !registering &&
+    !checking;
+
+  return (
+    <View style={[styles.container, { backgroundColor: t.background }]}>
+      <View style={styles.spreadContent}>
+        <View style={styles.brandingSection}>
+          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
+            <Text style={styles.logoText}>D</Text>
+          </View>
+          <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
+          <Text style={[styles.subtitle, { color: t.textMuted }]}>
+            Choose a username to get started
+          </Text>
+        </View>
+
+        <View style={styles.actionSection}>
+          {error ? (
+            <View
+              style={[
+                styles.errorBox,
+                { backgroundColor: t.errorBg, borderColor: t.errorBorder },
+              ]}
+            >
+              <Text style={[styles.errorText, { color: t.errorText }]}>
+                {error.message}
+              </Text>
+            </View>
+          ) : null}
+
+          <View>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  backgroundColor: t.surface,
+                  color: t.text,
+                  borderColor: t.border,
+                },
+              ]}
+              placeholder="Username"
+              placeholderTextColor={t.textDim}
+              value={username}
+              onChangeText={setUsername}
+              autoCapitalize="none"
+              autoCorrect={false}
+              editable={!registering}
+            />
+            {checking ? (
+              <Text style={[styles.availabilityHint, { color: t.textDim }]}>
+                Checking...
+              </Text>
+            ) : availability ? (
+              <Text
+                style={[
+                  styles.availabilityHint,
+                  {
+                    color: availability.available ? t.success : t.errorText,
+                  },
+                ]}
+              >
+                {availability.available
+                  ? 'Available!'
+                  : availability.reason || 'Username taken'}
+              </Text>
+            ) : username.trim().length > 0 && username.trim().length < 3 ? (
+              <Text style={[styles.availabilityHint, { color: t.textDim }]}>
+                At least 3 characters
+              </Text>
+            ) : null}
+          </View>
+
+          <TextInput
+            style={[
+              styles.input,
+              {
+                backgroundColor: t.surface,
+                color: t.text,
+                borderColor: t.border,
+              },
+            ]}
+            placeholder="Referral code (optional)"
+            placeholderTextColor={t.textDim}
+            value={referralCode}
+            onChangeText={setReferralCode}
+            autoCapitalize="none"
+            autoCorrect={false}
+            editable={!registering}
+          />
+
+          <TouchableOpacity
+            style={[
+              styles.button,
+              { backgroundColor: t.accent, opacity: canSubmit ? 1 : 0.5 },
+            ]}
+            onPress={() => {
+              Keyboard.dismiss();
+              onRegister(username.trim(), referralCode.trim() || undefined);
+            }}
+            disabled={!canSubmit}
+            activeOpacity={0.8}
+          >
+            {registering ? (
+              <ActivityIndicator color="#FFFFFF" size="small" />
+            ) : (
+              <Text style={styles.buttonText}>Create Account</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// ── Styles ──
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  centerContent: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 32,
+    gap: 48,
+  },
+  spreadContent: {
+    flex: 1,
+    justifyContent: 'space-between',
+    paddingHorizontal: 32,
+    paddingTop: 120,
+    paddingBottom: 80,
+  },
+  brandingSection: {
+    alignItems: 'center',
+    gap: 12,
+  },
+  logoCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  logoText: {
+    fontSize: 36,
+    fontWeight: '800',
+    color: '#FFFFFF',
+  },
+  appName: {
+    fontSize: 32,
+    fontWeight: '800',
+  },
+  subtitle: {
+    fontSize: 16,
+    textAlign: 'center',
+    lineHeight: 22,
+  },
+  loadingSection: {
+    alignItems: 'center',
+    gap: 16,
+  },
+  statusText: {
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  actionSection: {
+    gap: 16,
+  },
+  errorBox: {
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  input: {
+    height: 56,
+    borderRadius: 16,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    fontSize: 16,
+  },
+  availabilityHint: {
+    fontSize: 13,
+    marginTop: 6,
+    paddingLeft: 4,
+  },
+  button: {
+    height: 56,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+});

package/src/ui/index.ts

@@ -1,3 +1,5 @@
+export { AuthGate } from './AuthGate';
+export type { AuthGateProps, RegistrationScreenProps } from './AuthGate';
 export { ConnectWalletScreen } from './ConnectWalletScreen';
 export type { ConnectWalletScreenProps } from './ConnectWalletScreen';
 export { UserProfileCard } from './UserProfileCard';