https://github.com/spirit-led-software/clerk-solidjs
The Community-Led SolidJS Clerk SDK
https://github.com/spirit-led-software/clerk-solidjs
clerk clerk-auth solid solidjs
Last synced: 7 months ago
JSON representation
The Community-Led SolidJS Clerk SDK
- Host: GitHub
- URL: https://github.com/spirit-led-software/clerk-solidjs
- Owner: spirit-led-software
- License: mit
- Created: 2024-07-10T19:25:44.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-10T20:41:16.000Z (7 months ago)
- Last Synced: 2025-03-16T14:53:55.211Z (7 months ago)
- Topics: clerk, clerk-auth, solid, solidjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/clerk-solidjs
- Size: 1.55 MB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: docs/SECURITY.md
Awesome Lists containing this project
README
---
_This is an unofficial community-led port of the [Clerk React SDK](https://www.npmjs.com/package/@clerk/clerk-react) for [SolidJS](https://solidjs.com) and [SolidStart](https://start.solidjs.com)._
[](https://clerk.com/docs?utm_source=github&utm_medium=clerk_solidjs)
### Released on NPM
[](https://www.npmjs.com/package/clerk-solidjs)
[
](https://www.npmjs.com/package/clerk-solidjs)
### Maintained on GitHub
[](https://github.com/spirit-led-software/clerk-solidjs/stargazers)
[](https://github.com/spirit-led-software/clerk-solidjs/watchers)
[](https://github.com/spirit-led-software/clerk-solidjs/blob/master/LICENSE)
[](https://github.com/spirit-led-software/clerk-solidjs/forks)
[](https://github.com/spirit-led-software/clerk-solidjs/issues)
[](https://github.com/spirit-led-software/clerk-solidjs/pulls)
[](https://github.com/spirit-led-software/clerk-solidjs/graphs/contributors)
[](https://pnpm.io/)
[](https://turborepo.org/)
---
## 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](https://clerk.com/docs/components/overview)
✔ [Hooks](https://clerk.com/docs/references/react/use-user)\*
Missing features for SolidJS:
✖ [Custom pages for UI components](https://clerk.com/docs/components/customization/user-profile)
Plus additional features for SolidStart:
✔ [Middleware](#middleware)
✔ [Server-side `auth()` helper](#the-auth-helper)
\* = Hooks with parameters have been altered to use the `Accessor` type for reactivity. For example:
```ts
useOrganizationList(() => ({ userMemberships: { infinite: true } }));
```
## Getting Started
### Prerequisites
- SolidJS `>=1`
- SolidStart `>=1`
- Node.js `>=18` or later
### Installation
```sh
npm install clerk-solidjs
# or
yarn add clerk-solidjs
# or
pnpm add clerk-solidjs
# or
bun add clerk-solidjs
```
### Build
```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 (
(
{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 (
Loading...
Welcome, {userId()}
);
}
```
### Middleware
Clerk provides the `clerkMiddleware` helper function which can be used in `solid-start` middleware.
See [SolidStart middleware](https://docs.solidjs.com/solid-start/advanced/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
]
});
```
### The `auth()` Helper
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
### Basic
[Basic example](/examples/basic)
## Support
You can get in touch in any of the following ways:
- Create a [GitHub Issue](https://github.com/spirit-led-software/clerk-solidjs/issues)
- Create a [GitHub Discussion](https://github.com/spirit-led-software/clerk-solidjs/discussions)
## Contributing
We're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/spirit-led-software/clerk-solidjs/blob/master/docs/CONTRIBUTING.md).
## 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](https://github.com/spirit-led-software/clerk-solidjs/blob/master/docs/SECURITY.md)._
## License
This project is licensed under the **MIT license**.
See [LICENSE](https://github.com/spirit-led-software/clerk-solidjs/blob/master/LICENSE) for more information.