Clerk

Superlayer supports auth with Clerk.

#Setup

Step 1: Configure Clerk

Go to your Clerk dashboard, navigate to Sessions, then click the Edit button in the Customize session token section.

Add the email and email_verified claims to your session token:

{
  "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}}.

Clerk token form

Step 2: Get your Clerk Publishable key

On the Clerk dashboard, navigate to API keys, then copy the Publishable key. It should start with pk_.

Step 3: Register your Clerk Publishable key with your Superlayer app

From the dashboard

From the Auth tab on the Superlayer dashboard, add a new Clerk client with the publishable key you copied.

From the terminal

npx @superlayer/cli@latest auth client add \
  --type clerk --name clerk --publishable-key <publishable-key>

#Usage

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

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

Here is a full example using Clerk's Next.js library:

'use client';
 
import {
  useAuth,
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
} from '@clerk/nextjs';
import { init } from '@superlayer/react';
import { useEffect } from 'react';
 
// Visit https://interfacedb.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 Superlayer dashboard auth tab
const CLERK_CLIENT_NAME = 'REPLACE_ME';
 
function ClerkSignedInComponent() {
  const { getToken, signOut } = useAuth();
 
  const signInToSuperlayerWithClerkToken = async () => {
    // getToken gets the jwt from Clerk for your signed in user.
    const idToken = await getToken();
 
    if (!idToken) {
      // No JWT, so we can't sign in to Superlayer.
      return;
    }
 
    // Create a long-lived session with Superlayer 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(() => {
    signInToSuperlayerWithClerkToken();
  }, []);
 
  const { isLoading, user, error } = db.useAuth();
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error signing in to Superlayer! {error.message}</div>;
  }
  if (user) {
    return (
      <div>
        <p>Signed in with Superlayer through Clerk!</p>{' '}
        <button
          onClick={() => {
            // First sign out of Superlayer to clear the Superlayer session.
            db.auth.signOut().then(() => {
              // Then sign out of Clerk to clear the Clerk session.
              signOut();
            });
          }}
        >
          Sign out
        </button>
      </div>
    );
  }
  return (
    <div>
      <button onClick={signInToSuperlayerWithClerkToken}>
        Sign in to Superlayer
      </button>
    </div>
  );
}
 
function App() {
  return (
    <ClerkProvider>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <ClerkSignedInComponent />
      </SignedIn>
    </ClerkProvider>
  );
}
 
export default App;

Pick your app

#Setup

#Usage