clerk-solidjs

Features

• Complete feature parity with @clerk/clerk-react
• SSR Support
• Components
• Hooks
• Middleware
• auth() server-side helper

Overview

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

Getting Started

Prerequisites

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

Installation

npm install clerk-solidjs
# or
yarn add clerk-solidjs
# or
pnpm add clerk-solidjs
# or
bun add clerk-solidjs

Build

pnpm run build

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

pnpm run dev

Usage

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.

// 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.

import {
  SignedIn,
  SignedOut,
  SignInButton,
  UserButton,
  useAuth
} from 'clerk-solidjs';

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

  return (
    <div>
      <SignedIn>
        <UserButton />
        <p>Welcome, {userId}</p>
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </div>
  );
}

Middleware

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

See SolidStart middleware for how to enable middleware.

// middleware.ts

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

export default createMiddleware({
  onRequest: [
    clerkMiddleware({
        publishableKey: process.env.VITE_CLERK_PUBLISHABLE_KEY
        secretKey: process.env.CLERK_SECRET_KEY
    }),
    // ... other middleware
});

Then you can use the auth() helper function to access the auth object.

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

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

  // ...
}

Support

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

• Join the Clerk official community Discord server
• Create a GitHub Discussion
• Contact options listed on the Clerk Support page

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.