Authentication methods
Jazz supports a variety of authentication methods, which you can use to authenticate users in your app.
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 React 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 React 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 React 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>, );