@qidcloud/sdk 1.2.1 → 1.2.3

package/src/components/QidCloudLogin.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { QidCloud } from '../index';
+import { QidSignInButton } from './QidSignInButton';
+import { QidUser } from '../types';
+
+interface QidCloudLoginProps {
+    sdk: QidCloud;
+    onSuccess: (user: QidUser, token: string) => void;
+    onError?: (error: string) => void;
+    className?: string; // Wrapper class
+}
+
+/**
+ * A comprehensive login component for QidCloud.
+ * STRICT SECURITY: ONLY supports QR Scanning (Mobile App) for Post-Quantum security.
+ * Conventional login is not available in the SDK to prevent password transmission in third-party apps.
+ */
+export const QidCloudLogin: React.FC<QidCloudLoginProps> = ({
+    sdk,
+    onSuccess,
+    onError,
+    className
+}) => {
+    return (
+        <div className={`qid-login-container ${className || ''}`} style={{
+            fontFamily: "'Inter', sans-serif",
+            maxWidth: '380px',
+            margin: '0 auto',
+            padding: '30px',
+            backgroundColor: '#050505',
+            borderRadius: '24px',
+            border: '1px solid #333',
+            boxShadow: '0 20px 80px rgba(0,0,0,0.8)',
+            color: '#fff',
+            textAlign: 'center'
+        }}>
+            <div style={{ marginBottom: '30px' }}>
+                <h2 style={{ fontSize: '1.5rem', fontWeight: 700, margin: '0 0 10px 0', letterSpacing: '-0.02em' }}>
+                    QidCloud Login
+                </h2>
+                <p style={{ color: '#888', fontSize: '0.9rem', margin: 0 }}>
+                    Secure Post-Quantum Access
+                </p>
+            </div>
+
+            <div style={{ marginBottom: '20px', padding: '10px', backgroundColor: '#111', borderRadius: '16px', border: '1px dashed #333' }}>
+                <p style={{ fontSize: '0.85rem', color: '#888', marginBottom: '20px', lineHeight: '1.5' }}>
+                    Login instantly by scanning the secure QR code with your <strong>QidCloud App</strong>.
+                </p>
+                <QidSignInButton
+                    sdk={sdk}
+                    onSuccess={onSuccess}
+                    onError={onError}
+                    buttonText="Login with QIDCLOUD"
+                    className="qid-qr-btn-full"
+                />
+            </div>
+
+            <p style={{ fontSize: '0.75rem', color: '#444', marginTop: '20px' }}>
+                Credentials are never entered on this device.
+            </p>
+        </div>
+    );
+};

package/src/components/QidSignInButton.tsx

@@ -20,7 +20,7 @@ export const QidSignInButton: React.FC<QidSignInButtonProps> = ({
     onSuccess,
     onError,
     className,
-    buttonText = 'Login with QidCloud'
+    buttonText = 'LOGIN WITH QIDCLOUD'
 }: QidSignInButtonProps) => {
     const {
         user,
@@ -28,10 +28,14 @@ export const QidSignInButton: React.FC<QidSignInButtonProps> = ({
         error,
         session,
         initializing,
+        isExpired,
+        timeLeft,
         login,
         cancel
     } = useQidAuth(sdk);
 
+    const [appError, setAppError] = React.useState(false);
+
     // Watch for success
     React.useEffect(() => {
         if (user && token) {
@@ -132,6 +136,7 @@ export const QidSignInButton: React.FC<QidSignInButtonProps> = ({
                                 size={220}
                                 level="H"
                                 includeMargin={false}
+                                style={{ opacity: isExpired ? 0.1 : 1, transition: 'opacity 0.3s' }}
                                 imageSettings={{
                                     src: "https://api.qidcloud.com/favicon.ico",
                                     x: undefined,
@@ -141,14 +146,52 @@ export const QidSignInButton: React.FC<QidSignInButtonProps> = ({
                                     excavate: true,
                                 }}
                             />
+                            {isExpired && (
+                                <div style={{
+                                    position: 'absolute',
+                                    top: '50%',
+                                    left: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                    width: '100%'
+                                }}>
+                                    <button
+                                        onClick={login}
+                                        style={{
+                                            backgroundColor: '#00e5ff',
+                                            color: '#000',
+                                            border: 'none',
+                                            padding: '12px 20px',
+                                            borderRadius: '12px',
+                                            fontWeight: '900',
+                                            cursor: 'pointer',
+                                            boxShadow: '0 4px 15px rgba(0, 229, 255, 0.4)',
+                                            fontSize: '0.8rem'
+                                        }}
+                                    >
+                                        REFRESH QR
+                                    </button>
+                                </div>
+                            )}
                         </div>
 
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
-                            <div style={{ height: '4px', width: '60px', backgroundColor: '#00e5ff', margin: '0 auto', borderRadius: '2px', opacity: 0.5 }} />
+                        {isExpired && (
+                            <p style={{ color: '#ef4444', fontSize: '0.85rem', marginBottom: '20px', fontWeight: '600' }}>
+                                Session expired. Please refresh.
+                            </p>
+                        )}
 
+                        <div style={{ marginBottom: '20px' }}>
+                            <p style={{ fontSize: '0.85rem', color: '#94a3b8', marginBottom: '8px' }}>
+                                Are you on mobile?
+                            </p>
+                            <p style={{ fontSize: '0.75rem', color: '#64748b' }}>
+                                Use <strong>One-Click Auth</strong> for instant access.
+                            </p>
+                        </div>
+
+                        <div style={{ display: 'flex', gap: '12px', marginTop: '10px' }}>
                             <button onClick={cancel} style={{
-                                display: 'block',
-                                width: '100%',
+                                flex: 2,
                                 padding: '16px',
                                 backgroundColor: 'transparent',
                                 color: '#64748b',
@@ -159,10 +202,53 @@ export const QidSignInButton: React.FC<QidSignInButtonProps> = ({
                                 transition: 'all 0.2s',
                                 fontSize: '0.9rem'
                             }}>
-                                Cancel Handshake
+                                Cancel
+                            </button>
+
+                            {/* Mobile Deep Link Button */}
+                            <button
+                                onClick={() => {
+                                    setAppError(false);
+                                    const deepLink = `qidcloud://authorize?sessionId=${session.sessionId}`; // Corrected format per docs
+
+                                    // Timeout to check if app opened
+                                    const start = Date.now();
+                                    window.location.href = deepLink;
+
+                                    setTimeout(() => {
+                                        if (Date.now() - start < 1500) {
+                                            setAppError(true);
+                                        }
+                                    }, 1000);
+                                }}
+                                style={{
+                                    flex: 1,
+                                    padding: '16px',
+                                    backgroundColor: 'rgba(0, 229, 255, 0.1)',
+                                    color: '#00e5ff',
+                                    border: '1px solid rgba(0, 229, 255, 0.3)',
+                                    borderRadius: '16px',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    transition: 'all 0.2s'
+                                }}
+                                title="Authenticate with QidCloud App"
+                            >
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                                    <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+                                    <line x1="12" y1="18" x2="12.01" y2="18" />
+                                </svg>
                             </button>
                         </div>
 
+                        {appError && (
+                            <p style={{ color: '#f59e0b', fontSize: '0.75rem', marginTop: '12px', fontWeight: '600' }}>
+                                QidCloud App not found on device
+                            </p>
+                        )}
+
                         <div style={{ marginTop: '25px', fontSize: '0.75rem', color: '#475569' }}>
                             Session ID: {session.sessionId.slice(0, 8)}...
                         </div>

package/src/hooks/useQidAuth.ts

@@ -9,9 +9,12 @@ export interface UseQidAuthReturn {
     error: string | null;
     session: QidAuthSession | null;
     initializing: boolean;
+    isExpired: boolean;
+    timeLeft: number;
     login: () => Promise<void>;
     logout: () => void;
     cancel: () => void;
+    setAuthenticated: (user: QidUser, token: string) => void;
 }
 
 /**
@@ -26,69 +29,133 @@ export function useQidAuth(sdk: QidCloud): UseQidAuthReturn {
     const [initializing, setInitializing] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
+    const [timeLeft, setTimeLeft] = useState<number>(0);
+    const [isExpired, setIsExpired] = useState(false);
+
     // Use ref to track if we should still be listening (to avoid state updates after unmount/cancel)
     const activeSessionId = useRef<string | null>(null);
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+
+    const STORAGE_KEY = 'qid_auth_token';
 
-    const logout = useCallback(() => {
+    // Helper to fetch profile
+    const fetchProfile = useCallback(async (authToken: string) => {
+        setLoading(true);
+        try {
+            const profile = await sdk.auth.getProfile(authToken);
+            setToken(authToken);
+            setUser(profile);
+            localStorage.setItem(STORAGE_KEY, authToken);
+        } catch (err: any) {
+            console.error('Failed to restore session:', err);
+            setError('Session expired');
+            localStorage.removeItem(STORAGE_KEY);
+            setToken(null);
+            setUser(null);
+        } finally {
+            setLoading(false);
+            setInitializing(false);
+        }
+    }, [sdk]);
+
+    // Init: Check local storage
+    useEffect(() => {
+        const storedToken = localStorage.getItem(STORAGE_KEY);
+        if (storedToken) {
+            fetchProfile(storedToken);
+        }
+    }, [fetchProfile]);
+
+    const logout = useCallback(async () => {
+        if (token) {
+            await sdk.auth.logout(token);
+        } else {
+            sdk.auth.disconnect();
+        }
+        localStorage.removeItem(STORAGE_KEY);
         setUser(null);
         setToken(null);
         setSession(null);
-        sdk.auth.disconnect();
-    }, [sdk]);
+        setIsExpired(false);
+        clearTimer();
+    }, [sdk, token, clearTimer]);
 
     const cancel = useCallback(() => {
         activeSessionId.current = null;
         setSession(null);
         setInitializing(false);
+        setIsExpired(false);
+        clearTimer();
         sdk.auth.disconnect();
-    }, [sdk]);
+    }, [sdk, clearTimer]);
 
     const login = useCallback(async () => {
         setInitializing(true);
         setError(null);
+        setIsExpired(false);
+        clearTimer();
+
         try {
             const newSession = await sdk.auth.createSession();
             setSession(newSession);
             activeSessionId.current = newSession.sessionId;
 
+            // Start Timer
+            const expiresAt = newSession.expiresAt || (Date.now() + 120000); // Fallback 2m
+            setTimeLeft(Math.max(0, Math.floor((expiresAt - Date.now()) / 1000)));
+
+            timerRef.current = setInterval(() => {
+                const remaining = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
+                setTimeLeft(remaining);
+
+                if (remaining <= 0) {
+                    setIsExpired(true);
+                    clearTimer();
+                    // Don't nullify session immediately, let UI show expiry state
+                }
+            }, 1000);
+
             sdk.auth.listen(
                 newSession.sessionId,
                 async (receivedToken: string) => {
                     // Safety check: is this still the active session?
                     if (activeSessionId.current !== newSession.sessionId) return;
 
-                    setLoading(true);
-                    setInitializing(false);
-                    try {
-                        const profile = await sdk.auth.getProfile(receivedToken);
-                        setToken(receivedToken);
-                        setUser(profile);
-                    } catch (err: any) {
-                        setError(err.message || 'Failed to fetch user profile');
-                    } finally {
-                        setLoading(false);
-                        setSession(null);
-                    }
+                    clearTimer();
+                    setSession(null); // Clear QR session
+
+                    // Fetch profile and persist
+                    await fetchProfile(receivedToken);
                 },
                 (err: string) => {
                     if (activeSessionId.current !== newSession.sessionId) return;
                     setError(err);
                     setInitializing(false);
                     setSession(null);
+                    clearTimer();
                 }
             );
         } catch (err: any) {
             setError(err.message || 'Failed to initiate login handshake');
             setInitializing(false);
+            clearTimer();
         }
-    }, [sdk]);
+    }, [sdk, clearTimer, fetchProfile]);
 
     // Cleanup on unmount
     useEffect(() => {
         return () => {
+            clearTimer();
             sdk.auth.disconnect();
         };
-    }, [sdk]);
+    }, [sdk, clearTimer]);
 
     return {
         user,
@@ -97,8 +164,16 @@ export function useQidAuth(sdk: QidCloud): UseQidAuthReturn {
         error,
         session,
         initializing,
+        isExpired,
+        timeLeft,
         login,
         logout,
-        cancel
+        cancel,
+        setAuthenticated: (user: QidUser, token: string) => {
+            setUser(user);
+            setToken(token);
+            localStorage.setItem(STORAGE_KEY, token);
+            setInitializing(false);
+        }
     };
 }

package/src/index.ts

@@ -54,4 +54,5 @@ export class QidCloud {
 export default QidCloud;
 export * from './types';
 export { QidSignInButton } from './components/QidSignInButton';
+export { QidCloudLogin } from './components/QidCloudLogin';
 export { useQidAuth } from './hooks/useQidAuth';

package/src/modules/auth.ts

@@ -17,8 +17,13 @@ export class AuthModule {
         const resp = await this.sdk.api.post('/api/initiate-generic');
         const { sessionId, nonce } = resp.data;
 
-        // Construct QR data
-        const qrData = `qid: handshake:${sessionId}:${nonce} `;
+        // Construct QR data (JSON format for mobile app)
+        const qrData = JSON.stringify({
+            sessionId,
+            nonce,
+            action: 'login-handshake',
+            timestamp: Date.now()
+        });
 
         return {
             sessionId,
@@ -53,6 +58,22 @@ export class AuthModule {
         });
     }
 
+    /**
+     * Terminate the session on the server
+     */
+    async logout(token: string): Promise<void> {
+        if (!token) return;
+        try {
+            await this.sdk.api.post('/api/logout', {}, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+        } catch (e) {
+            console.warn('Logout failed or session already expired');
+        } finally {
+            this.disconnect();
+        }
+    }
+
     /**
      * Stop listening and disconnect socket
      */
@@ -72,6 +93,14 @@ export class AuthModule {
                 'Authorization': `Bearer ${token}`
             }
         });
-        return resp.data;
+        const data = resp.data;
+        return {
+            userId: data.regUserId,
+            regUserId: data.regUserId,
+            username: data.username,
+            email: data.email,
+            role: data.role
+        };
     }
 }
+