clerk-solidjs
Version:
245 lines (175 loc) • 7.68 kB
Markdown
<div align="center">
<img src="https://raw.githubusercontent.com/spirit-led-software/clerk-solidjs/master/assets/images/icon.svg" alt="clerk-solidjs">
---
_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)
[](https://www.npmjs.com/package/clerk-solidjs)
[
](https://www.npmjs.com/package/clerk-solidjs)
[](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/)
</div>
---
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:
&
&
&
Missing features for SolidJS:
&
Plus additional features for SolidStart:
&
&
\* = Hooks with parameters have been altered to use the `Accessor<Params>` type for reactivity. For example:
```ts
useOrganizationList(() => ({ userMemberships: { infinite: true } }));
```
- SolidJS `>=1`
- SolidStart `>=1`
- Node.js `>=18` or later
```sh
npm install clerk-solidjs
yarn add clerk-solidjs
pnpm add clerk-solidjs
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 `<ClerkProvider />` 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 (
<Router
root={(props) => (
<ClerkProvider
publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
>
<Suspense>{props.children}</Suspense>
</ClerkProvider>
)}
>
<FileRoutes />
</Router>
);
}
```
Once you have wrapped your app in `<ClerkProvider />` 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 (
<div>
<ClerkLoading>
<p>Loading...</p>
</ClerkLoading>
<ClerkLoaded>
<SignedIn>
<UserButton />
<p>Welcome, {userId()}</p>
</SignedIn>
<SignedOut>
<SignInButton />
</SignedOut>
</ClerkLoaded>
</div>
);
}
```
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
]
});
```
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
/// <reference types="@solidjs/start/server" />
import { AuthObject } from '@clerk/backend';
declare module '@solidjs/start/server' {
export interface RequestEventLocals {
auth: AuthObject;
}
}
export {};
```
[](/examples/basic)
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)
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).
`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)._
This project is licensed under the **MIT license**.
See [LICENSE](https://github.com/spirit-led-software/clerk-solidjs/blob/master/LICENSE) for more information.