Simple Auth (#25)

Author: iethree

src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useMemo } from 'react'
 
 import { DevToolsUI } from '@/components/DevToolsUi'
+import { FetchError } from '@/components/FetchError'
 import { UploadDropzone } from '@/components/UploadDropzone'
 import { DiagnosticData } from '@/types/DiagnosticData'
 
@@ -14,6 +15,7 @@ export default function Home({
   const [diagnosticData, setDiagnosticData] = useState<DiagnosticData | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [responseStatus, setResponseStatus] = useState<number | null>(null)
 
   const fileId = searchParams.fileId as string | undefined
 
@@ -26,11 +28,20 @@ export default function Home({
   }
 
   useMemo(() => {
+    // local storage won't work in SSR
+    const token = typeof localStorage !== 'undefined' && localStorage.getItem('debugger-token')
     if (fileId) {
       setIsLoading(true)
       setError(null)
-      fetch(`/api/fetchSlackFile?fileId=${fileId}`)
-        .then((response) => response.json())
+      fetch(`/api/fetchSlackFile?fileId=${fileId}`, {
+        headers: {
+          authorization: token,
+        } as any,
+      })
+        .then((response) => {
+          setResponseStatus(response.status)
+          return response.json()
+        })
         .then((data) => {
           if (data.error) {
             throw new Error(data.error)
@@ -59,11 +70,7 @@ export default function Home({
         </div>
       ) : !diagnosticData ? (
         <div className="flex-grow flex flex-col items-center justify-center">
-          {error && (
-            <div className="flex items-center justify-center p-12">
-              <p className="text-red-500">{error}</p>
-            </div>
-          )}
+          <FetchError error={error} statusCode={responseStatus} />
           <UploadDropzone onFileUpload={handleFileUpload} />
         </div>
       ) : (

src/components/FetchError.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+
+import { FetchError } from './FetchError'
+import { render, screen, userEvent, waitFor } from '../test/test-utils'
+
+describe('FetchError', () => {
+  it('renders fetch error', () => {
+    render(<FetchError error="oops" statusCode={418} />)
+    expect(screen.getByText('oops')).toBeInTheDocument()
+    expect(screen.queryByText('Set auth token')).not.toBeInTheDocument()
+  })
+
+  it('renders fetch error with auth button', () => {
+    render(<FetchError error="Unauthorized" statusCode={403} />)
+    expect(screen.getByText('Unauthorized')).toBeInTheDocument()
+    expect(screen.getByText('Set auth token')).toBeInTheDocument()
+  })
+
+  it('opens auth modal', async () => {
+    render(<FetchError error="Unauthorized" statusCode={401} />)
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    screen.getByText('Set auth token')
+    userEvent.click(screen.getByText('Set auth token'))
+    expect(await screen.findByText('Enter your auth token')).toBeInTheDocument()
+  })
+
+  it('saves auth token', async () => {
+    render(<FetchError error="Unauthorized" statusCode={403} />)
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    userEvent.click(screen.getByText('Set auth token'))
+    expect(await screen.findByText('Enter your auth token')).toBeInTheDocument()
+
+    userEvent.click(screen.getByPlaceholderText('Auth token'))
+    userEvent.paste('abc123')
+
+    userEvent.click(screen.getByText('Save'))
+
+    waitFor(() => {
+      expect(localStorage.getItem('debugger-token')).toBe('abc123')
+    })
+  })
+})

src/components/FetchError.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+
+export const FetchError = ({
+  error,
+  statusCode,
+}: {
+  error: string | null
+  statusCode?: number | null
+}) => {
+  if (!error) {
+    return null
+  }
+
+  const isAuthError = statusCode && statusCode > 400 && statusCode < 404
+
+  return (
+    <div className="flex items-center justify-center p-12">
+      <p className="text-red-500">{error}</p>
+      {isAuthError && <AuthButton />}
+    </div>
+  )
+}
+
+const AuthButton = () => {
+  const [showModal, setShowModal] = useState(false)
+
+  return (
+    <>
+      <button
+        onClick={() => setShowModal(true)}
+        className="hover:text-blue-800 text-gray-600 font-bold py-1 px-2 rounded mx-3"
+      >
+        Set auth token
+      </button>
+      {showModal && <AuthModal onClose={() => setShowModal(false)} />}
+    </>
+  )
+}
+
+const AuthModal = ({ onClose }: { onClose: () => void }) => {
+  const [value, setValue] = useState('')
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      localStorage.setItem('debugger-token', value)
+    } catch (e) {
+      console.error('Error saving auth token:', e)
+    }
+    window.location.reload()
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+      <form className="bg-white p-8 rounded-lg w-96" onSubmit={handleSubmit}>
+        <div>
+          <h2 className="text-lg mb-4">Enter your auth token</h2>
+          <input
+            type="password"
+            placeholder="Auth token"
+            name="auth-token"
+            value={value}
+            autoFocus
+            onChange={(e) => setValue(e.target.value)}
+            className="border border-gray-300 rounded p-2 mb-4 w-full"
+          />
+        </div>
+        <div className="flex gap-2 justify-end">
+          <button type="button" onClick={onClose} className="border-2 text-black px-4 py-2 rounded">
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="border-2 border-blue-500 bg-blue-500 text-white px-4 py-2 rounded"
+          >
+            Save
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

src/pages/api/auth.test.ts

@@ -0,0 +1,30 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { NextResponse } from 'next/server'
+import { vi, describe, it, expect } from 'vitest'
+
+import { isAuthorized } from './auth'
+const spy = vi.spyOn(NextResponse, 'next')
+
+describe('isAuthorized', () => {
+  it('should return 403 if the authorization header is not correct', () => {
+    const req = { headers: { authorization: 'wrong' } } as NextApiRequest
+    const res = { status: vi.fn().mockReturnThis(), json: vi.fn() } as unknown as NextApiResponse
+
+    isAuthorized(req, res)
+
+    expect(res.status).toHaveBeenCalledWith(403)
+    expect(res.json).toHaveBeenCalledWith({ error: 'Unauthorized' })
+  })
+
+  it('should call .next() if the authorization header is correct', () => {
+    spy.mockClear()
+    const req = { headers: { authorization: process.env.AUTH_SECRET } } as NextApiRequest
+    const res = { status: vi.fn().mockReturnThis(), json: vi.fn() } as unknown as NextApiResponse
+
+    isAuthorized(req, res)
+
+    expect(res.status).not.toHaveBeenCalled()
+    expect(res.json).not.toHaveBeenCalled()
+    expect(NextResponse.next).toHaveBeenCalledOnce()
+  })
+})

src/pages/api/auth.ts

@@ -0,0 +1,10 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { NextResponse } from 'next/server'
+
+export const isAuthorized = (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.headers.authorization !== process.env.AUTH_SECRET) {
+    console.log('Unauthorized')
+    return res.status(403).json({ error: 'Unauthorized' })
+  }
+  NextResponse.next()
+}

src/pages/api/fetchSlackFile.test.ts

@@ -28,13 +28,16 @@ vi.mock('@/utils/slackClient', () => ({
 const mockFetch = vi.fn()
 global.fetch = mockFetch
 
-describe.skip('fetchSlackFile API', () => {
+describe('fetchSlackFile API', () => {
   let mockReq: Partial<NextApiRequest>
   let mockRes: Partial<NextApiResponse>
 
   beforeEach(() => {
     mockReq = {
       query: {},
+      headers: {
+        authorization: process.env.AUTH_SECRET,
+      },
     }
     mockRes = {
       status: vi.fn().mockReturnThis(),

src/pages/api/fetchSlackFile.ts

@@ -1,31 +1,32 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 
-// import { slackClient } from '@/utils/slackClient'
+import { slackClient } from '@/utils/slackClient'
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  // const { fileId } = req.query
-
-  return res.status(403).json({ error: 'Unauthorized' })
-
-  // if (!fileId || typeof fileId !== 'string') {
-  //   return res.status(400).json({ error: 'Invalid fileId' })
-  // }
-
-  // try {
-  //   const result = await slackClient.files.info({ file: fileId })
+import { isAuthorized } from './auth'
 
-  //   if (!result.file || !result.file.url_private) {
-  //     return res.status(404).json({ error: 'File not found' })
-  //   }
-
-  //   const fileContent = await fetch(result.file.url_private, {
-  //     headers: { Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}` },
-  //   })
-
-  //   const jsonData = await fileContent.json()
-  //   res.status(200).json(jsonData)
-  // } catch (error) {
-  //   console.error('Error fetching Slack file:', error)
-  //   res.status(500).json({ error: 'Error fetching Slack file' })
-  // }
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  isAuthorized(req, res)
+
+  const { fileId } = req.query
+  if (!fileId || typeof fileId !== 'string') {
+    return res.status(400).json({ error: 'Invalid fileId' })
+  }
+
+  try {
+    const result = await slackClient.files.info({ file: fileId })
+
+    if (!result.file || !result.file.url_private) {
+      return res.status(404).json({ error: 'File not found' })
+    }
+
+    const fileContent = await fetch(result.file.url_private, {
+      headers: { Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}` },
+    })
+
+    const jsonData = await fileContent.json()
+    res.status(200).json(jsonData)
+  } catch (error) {
+    console.error('Error fetching Slack file:', error)
+    res.status(500).json({ error: 'Error fetching Slack file' })
+  }
 }