SolidStart
This guide shows how to integrate gau
with SolidStart, using Drizzle (SQLite or PostgreSQL) and GitHub as examples.
-
Follow the basic setup
Section titled “Follow the basic setup”Complete the Getting Started guide.
Complete the Drizzle guide:
- Set up your schema in
src/server/db/schema.ts
- Set up your database in
src/server/db/index.ts
- Set up your schema in
-
Set up API Route
Section titled “Set up API Route”Create a catch-all route for auth endpoints on the server.
src/routes/api/auth/[...gau].ts import { SolidAuth } from '@rttnd/gau/solidstart'import { auth } from '~/server/auth'export const { GET, POST, OPTIONS } = SolidAuth(auth) -
Add Middleware
Section titled “Add Middleware”Add the middleware to attach
getSession
toevent.locals
. Optionally, you can preload the session for selected paths or for all requests.src/middleware.ts import { authMiddleware } from '@rttnd/gau/solidstart'import { createMiddleware } from '@solidjs/start/middleware'import { auth } from './server/auth'export default createMiddleware({onRequest: [authMiddleware(true, auth)],})And register the middleware in
app.config.ts
:app.config.ts export default defineConfig({middleware: 'src/middleware.ts',})Now, in server code, you can access
event.locals.getSession()
which returns{ user, session, accounts, providers }
.For full type-safety, add the following to
src/global.d.ts
:src/global.d.ts import type { GauSession, ProviderIds } from '@rttnd/gau'import type { Auth } from './server/auth'declare global {namespace App {interface RequestEventLocals {getSession: () => Promise<GauSession<ProviderIds<Auth>>>}}}export {} -
Set up the Client
Section titled “Set up the Client”Wrap your application in an
AuthProvider
and use theuseAuth
hook to access session data.src/app.tsx // @refresh reloadimport { AuthProvider } from '@rttnd/gau/client/solid'import { Router } from '@solidjs/router'import { FileRoutes } from '@solidjs/start/router'import { Suspense } from 'solid-js'export default function App() {return (<AuthProvider><Routerroot={props => (<Suspense>{props.children}</Suspense>)}><FileRoutes /></Router></AuthProvider>)}Next, to get full TypeScript support for your provider IDs, create a typed
useAuth
hook. This is a great practice as you only have to type it once.src/lib/auth.ts import type { Auth } from '~/server/auth'import { useAuth as useAuthCore } from '@rttnd/gau/client/solid'export const useAuth = () => useAuthCore<Auth>()Now you can use your custom
useAuth
hook in any component to access the session and authentication methods.src/routes/index.tsx import { useAuth } from '~/lib/auth'import { Show } from 'solid-js'export default function Home() {const auth = useAuth()return (<Showwhen={auth.session().user}fallback={(<button onClick={() => auth.signIn('github')}>Sign in with GitHub</button>)}><button onClick={() => auth.signOut()}>Sign Out</button></Show>)} -
File Structure
Section titled “File Structure”Directorysrc
Directorylib
- auth.ts
Directoryroutes
Directoryapi
Directoryauth
- […gau].ts
- index.tsx
Directoryserver
- auth.ts
- app.tsx
- global.d.ts
- middleware.ts
- app.config.ts
- package.json
-
Next Steps
Section titled “Next Steps”- Explore other OAuth Providers.
- See Deployment for production tips.
- Learn about how
gau
works.