Authentication methods

Jazz supports a variety of authentication methods, which you can use to authenticate users in your app.

Passphrase (built-in)
Passkey (built-in)
Clerk (React and vanilla packages)

Passphrase

Passphrase authentication allows users to create a new account or log in with an existing one by providing a passphrase.

Passphrase authentication is supported out of the box and imported from jazz-react.

How to use

Setup up Jazz as described in the setup guide.
Use the usePassphraseAuth hook to authenticate.

import { usePassphraseAuth } from "jazz-react";

// ...

const [passphraseAuth, passphraseState] = usePassphraseAuth({ appName });

Passkey

Passkey authentication allows users to create a new account or log in with an existing one by providing a passkey.

Passkey authentication is supported out of the box.

We have a minimal example of a passkey authentication setup.

How to use

Setup up Jazz as described in the setup guide.
Use the usePasskeyAuth hook to authenticate.

import { usePasskeyAuth } from "jazz-react";

// ...

const [passkeyAuth, passkeyState] = usePasskeyAuth({ appName });

Clerk

We have a React package jazz-react-auth-clerk to add Clerk authentication to your app.

We have a minimal example of a Clerk authentication setup.

How to use

Setup up Jazz as described in the setup guide.
Install Clerk as described in the Clerk docs.
Then add the appropriate package to your project (e.g. jazz-react-auth-clerk).

pnpm install jazz-react-auth-clerk

Provide a Clerk instance to the useJazzClerkAuth hook.

import { useClerk, SignInButton } from "@clerk/clerk-react";
import { useJazzClerkAuth } from "jazz-react-auth-clerk";

// ...

function JazzAndAuth({ children }: { children: React.ReactNode }) {
  const clerk = useClerk();
  const [auth, state] = useJazzClerkAuth(clerk);

  return (
    <>
      {clerk.user && auth ? (
        <Jazz.Provider auth={auth}></Jazz.Provider>
      ) : (
        <SignInButton />
      )}
    </>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
      <JazzAndAuth>
        <App />
      </JazzAndAuth>
    </ClerkProvider>
  </StrictMode>,
);