Skip to content

SolidStart

This guide shows how to integrate gau with SolidStart, using Drizzle (SQLite or PostgreSQL) and GitHub as examples.


  1. 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. 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)
  3. Add the middleware to attach getSession to event.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 {}
  4. Wrap your application in an AuthProvider and use the useAuth hook to access session data.

    src/app.tsx
    // @refresh reload
    import { 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>
    <Router
    root={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 (
    <Show
    when={auth.session().user}
    fallback={(
    <button onClick={() => auth.signIn('github')}>Sign in with GitHub</button>
    )}
    >
    <button onClick={() => auth.signOut()}>Sign Out</button>
    </Show>
    )
    }
    • 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