📄 tanstack/start/latest/docs/framework/solid/examples/start-supabase-basic

=============================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

.vscode
public
src
- components
- hooks
- routes
  - _authed
  - __root.tsx
  - _authed.tsx
  - index.tsx
  - login.tsx
  - logout.tsx
  - signup.tsx
- styles
- utils
- routeTree.gen.ts
- router.tsx
.env.example
.gitignore
.prettierignore
package.json
postcss.config.mjs
tsconfig.json
vite.config.ts

tsx

/// <reference types="vite/client" />
import {
  HeadContent,
  Link,
  Outlet,
  Scripts,
  createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { createServerFn } from '@tanstack/solid-start'
import { HydrationScript } from 'solid-js/web'
import { DefaultCatchBoundary } from '../components/DefaultCatchBoundary'
import { NotFound } from '../components/NotFound'
import appCss from '../styles/app.css?url'
import { seo } from '../utils/seo'
import { getSupabaseServerClient } from '../utils/supabase'
import type * as Solid from 'solid-js'

const fetchUser = createServerFn({ method: 'GET' }).handler(async () => {
  const supabase = getSupabaseServerClient()
  const { data, error: _error } = await supabase.auth.getUser()

  if (!data.user?.email) {
    return null
  }

  return {
    email: data.user.email,
  }
})

export const Route = createRootRoute({
  beforeLoad: async () => {
    const user = await fetchUser()

    return {
      user,
    }
  },
  head: () => ({
    meta: [\
      {\
        charset: 'utf-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1',\
      },\
      ...seo({\
        title:\
          'TanStack Start | Type-Safe, Client-First, Full-Stack Solid Framework',\
        description: `TanStack Start is a type-safe, client-first, full-stack Solid framework. `,\
      }),\
    ],
    links: [\
      { rel: 'stylesheet', href: appCss },\
      {\
        rel: 'apple-touch-icon',\
        sizes: '180x180',\
        href: '/apple-touch-icon.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '32x32',\
        href: '/favicon-32x32.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '16x16',\
        href: '/favicon-16x16.png',\
      },\
      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },\
      { rel: 'icon', href: '/favicon.ico' },\
    ],
  }),
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    )
  },
  notFoundComponent: () => <NotFound />,
  component: RootComponent,
})

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  )
}

function RootDocument({ children }: { children: Solid.JSX.Element }) {
  const { user } = Route.useRouteContext()()

  return (
    <html>
      <head>
        <HydrationScript />
      </head>
      <body>
        <HeadContent />
        <div class="p-2 flex gap-2 text-lg">
          <Link
            to="/"
            activeProps={{
              class: 'font-bold',
            }}
            activeOptions={{ exact: true }}
          >
            Home
          </Link>{' '}
          <Link
            to="/posts"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Posts
          </Link>
          <div class="ml-auto">
            {user ? (
              <>
                <span class="mr-2">{user.email}</span>
                <Link to="/logout">Logout</Link>
              </>
            ) : (
              <Link to="/login">Login</Link>
            )}
          </div>
        </div>
        <hr />
        {children}
        <TanStackRouterDevtools position="bottom-right" />
        <Scripts />
      </body>
    </html>
  )
}


/// <reference types="vite/client" />
import {
  HeadContent,
  Link,
  Outlet,
  Scripts,
  createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { createServerFn } from '@tanstack/solid-start'
import { HydrationScript } from 'solid-js/web'
import { DefaultCatchBoundary } from '../components/DefaultCatchBoundary'
import { NotFound } from '../components/NotFound'
import appCss from '../styles/app.css?url'
import { seo } from '../utils/seo'
import { getSupabaseServerClient } from '../utils/supabase'
import type * as Solid from 'solid-js'

const fetchUser = createServerFn({ method: 'GET' }).handler(async () => {
  const supabase = getSupabaseServerClient()
  const { data, error: _error } = await supabase.auth.getUser()

  if (!data.user?.email) {
    return null
  }

  return {
    email: data.user.email,
  }
})

export const Route = createRootRoute({
  beforeLoad: async () => {
    const user = await fetchUser()

    return {
      user,
    }
  },
  head: () => ({
    meta: [\
      {\
        charset: 'utf-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1',\
      },\
      ...seo({\
        title:\
          'TanStack Start | Type-Safe, Client-First, Full-Stack Solid Framework',\
        description: `TanStack Start is a type-safe, client-first, full-stack Solid framework. `,\
      }),\
    ],
    links: [\
      { rel: 'stylesheet', href: appCss },\
      {\
        rel: 'apple-touch-icon',\
        sizes: '180x180',\
        href: '/apple-touch-icon.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '32x32',\
        href: '/favicon-32x32.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '16x16',\
        href: '/favicon-16x16.png',\
      },\
      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },\
      { rel: 'icon', href: '/favicon.ico' },\
    ],
  }),
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    )
  },
  notFoundComponent: () => <NotFound />,
  component: RootComponent,
})

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  )
}

function RootDocument({ children }: { children: Solid.JSX.Element }) {
  const { user } = Route.useRouteContext()()

  return (
    <html>
      <head>
        <HydrationScript />
      </head>
      <body>
        <HeadContent />
        <div class="p-2 flex gap-2 text-lg">
          <Link
            to="/"
            activeProps={{
              class: 'font-bold',
            }}
            activeOptions={{ exact: true }}
          >
            Home
          </Link>{' '}
          <Link
            to="/posts"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Posts
          </Link>
          <div class="ml-auto">
            {user ? (
              <>
                <span class="mr-2">{user.email}</span>
                <Link to="/logout">Logout</Link>
              </>
            ) : (
              <Link to="/login">Login</Link>
            )}
          </div>
        </div>
        <hr />
        {children}
        <TanStackRouterDevtools position="bottom-right" />
        <Scripts />
      </body>
    </html>
  )
}

Basic + DIY Auth

Bare + Convex + Better Auth

Partners Become a Partner

scarf analytics