Example: Add example with Supabase Auth

docs/config.json

@@ -348,6 +348,10 @@
               "label": "Basic + DIY Auth",
               "to": "framework/react/examples/start-basic-auth"
             },
+            {
+              "label": "Basic + Supabase Auth",
+              "to": "framework/react/examples/start-supabase-basic"
+            },
             {
               "label": "Trellaux + Convex",
               "to": "framework/react/examples/start-convex-trellaux"

examples/react/start-supabase-basic/.env

@@ -0,0 +1,2 @@
+SUPABASE_URL=PleaseChangeMe
+SUPABASE_ANON_KEY=PleaseChangeMe

examples/react/start-supabase-basic/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+# Keep environment variables out of version control
+!.env

examples/react/start-supabase-basic/app.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@tanstack/start/config'
+
+export default defineConfig({})

examples/react/start-supabase-basic/app/client.tsx

@@ -0,0 +1,8 @@
+// app/client.tsx
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

examples/react/start-supabase-basic/app/components/Auth.tsx

@@ -0,0 +1,57 @@
+export function Auth({
+  actionText,
+  onSubmit,
+  status,
+  afterSubmit,
+}: {
+  actionText: string
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+  status: 'pending' | 'idle' | 'success' | 'error'
+  afterSubmit?: React.ReactNode
+}) {
+  return (
+    <div className="fixed inset-0 bg-white dark:bg-black flex items-start justify-center p-8">
+      <div className="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
+        <h1 className="text-2xl font-bold mb-4">{actionText}</h1>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            onSubmit(e)
+          }}
+          className="space-y-4"
+        >
+          <div>
+            <label htmlFor="email" className="block text-xs">
+              Username
+            </label>
+            <input
+              type="email"
+              name="email"
+              id="email"
+              className="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
+            />
+          </div>
+          <div>
+            <label htmlFor="password" className="block text-xs">
+              Password
+            </label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+              className="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
+            />
+          </div>
+          <button
+            type="submit"
+            className="w-full bg-cyan-600 text-white rounded py-2 font-black uppercase"
+            disabled={status === 'pending'}
+          >
+            {status === 'pending' ? '...' : actionText}
+          </button>
+          {afterSubmit ? afterSubmit : null}
+        </form>
+      </div>
+    </div>
+  )
+}

examples/react/start-supabase-basic/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,55 @@
+import {
+  ErrorComponent,
+  Link,
+  rootRouteId,
+  // ErrorComponentProps,
+  useMatch,
+  useRouter,
+} from '@tanstack/react-router'
+import * as React from 'react'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter()
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  })
+
+  console.error(error)
+
+  return (
+    <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+      <ErrorComponent error={error} />
+      <div className="flex gap-2 items-center flex-wrap">
+        <button
+          onClick={() => {
+            router.invalidate()
+          }}
+          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+        >
+          Try Again
+        </button>
+        {isRoot ? (
+          <Link
+            to="/"
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+          >
+            Home
+          </Link>
+        ) : (
+          <Link
+            to="/"
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            onClick={(e) => {
+              e.preventDefault()
+              window.history.back()
+            }}
+          >
+            Go Back
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}

examples/react/start-supabase-basic/app/components/Login.tsx

@@ -0,0 +1,68 @@
+import { useRouter } from '@tanstack/react-router'
+import { useServerFn } from '@tanstack/start'
+import { useMutation } from '../hooks/useMutation'
+import { loginFn } from '../routes/_authed'
+import { signupFn } from '../routes/signup'
+import { Auth } from './Auth'
+
+export function Login() {
+  const router = useRouter()
+
+  const loginMutation = useMutation({
+    fn: loginFn,
+    onSuccess: async (ctx) => {
+      if (!ctx.data?.error) {
+        await router.invalidate()
+        router.navigate({ to: '/' })
+        return
+      }
+    },
+  })
+
+  const signupMutation = useMutation({
+    fn: useServerFn(signupFn),
+  })
+
+  return (
+    <Auth
+      actionText="Login"
+      status={loginMutation.status}
+      onSubmit={(e) => {
+        const formData = new FormData(e.target as HTMLFormElement)
+
+        loginMutation.mutate({
+          email: formData.get('email') as string,
+          password: formData.get('password') as string,
+        })
+      }}
+      afterSubmit={
+        loginMutation.data ? (
+          <>
+            <div className="text-red-400">{loginMutation.data.message}</div>
+            {loginMutation.data.error &&
+            loginMutation.data.message === 'Invalid login credentials' ? (
+              <div>
+                <button
+                  className="text-blue-500"
+                  onClick={(e) => {
+                    const formData = new FormData(
+                      (e.target as HTMLButtonElement).form!,
+                    )
+
+                    signupMutation.mutate({
+                      email: formData.get('email') as string,
+                      password: formData.get('password') as string,
+                    })
+                  }}
+                  type="button"
+                >
+                  Sign up instead?
+                </button>
+              </div>
+            ) : null}
+          </>
+        ) : null
+      }
+    />
+  )
+}

examples/react/start-supabase-basic/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+  return (
+    <div className="space-y-2 p-2">
+      <div className="text-gray-600 dark:text-gray-400">
+        {children || <p>The page you are looking for does not exist.</p>}
+      </div>
+      <p className="flex items-center gap-2 flex-wrap">
+        <button
+          onClick={() => window.history.back()}
+          className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+        >
+          Go back
+        </button>
+        <Link
+          to="/"
+          className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+        >
+          Start Over
+        </Link>
+      </p>
+    </div>
+  )
+}

examples/react/start-supabase-basic/app/hooks/useMutation.ts

@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+export function useMutation<TVariables, TData, TError = Error>(opts: {
+  fn: (variables: TVariables) => Promise<TData>
+  onSuccess?: (ctx: { data: TData }) => void | Promise<void>
+}) {
+  const [submittedAt, setSubmittedAt] = React.useState<number | undefined>()
+  const [variables, setVariables] = React.useState<TVariables | undefined>()
+  const [error, setError] = React.useState<TError | undefined>()
+  const [data, setData] = React.useState<TData | undefined>()
+  const [status, setStatus] = React.useState<
+    'idle' | 'pending' | 'success' | 'error'
+  >('idle')
+
+  const mutate = React.useCallback(
+    async (variables: TVariables): Promise<TData | undefined> => {
+      setStatus('pending')
+      setSubmittedAt(Date.now())
+      setVariables(variables)
+      //
+      try {
+        const data = await opts.fn(variables)
+        await opts.onSuccess?.({ data })
+        setStatus('success')
+        setError(undefined)
+        setData(data)
+        return data
+      } catch (err: any) {
+        setStatus('error')
+        setError(err)
+      }
+    },
+    [opts.fn],
+  )
+
+  return {
+    status,
+    variables,
+    submittedAt,
+    mutate,
+    error,
+    data,
+  }
+}