Passphrase Authentication
Passphrase authentication lets users log into any device using a recovery phrase consisting of multiple words (similar to cryptocurrency wallets). Users are responsible for storing this passphrase safely.
How it works
When a user creates an account with passphrase authentication:
- Jazz generates a unique recovery phrase derived from the user's cryptographic keys
- This phrase consists of words from a wordlist
- Users save this phrase and enter it when logging in on new devices
You can use one of the ready-to-use wordlists from the BIP39 repository or create your own.
Key benefits
- Portable: Works across any device, even without browser or OS support
- User-controlled: User manages their authentication phrase
- Flexible: Works with any wordlist you choose
- Offline capable: No external dependencies
Implementation
// @filename: wordlist.ts export const wordlist = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape", "honeydew", "kiwi", "lemon", "mango", "orange", "pear", "quince", "raspberry", "strawberry", "tangerine", "uva", "watermelon", "xigua", "yuzu", "zucchini"]; // @filename: AuthModal.tsx import * as React from "react"; import { View, TextInput, Button, Text } from 'react-native'; import { useState } from "react"; import { usePassphraseAuth } from "jazz-react-native"; type AuthModalProps = { open: boolean; onOpenChange: (open: boolean) => void; } // ---cut--- import { wordlist } from "./wordlist" export function AuthModal({ open, onOpenChange }: AuthModalProps) { const [loginPassphrase, setLoginPassphrase] = useState(""); const auth = usePassphraseAuth({ wordlist: wordlist, }); if (auth.state === "signedIn") { return <Text>You are already signed in</Text>; } const handleSignUp = async () => { await auth.signUp(); onOpenChange(false); }; const handleLogIn = async () => { await auth.logIn(loginPassphrase); onOpenChange(false); }; return ( <View> <View> <Text>Your current passphrase</Text> <TextInput editable={false} value={auth.passphrase} multiline numberOfLines={5} /> </View> <Button title="I have stored my passphrase" onPress={handleSignUp} /> <View> <Text>Log in with your passphrase</Text> <TextInput value={loginPassphrase} onChangeText={setLoginPassphrase} placeholder="Enter your passphrase" multiline numberOfLines={5} /> </View> <Button title="Log in" onPress={handleLogIn} /> </View> ); }
Examples
You can see passphrase authentication in our passphrase example or the todo list demo.
When to use Passphrases
Passphrase authentication is ideal when:
- You need to support older browsers without WebAuthn capabilities
- Your users need to access the app on many different devices
- You want a fallback authentication method alongside passkeys
Limitations and considerations
- User responsibility: Users must securely store their passphrase
- Recovery concerns: If a user loses their passphrase, they cannot recover their account
- Security risk: Anyone with the passphrase can access the account
- User experience: Requires users to enter a potentially long phrase
Make sure to emphasize to your users:
- Store the passphrase in a secure location (password manager, written down in a safe place)
- The passphrase is the only way to recover their account
- Anyone with the passphrase can access the account