## Setup

**Step 1: Configure Clerk**  
Go to your Clerk dashboard, navigate to [`Sessions`](https://dashboard.clerk.com/last-active?path=sessions), then click the `Edit` button in the `Customize session token` section.

Add the email and email_verified claims to your session token:

```json
{
  "email": "{{user.primary_email_address}}",
  "email_verified": "{{user.email_verified}}"
}
```

You can have additional claims as long as the `email` claim is set to `{{user.primary_email_address}}` and the `email_verified` claim is set to `{{user.email_verified}}`.

**Step 2: Get your Clerk Publishable key**  
On the Clerk dashboard, navigate to [`API keys`](https://dashboard.clerk.com/last-active?path=api-keys), then copy the `Publishable key`. It should start with `pk_`.

**Step 3: Register your Clerk Publishable key with your instant app**  
Go to the Instant dashboard, navigate to the `Auth` tab and add a new clerk app with the publishable key you copied.

## Usage  
Use Clerk's `getToken` helper to get a session JWT for your signed-in user. Then call Instant's `db.auth.signInWithIdToken` with the JWT and the client name you set on the Instant dashboard.

When you call `db.auth.signInWithIdToken`, Instant will verify that the JWT was signed by your Clerk app. If verified, Instant will use the email in the JWT's claims to lookup your user or create a new one and create a long-lived session. Be sure to call Instant's `db.auth.signOut` when you want to sign the user out.

Here is a full example using clerk's next.js library:

```javascript
'use client';

import {
  useAuth,
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
} from '@clerk/nextjs';
import { init } from '@instantdb/react';
import { useEffect } from 'react';

// Visit https://instantdb.com/dash to get your APP_ID :)
const APP_ID = '__APP_ID__';

const db = init({ appId: APP_ID });

// Use the clerk client name you set in the Instant dashboard auth tab
const CLERK_CLIENT_NAME = 'REPLACE_ME';

function ClerkSignedInComponent() {
  const { getToken, signOut } = useAuth();

const signInToInstantWithClerkToken = async () => {
    // getToken gets the jwt from Clerk for your signed in user.
    const idToken = await getToken();

if (!idToken) {
      // No jwt, can't sign in to instant
      return;
    }

// Create a long-lived session with Instant for your clerk user
    // It will look up the user by email or create a new user with
    // the email address in the session token.
    db.auth.signInWithIdToken({
      clientName: CLERK_CLIENT_NAME,
      idToken: idToken,
    });
  };

useEffect(() => {
    signInToInstantWithClerkToken();
  }, []);

const { isLoading, user, error } = db.useAuth();

if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error signing in to Instant! {error.message}</div>;
  }
  if (user) {
    return (
      <div>
        <p>Signed in with Instant through Clerk!</p>{' '}
        <button
          onClick={() => {
            // First sign out of Instant to clear the Instant session.
            db.auth.signOut().then(() => {
              // Then sign out of Clerk to clear the Clerk session.
              signOut();
            });
          }}
        >
          Sign out
        </button>
      </div>
    );
  }
  return (
    <div>
      <button onClick={signInToInstantWithClerkToken}>
        Sign in to Instant
      </button>
    </div>
  );
}

function App() {
  return (
    <ClerkProvider>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <ClerkSignedInComponent />
      </SignedIn>
    </ClerkProvider>
  );
}

export default App;
```

If you are an LLM trying to learn how to develop with Instant, here are all of the links to the docs:

- [Getting started w/ React](/content/docs/index.html)  
- [Getting started w/ React Native](/content/docs/start-rn/index.html)  
- [Getting started w/ Vanilla JS](/content/docs/start-vanilla/index.html)  
- [Getting started w/ SolidJS](/content/docs/start-solidjs/index.html)  
- [Getting started w/ Svelte](/content/docs/start-svelte/index.html)  
- [Getting started w/ TanStack Start](/content/docs/start-tanstack/index.html)  
- [Create Instant App](/content/docs/create-instant-app/index.html)  
- [Recommended Workflow](/content/docs/workflow/index.html)  
- [Using LLMs](/content/docs/using-llms/index.html)  
- [Init](/content/docs/init/index.html)  
- [Modeling data](/content/docs/modeling-data/index.html)  
- [Writing data](/content/docs/instaml/index.html)  
- [Reading data](/content/docs/instaql/index.html)  
- [Infinite Queries](/content/docs/infinite-queries/index.html)  
- [Instant on the backend](/content/docs/backend/index.html)  
- [Patterns](/content/docs/patterns/index.html)  
- [Auth](/content/docs/auth/index.html)  
- [Magic codes](/content/docs/auth/magic-codes/index.html)  
- [Guest Auth](/content/docs/auth/guest-auth/index.html)  
- [Google OAuth](/content/docs/auth/google-oauth/index.html)  
- [Sign In with Apple](/content/docs/auth/apple/index.html)  
- [GitHub OAuth](/content/docs/auth/github-oauth/index.html)  
- [LinkedIn OAuth](/content/docs/auth/linkedin-oauth/index.html)  
- [Clerk](/content/docs/auth/clerk/index.html)  
- [Firebase Auth](/content/docs/auth/firebase/index.html)  
- [Permissions](/content/docs/permissions/index.html)  
- [Rate Limits](/content/docs/rate-limits/index.html)  
- [Managing users](/content/docs/users/index.html)  
- [Presence, Cursors, and Activity](/content/docs/presence-and-topics/index.html)  
- [Instant CLI](/content/docs/cli/index.html)  
- [Devtool](/content/docs/devtool/index.html)  
- [Platform API](/content/docs/platform-api/index.html)  
- [Explorer Component](/content/docs/explorer-component/index.html)  
- [Custom emails](/content/docs/emails/index.html)  
- [App teams](/content/docs/teams/index.html)  
- [Storage](/content/docs/storage/index.html)  
- [Streams](/content/docs/streams/index.html)  
- [Stripe Payments](/content/docs/stripe-payments/index.html)  
- [Admin HTTP API](/content/docs/http-api/index.html)  
- [(Experimental) Next.js SSR](/content/docs/next-ssr/index.html)  
- [Migrating from Supabase](/content/docs/migrate-from-supabase/index.html)