token validation

sdairs · sdairs · commit 56ad5d654684 · 2024-12-19T18:07:18.000Z
diff --git a/apps/web/src/app/[id]/page.tsx b/apps/web/src/app/[id]/page.tsx
@@ -2,22 +2,53 @@
 
 import { useQueryState } from 'nuqs';
 import React, { useEffect, useState } from 'react';
-import { checkToolState } from '@/lib/tinybird';
+import { checkToolState, InvalidTokenError } from '@/lib/tinybird';
 import { TOOL_IMPORTS, type ToolId, TOOLS, type ToolState } from '@/lib/constants';
+import { useRouter } from 'next/navigation';
+import TokenPrompt from '@/components/token-prompt';
 
 export default function AppPage({ params }: { params: Promise<{ id: string }> }) {
   const [token, setToken] = useQueryState('token');
   const [toolState, setToolState] = useState<ToolState>('available');
+  const [error, setError] = useState<string>();
+  const [isValidToken, setIsValidToken] = useState(false);
   const { id } = React.use(params) as { id: ToolId };
+  const router = useRouter();
 
   useEffect(() => {
     async function checkInstallation() {
-      if (!token) return;
-      const state = await checkToolState(token, TOOLS[id].ds);
-      setToolState(state);
+      if (!token) {
+        setIsValidToken(false);
+        return;
+      }
+      setError(undefined);
+      try {
+        const state = await checkToolState(token, TOOLS[id].ds);
+        setToolState(state);
+        setIsValidToken(true);
+      } catch (error) {
+        if (error instanceof InvalidTokenError) {
+          setError('Invalid token');
+          setToken(null);
+          setIsValidToken(false);
+          router.push('/');
+        } else {
+          console.error('Failed to check tool state:', error);
+          setError('Failed to check tool state');
+          setIsValidToken(false);
+        }
+      }
     }
     checkInstallation();
-  }, [token, id]);
+  }, [token, id, setToken, router]);
+
+  if (!token || !isValidToken) {
+    return (
+      <div className="container py-6">
+        <TokenPrompt error={error} />
+      </div>
+    );
+  }
 
   if (!(id in TOOLS)) {
     return <div>Tool not found</div>;
@@ -37,6 +68,9 @@ export default function AppPage({ params }: { params: Promise<{ id: string }> })
           <h1 className="text-2xl font-bold">{TOOLS[id].name}</h1>
           <span className="text-sm text-muted-foreground">({toolState})</span>
         </div>
+        {error && (
+          <p className="text-sm text-red-500">{error}</p>
+        )}
         <Component />
       </div>
     </div>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -4,19 +4,25 @@ import { useQueryState } from 'nuqs';
 import { useState, useEffect } from 'react';
 import { Card } from '@/components/ui/card';
 import Link from 'next/link';
-import { checkToolState } from '@/lib/tinybird';
+import { checkToolState, InvalidTokenError } from '@/lib/tinybird';
 import { TOOLS, type AppGridItem, type ToolState } from '@/lib/constants';
 import TokenPrompt from '@/components/token-prompt';
 
 export default function Home() {
-  const [token] = useQueryState('token');
+  const [token, setToken] = useQueryState('token');
   const [toolStates, setToolStates] = useState<Record<string, ToolState>>({});
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [isValidToken, setIsValidToken] = useState(false);
 
   useEffect(() => {
     async function fetchToolStates() {
-      if (!token) return;
+      if (!token) {
+        setIsValidToken(false);
+        return;
+      }
       setIsLoading(true);
+      setError(undefined);
       try {
         const states = await Promise.all(
           Object.values(TOOLS).map(async (app) => {
@@ -25,25 +31,40 @@ export default function Home() {
           })
         );
         setToolStates(Object.fromEntries(states));
+        setIsValidToken(true);
       } catch (error) {
-        console.error('Failed to fetch tool states:', error);
+        if (error instanceof InvalidTokenError) {
+          setError('Invalid token');
+          setToken(null);
+          setIsValidToken(false);
+        } else {
+          console.error('Failed to fetch tool states:', error);
+          setError('Failed to fetch tool states');
+          setIsValidToken(false);
+        }
       } finally {
         setIsLoading(false);
       }
     }
 
     fetchToolStates();
-  }, [token]);
+  }, [token, setToken]);
+
+  if (!token || !isValidToken) {
+    return (
+      <div className="container py-6">
+        <TokenPrompt error={error} />
+      </div>
+    );
+  }
 
   return (
     <div className="container py-6">
-      <TokenPrompt />
-      {token && isLoading && (
+      {isLoading ? (
         <div className="flex items-center justify-center">
           <p className="text-lg font-semibold">Loading...</p>
         </div>
-      )}
-      {token && !isLoading && (
+      ) : (
         <div className="space-y-8">
           {/* Configured Apps */}
           {Object.values(TOOLS).some(app => toolStates[app.id] === 'configured') && (
diff --git a/apps/web/src/components/token-prompt.tsx b/apps/web/src/components/token-prompt.tsx
@@ -7,11 +7,12 @@ import { Button } from './ui/button'
 import { Input } from './ui/input'
 import Link from 'next/link'
 
-export default function TokenPrompt() {
+export default function TokenPrompt({ error }: { error?: string }) {
     const [token, setToken] = useQueryState('token')
     const [inputToken, setInputToken] = useState('')
 
     const handleSave = () => {
+        if (!inputToken.trim()) return;
         setToken(inputToken)
     }
 
@@ -26,13 +27,19 @@ export default function TokenPrompt() {
                         <p className="text-sm text-muted-foreground">
                             Enter your Tinybird admin token to continue
                         </p>
-                        <div className="flex w-full max-w-sm items-center space-x-2">
-                            <Input
-                                placeholder="tb_admin_xxxx"
-                                value={inputToken}
-                                onChange={(e) => setInputToken(e.target.value)}
-                            />
-                            <Button onClick={handleSave}>Save</Button>
+                        <div className="flex w-full max-w-sm flex-col gap-2">
+                            <div className="flex items-center space-x-2">
+                                <Input
+                                    placeholder="Enter your token"
+                                    value={inputToken}
+                                    onChange={(e) => setInputToken(e.target.value)}
+                                    onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+                                />
+                                <Button onClick={handleSave}>Save</Button>
+                            </div>
+                            {error && (
+                                <p className="text-sm text-red-500">{error}</p>
+                            )}
                         </div>
                     </div>
 
diff --git a/apps/web/src/lib/tinybird.ts b/apps/web/src/lib/tinybird.ts
@@ -1,5 +1,12 @@
 import { type ToolState } from './constants';
 
+export class InvalidTokenError extends Error {
+  constructor() {
+    super('Invalid token');
+    this.name = 'InvalidTokenError';
+  }
+}
+
 export interface TinybirdDataSource {
   name: string;
   description?: string;
@@ -13,10 +20,16 @@ export async function listDataSources(token: string): Promise<TinybirdDataSource
   const response = await fetch(`/api/datasources?token=${token}`);
 
   if (!response.ok) {
+    if (response.status === 401 || response.status === 403) {
+      throw new InvalidTokenError();
+    }
     throw new Error('Failed to fetch data sources');
   }
 
   const data = await response.json();
+  if (!data?.datasources) {
+    throw new InvalidTokenError();
+  }
   return data.datasources;
 }
 
@@ -35,6 +48,9 @@ export async function query(token: string, sql: string): Promise<QueryResult> {
   const response = await fetch(`/api/query?token=${token}&query=${encodeURIComponent(sql)}`);
 
   if (!response.ok) {
+    if (response.status === 401 || response.status === 403) {
+      throw new InvalidTokenError();
+    }
     throw new Error('Failed to execute query');
   }
 
@@ -52,13 +68,16 @@ export async function checkToolState(token: string, datasource: string): Promise
       return 'available';
     }
 
-    // Check if there's any data
-    const result = await query(token, `SELECT count() as count FROM ${datasource} FORMAT JSON`);
+    // Then check if it has data
+    const result = await query(token, `SELECT count(*) as count FROM ${datasource} FORMAT JSON`);
     const hasData = result.data[0]?.count > 0;
 
     return hasData ? 'configured' : 'installed';
   } catch (error) {
-    console.error('Failed to check tool state:', error);
+    if (error instanceof InvalidTokenError) {
+      throw error;
+    }
+    console.error('Error checking tool state:', error);
     return 'available';
   }
 }
@@ -79,6 +98,9 @@ export async function pipe<T = QueryResult>(
   const response = await fetch(`/api/pipes?${searchParams}`);
 
   if (!response.ok) {
+    if (response.status === 401 || response.status === 403) {
+      throw new InvalidTokenError();
+    }
     throw new Error('Failed to execute pipe');
   }
 
