refactor as TypeScript

examples/with-supabase/README.md

@@ -1,28 +1,34 @@
-# Supabase Starter
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-This starter configures Supabase Auth to use cookies, making the user's session available throughout the entire Next.js app - Client Components, Server Components, Route Handlers, Server Actions and Middleware.
+## Getting Started
 
-## Deploy with Vercel
+First, run the development server:
 
-The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv)
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## Running Locally
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-1. `cd` into this directory
-1. Run `npm install` to install dependencies
-1. Create a [new Supabase project](https://database.new)
-1. Rename `.env.local.example` to `.env.local` and update the values for `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` from [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api)
-1. Run `npm run dev` to start the local development server
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-## Feedback and issues
+## Learn More
 
-Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
+To learn more about Next.js, take a look at the following resources:
 
-## More Supabase examples
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
-- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
-- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)
-- [Next.js Auth Helpers Docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/with-supabase/app/auth/callback/route.js → examples/with-supabase/app/auth/callback/route.ts

@@ -2,7 +2,7 @@ import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
 
-export async function GET(request) {
+export async function GET(request: Request) {
   // The `/auth/callback` route is required for the server-side auth flow implemented
   // by the Auth Helpers package. It exchanges an auth code for the user's session.
   // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange

examples/with-supabase/app/client-component-example/page.js → examples/with-supabase/app/client-component-example/page.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 export default function ClientComponent() {
-  const [todos, setTodos] = useState([])
+  const [todos, setTodos] = useState<any[]>([])
 
   // create a Supabase client configured to use cookies
   const supabase = createClientComponentClient()
@@ -15,7 +15,9 @@ export default function ClientComponent() {
       // head over to your Supabase project's Table Editor to create a table
       // https://app.supabase.com/project/_/editor
       const { data } = await supabase.from('todos').select()
-      setTodos(data)
+      if (data) {
+        setTodos(data)
+      }
     }
 
     getTodos()

examples/with-supabase/app/layout.js → examples/with-supabase/app/layout.tsx

@@ -1,17 +1,18 @@
 import './globals.css'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 }
 
-export default function RootLayout({ children }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body>
         <main className="min-h-screen bg-gray-900 flex flex-col items-center">
           {children}
         </main>

examples/with-supabase/app/login/page.js → examples/with-supabase/app/login/page.tsx

@@ -11,7 +11,7 @@ export default function Login() {
   const router = useRouter()
   const supabase = createClientComponentClient()
 
-  const handleSignUp = async (e) => {
+  const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     await supabase.auth.signUp({
       email,
@@ -23,12 +23,13 @@ export default function Login() {
     setView('check-email')
   }
 
-  const handleSignIn = async (e) => {
+  const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    await supabase.auth.signInWithPassword({
+    const { data, error } = await supabase.auth.signInWithPassword({
       email,
       password,
     })
+    console.log({ data, error })
     router.push('/')
   }
 
@@ -83,10 +84,7 @@ export default function Login() {
           ) : null}
           {view === 'sign-up' ? (
             <>
-              <button
-                className="bg-green-700 rounded px-4 py-2 text-gray-200 mb-6"
-                onSubmit={handleSignUp}
-              >
+              <button className="bg-green-700 rounded px-4 py-2 text-gray-200 mb-6">
                 Sign Up
               </button>
               <p className="text-sm text-gray-500 text-center">

examples/with-supabase/app/page.js → examples/with-supabase/app/page.tsx

@@ -74,19 +74,19 @@ export default async function Index() {
       </div>
 
       <p className="text-gray-300 mb-16">
-        Ready to build your app? Head over to `app/page.js` 👉
+        Ready to build your app? Head over to `app/page.tsx` 👉
       </p>
 
       <div className="bg-gray-800 rounded-md p-8 text-gray-300">
         <p className="font-semibold mb-2 text-gray-200">
           We have also included examples for creating a Supabase client in:
         </p>
         <ul className="list-disc ml-8">
-          <li>Client Components - `app/client-component-example/page.js`</li>
-          <li>Server Components - `app/server-component-example/page.js`</li>
-          <li>Server Actions - `app/server-action-example/page.js`</li>
-          <li>Route Handlers - `app/route-handler-example/route.js`</li>
-          <li>Middleware - `middleware.js`</li>
+          <li>Client Components - `app/client-component-example/page.tsx`</li>
+          <li>Server Components - `app/server-component-example/page.tsx`</li>
+          <li>Server Actions - `app/server-action-example/page.tsx`</li>
+          <li>Route Handlers - `app/route-handler-example/route.ts`</li>
+          <li>Middleware - `middleware.ts`</li>
         </ul>
       </div>
     </div>

examples/with-supabase/app/server-action-example/page.tsx

@@ -0,0 +1,27 @@
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
+import { revalidatePath } from 'next/cache'
+import { cookies } from 'next/headers'
+
+export default async function ServerAction() {
+  const addTodo = async (formData: FormData) => {
+    'use server'
+    const title = formData.get('title')
+
+    if (title) {
+      // create a Supabase client configured to use cookies
+      const supabase = createServerActionClient({ cookies })
+
+      // this assumes you have a `todos` table with a `title` column
+      // head over to your Supabase project's Table Editor to create a table
+      // https://app.supabase.com/project/_/editor
+      await supabase.from('todos').insert({ title })
+      revalidatePath('/server-action-example')
+    }
+  }
+
+  return (
+    <form action={addTodo}>
+      <input name="title" />
+    </form>
+  )
+}

examples/with-supabase/middleware.js → examples/with-supabase/middleware.ts

@@ -1,7 +1,9 @@
 import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 
-export async function middleware(req) {
+import type { NextRequest } from 'next/server'
+
+export async function middleware(req: NextRequest) {
   const res = NextResponse.next()
 
   // create a Supabase client configured to use cookies

examples/with-supabase/package.json

@@ -6,15 +6,18 @@
     "start": "next start"
   },
   "dependencies": {
-    "@supabase/auth-helpers-nextjs": "^0.7.2",
+    "@supabase/auth-helpers-nextjs": "latest",
     "autoprefixer": "10.4.14",
     "next": "latest",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2"
+    "tailwindcss": "3.3.2",
+    "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@types/react": "18.2.12"
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5"
   }
 }

examples/with-supabase/tailwind.config.js

@@ -1,8 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
       backgroundImage: {

examples/with-supabase/tsconfig.json

@@ -1,24 +1,28 @@
 {
   "compilerOptions": {
+    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
-    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }