Clerk for SolidJS
npm install clerk-solidjs---
_This is an unofficial community-led port of the Clerk React SDK for SolidJS and SolidStart._










!GitHub last commit


---
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.
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 } }));
- SolidJS >=1>=1
- SolidStart >=18
- Node.js or later
`sh`
npm install clerk-solidjsor
yarn add clerk-solidjsor
pnpm add clerk-solidjsor
bun add clerk-solidjs
`sh`
pnpm run build
To build the package in watch mode, run the following:
`sh`
pnpm run dev
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 (
>
)}
>
);
}
`
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 (
Loading...
Welcome, {userId()}
$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.tsimport { 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
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._
This project is licensed under the MIT license.
See LICENSE for more information.