Solid

Solid 2 RC is out. Read the announcement.

Solid 2 uses start mode from @solidjs/vite-plugin instead of SolidStart. This guide uses Solid 2. If your app uses Solid 1, see Solid 1.

Solid 2

1. Follow the Basic Setup

   Complete the Getting Started guide.

   Complete the Drizzle guide:

   1. Set up your schema in src/server/db/schema.ts
   2. Set up your database in src/server/db/index.ts

2. Configure Solid

   Enable start mode and file-system routing:

   vite.config.ts

   import solid from '@solidjs/vite-plugin'
   import { fileRoutes } from 'filesystem-routing/vite'
   import { defineConfig } from 'vite'
   
   export default defineConfig({
     plugins: [
       solid({
         start: { middleware: './src/middleware.ts' },
         ssr: true,
         serverFunctions: true,
       }),
       fileRoutes({ httpMethods: true }),
     ],
   })

   src/router.ts

   import { createRouter } from '@solidjs/router'
   import { fileRoutes } from '@solidjs/router/fs'
   import { pageRoutes } from 'virtual:file-routes'
   
   export const Router = createRouter({
     routes: fileRoutes(pageRoutes),
   })

3. Set up the API Route

   Create a catch-all route for the auth endpoints.

   src/routes/api/auth/[...gau].ts

   import { SolidAuth } from '@rttnd/gau/solid2'
   import { auth } from '~/server/auth'
   
   export const { GET, POST, OPTIONS } = SolidAuth(auth)

4. Add Middleware

   Add the Gau middleware before the file-system router.

   src/middleware.ts

   import { authMiddleware, refreshMiddleware } from '@rttnd/gau/solid2'
   import { createAPIHandler } from 'filesystem-routing/api'
   import routes from 'virtual:file-routes'
   import { auth } from './server/auth'
   
   export default [
     authMiddleware(auth),
     refreshMiddleware(auth, { threshold: 0.5 }),
     createAPIHandler(routes),
   ]

   Server code can now call event.locals.getSession(). Use getServerSession() only when you need account tokens on the server.

   Add the locals to src/global.d.ts for full type safety:

   src/global.d.ts

   /// <reference types="filesystem-routing/types" />
   
   import type { GauSolid2Locals } from '@rttnd/gau/solid2'
   import type { Auth } from './server/auth'
   
   declare module '@solidjs/web' {
     interface RequestEventLocals extends GauSolid2Locals<Auth> {}
   }
   
   export {}

5. Set up the Client

   Wrap your routes in AuthProvider.

   src/App.tsx

   import { AuthProvider } from '@rttnd/gau/client/solid2'
   import { Router } from './router'
   
   export default function App() {
     return (
       <Router>
         {props => (
           <AuthProvider>
             {props.children}
           </AuthProvider>
         )}
       </Router>
     )
   }

   Different origins

   If your frontend and backend use different origins, set baseUrl to the full URL of the auth API.

   <AuthProvider baseUrl={import.meta.env.VITE_API_URL}>
     {/* app */}
   </AuthProvider>

   To include the session in the server-rendered page, pass it to AuthProvider. See the Solid 2 example for the full setup.

6. Use the Client

   Create a typed useAuth hook:

   src/lib/auth.ts

   import type { Auth } from '~/server/auth'
   import { useAuth as useAuthCore } from '@rttnd/gau/client/solid2'
   
   export const useAuth = () => useAuthCore<Auth>()

   Use it in your components:

   src/routes/index.tsx

   import { Show } from 'solid-js'
   import { useAuth } from '~/lib/auth'
   
   export default function Home() {
     const auth = useAuth()
   
     return (
       <Show
         when={auth.session().user}
         fallback={<button onClick={() => auth.signIn('github')}>Sign in with GitHub</button>}
       >
         <button onClick={() => auth.signOut()}>Sign out</button>
       </Show>
     )
   }

Cross-origin Server Functions

To call server functions from Tauri or another origin, configure the remote endpoint once:

src/App.tsx

import { configureServerFunctions } from '@rttnd/gau/client/solid2'

configureServerFunctions({
  endpoint: import.meta.env.VITE_SERVER_FUNCTIONS_URL,
})

Restrict the frontend origins in createAuth:

src/server/auth.ts

createAuth({
  // ...
  trustHosts: ['tauri.localhost'],
  cors: { allowedOrigins: 'trust' },
})

Then add it before your other server middleware:

src/middleware.ts

import { serverFunctionsMiddleware } from '@rttnd/gau/solid2'

export default [
  serverFunctionsMiddleware(auth),
  // ...
]

It handles CORS. Keep refreshMiddleware enabled to refresh sessions; the client stores refreshed bearer tokens.

Solid 1

Solid 1 apps continue to use SolidStart. Use @rttnd/gau/solidstart for routes and middleware, and @rttnd/gau/client/solid for the client.

See the Solid 1 example for a complete setup.