Install

Adding MediaKit/auth to SolidStart

Install

pnpm add @solid-mediakit/auth@latest @auth/core@latest

Env variables

The env variables are required for the app to work!

VITE_AUTH_PATH - Path for the auth api: /api/auth
AUTH_URL - Url for your app: http://localhost:3000

SessionProvider

In order to update the session context accordingly, the entire app needs to be wrapped with a SessionProvider, this is a SolidJS context that will hold the current session.

// app.tsx
// @refresh reload
import { MetaProvider, Title } from '@solidjs/meta'
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense } from 'solid-js'
import './app.css'
import { SessionProvider } from '@solid-mediakit/auth/client'

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <Suspense>
            <SessionProvider>{props.children} </SessionProvider>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

Now that everything is set up on the client, we can start setting up the server.

API Route

Go ahead to routes/api/auth/[...solidauth].ts, since we are using AuthJS, we can access all of its well known providers (Google, Github, etc). Make sure you have these enviroment variables set up:

GITHUB_ID - Github Client ID
GITHUB_SECRET - Github Client Secret
AUTH_SECRET - Secret used to sign token: openssl rand -base64 32

// routes/api/auth/[...solidauth].ts
import { SolidAuth, type SolidAuthConfig } from '@solid-mediakit/auth'
import GitHub from '@auth/core/providers/github'

export const authOpts: SolidAuthConfig = {
  providers: [
    GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  debug: false,
}

export const { GET, POST } = SolidAuth(authOpts)

Now that everything is configured correctly, we can go ahead and start using the client functions: