Install

AuthPC was renamed to pRPC

Install

First install both the plugin & the prpc package

@solid-mediakit/prpc - Where you import pRPC utils from.
@solid-mediakit/prpc-plugin - The vite plugin for pRPC (this is required for the app to work).
@tanstack/solid-query - We are using Solid Query under the hood to transform createCaller into createQuery / createMutation.

Simply run

pnpm install @solid-mediakit/prpc@latest @solid-mediakit/prpc-plugin@latest @tanstack/solid-query@latest

App Config

Wrap your entire config with the withPRPC method for typesafety:

import { withPRPC } from '@solid-mediakit/prpc-plugin'

const config = withPRPC({
  ssr: true,
})

// this is important: otherwise you cannot access the session$ property
declare module '@solid-mediakit/prpc' {
  interface Settings {
    config: typeof config
  }
}

export default config

To use any auth provider, you need to follow the guides bellow, this is optional you don't have to use any auth provider with this library, if you don't use one, you will not be able to access the session$ property.

I Want To Use Auth By Using AuthJS - here
I Want To Use Auth By Using Clerk - here
I Don't Use Any Auth - here

Setting Up Clerk

First Install The Dependencies

Install

pnpm install clerk-solidjs@latest

Env Variables

Make sure to have this in your .env

VITE_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

Wrap Your App With ClerkProvider

You must also add the QueryClientProvider provider, even if you don't want to use Solid Query but rather the function.raw,

src/app.tsx should be something like:

// @refresh reload
import './app.css'
import { MetaProvider, Title } from '@solidjs/meta'
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense } from 'solid-js'
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
import { ClerkProvider } from 'clerk-solidjs'

export default function App() {
  const queryClient = new QueryClient()
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <ClerkProvider
            publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
          >
            <QueryClientProvider client={queryClient}>
              <Suspense>{props.children}</Suspense>
            </QueryClientProvider>
          </ClerkProvider>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

Creating A Middleware

Head over to src/middleware.ts and make sure its something like:

import { createMiddleware } from '@solidjs/start/middleware'
import { clerkMiddleware } from 'clerk-solidjs/start/server'

export default createMiddleware({
  onRequest: [
    clerkMiddleware({
      publishableKey: process.env.VITE_CLERK_PUBLISHABLE_KEY,
      secretKey: process.env.CLERK_SECRET_KEY,
    }),
  ],
})

Modifying app.config.ts

This is it, you just need to modify app.config.ts

import { withPRPC } from '@solid-mediakit/prpc-plugin'

const config = withPRPC(
  {
    ssr: true,
  },
  {
    auth: 'clerk',
    authCfg: {
      middleware: './src/middleware.ts',
      protectedMessage: 'You need to sign in first',
    },
  },
)

export default config

declare module '@solid-mediakit/prpc' {
  interface Settings {
    config: typeof config
  }
}

Setting Up AuthJS

First Install The Dependencies

Install

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

Env Variables

Make sure to have this in your .env

VITE_AUTH_PATH=/api/auth
DISCORD_ID=
DISCORD_SECRET=

Create Config

After installing, head over to server/auth.ts and create the AuthJS config:

import { type SolidAuthConfig } from '@solid-mediakit/auth'
import Discord from '@auth/core/providers/discord'

declare module '@auth/core/types' {
  export interface Session {
    user: {} & DefaultSession['user']
  }
}

export const authOpts: SolidAuthConfig = {
  providers: [
    Discord({
      clientId: process.env.DISCORD_ID,
      clientSecret: process.env.DISCORD_SECRET,
    }),
  ],
  debug: false,
  basePath: import.meta.env.VITE_AUTH_PATH,
}

Create Auth API Endpoint

Go to src/routes/api/auth/[...solidauth].ts:

import { SolidAuth } from '@solid-mediakit/auth'
import { authOpts } from '~/server/auth'

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

Wrap Your App With SessionProvider

You must also add the QueryClientProvider provider, even if you don't want to use Solid Query but rather the function.raw,

src/app.tsx should be something like:

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

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

Modifying app.config.ts

This is it, you just need to modify app.config.ts

import { withPRPC } from '@solid-mediakit/prpc-plugin'

const config = withPRPC(
  {
    ssr: true,
  },
  {
    auth: 'authjs',
    authCfg: {
      source: '~/server/auth',
      configName: 'authOpts',
      protectedMessage: 'You need to sign in first',
    },
  },
)

export default config

declare module '@solid-mediakit/prpc' {
  interface Settings {
    config: typeof config
  }
}

Setting Up With No Auth

You must add the QueryClientProvider provider, even if you don't want to use Solid Query but rather the function.raw,

src/app.tsx should be something like:

// @refresh reload
import './app.css'
import { MetaProvider, Title } from '@solidjs/meta'
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense } from 'solid-js'
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'

export default function App() {
  const queryClient = new QueryClient()
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <QueryClientProvider client={queryClient}>
            <Suspense>{props.children}</Suspense>
          </QueryClientProvider>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

Links

Last updated: 5/30/25, 9:16 AM