---

Overview

Clerk is the easiest way to add authentication and user management to your application. Add sign up, sign in, and profile management to your application in minutes.

Features

This project has near-complete feature parity with @clerk/clerk-react:
✔ SSR support
✔ Components
✔ Hooks\*

Missing features for SolidJS:
✖ Custom pages for UI components

Plus additional features for SolidStart:
✔ Middleware
✔ Server-side auth() helper

\* = Hooks with parameters have been altered to use the Accessor type for reactivity. For example:

``ts
useOrganizationList(() => ({ userMemberships: { infinite: true } }));
`

Getting Started

$3

- SolidJS >=1
- SolidStart >=1
- Node.js >=18 or later

$3

`sh
npm install clerk-solidjs


or

yarn add clerk-solidjs

or

pnpm add clerk-solidjs

or

bun add clerk-solidjs
`

$3

`sh
pnpm run build
`

To build the package in watch mode, run the following:

`sh
pnpm run dev
`

Usage

Clerk requires your application to be wrapped in the context.

If using Vite, set VITE_CLERK_PUBLISHABLE_KEY to your Publishable key in your .env.local file to make the environment variable accessible on process.env and pass it as the publishableKey prop.

`tsx
// App.tsx

import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js/web';
import { ClerkProvider } from 'clerk-solidjs';

import './app.css';

export default function App() {
return (
root={(props) => (
publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
>
{props.children}

)}
>


);
}
`

Once you have wrapped your app in you can access hooks and components.

`tsx
import {
SignedIn,
SignedOut,
SignInButton,
UserButton,
useAuth,
ClerkLoading,
ClerkLoaded
} from 'clerk-solidjs';

export default function MyComponent() {
const { userId } = useAuth();

return (



);
}
`

$3

Clerk provides the clerkMiddleware helper function which can be used in solid-start middleware.

See SolidStart middleware for how to enable middleware.

`ts
// middleware.ts

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
})
// ... other middleware
]
});
`

$3

Once your have the clerkMiddleware middleware enabled, you can use the auth() helper to access the AuthReturn object.

`ts
import { auth } from 'clerk-solidjs/start/server';

async function myProtectedServerFunction() {
'use server';
const { userId } = auth();
if (!userId) {
throw new Error('You must be signed in');
}

// ...
}
`

If you would like the access the auth object from event.locals directly, you must add this to your globals.d.ts file:

`ts
///
import { AuthObject } from '@clerk/backend';

declare module '@solidjs/start/server' {
export interface RequestEventLocals {
auth: AuthObject;
}
}

export {};
`

Examples

$3

Basic example

Support

You can get in touch in any of the following ways:

- Create a GitHub Issue
- Create a GitHub Discussion

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines.

Security

clerk-solidjs follows good practices of security, but 100% security cannot be assured.

clerk-solidjs` is provided "as is" without any warranty. Use at your own risk.

_For more information and to report security issues, please refer to our security documentation._

License

This project is licensed under the MIT license.

See LICENSE for more information.