Local-first auth

export function LocalFirstAuthApp() {
  const { secret, isLoading } = useLocalFirstAuth();

  if (isLoading || !secret) return null;

  return (
    <JazzProvider
      config={{
        appId: "my-app",
        secret,
      }}
    >
      <TodoApp />
    </JazzProvider>
  );
}

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { createJazzClient, JazzProvider } from "jazz-tools/vue";
import { BrowserAuthSecretStore } from "jazz-tools";

const client = ref<ReturnType<typeof createJazzClient> | null>(null);

onMounted(async () => {
  const secret = await BrowserAuthSecretStore.getOrCreateSecret();
  client.value = createJazzClient({
    appId: "my-app",
    secret,
  });
});
</script>

<template>
  <JazzProvider v-if="client" :client="client">
    <slot />
  </JazzProvider>
</template>

<script lang="ts">
  import { BrowserAuthSecretStore, createJazzClient, JazzSvelteProvider } from 'jazz-tools/svelte';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();

  const client = BrowserAuthSecretStore.getOrCreateSecret().then((secret) =>
    createJazzClient({ appId: 'my-app', secret }),
  );
</script>

<JazzSvelteProvider {client}>
  {@render children()}
</JazzSvelteProvider>

export async function createLocalFirstDb() {
  const secret = await BrowserAuthSecretStore.getOrCreateSecret({ appId: "my-app" });

  return createDb({
    appId: "my-app",
    secret,
  });
}

export function useRecoveryPhraseBackup(): {
  isLoading: boolean;
  recoveryPhrase: string | null;
} {
  const { secret, isLoading } = useLocalFirstAuth();

  return {
    isLoading,
    recoveryPhrase: secret ? RecoveryPhrase.fromSecret(secret) : null,
  };
}

export function useRecoveryPhraseBackup() {
  const isLoading = ref(true);
  const recoveryPhrase = ref<string | null>(null);

  onMounted(async () => {
    const secret = await BrowserAuthSecretStore.loadSecret();
    recoveryPhrase.value = secret ? RecoveryPhrase.fromSecret(secret) : null;
    isLoading.value = false;
  });

  return { isLoading, recoveryPhrase };
}

export function createRecoveryPhraseBackup() {
  let isLoading = $state(true);
  let recoveryPhrase = $state<string | null>(null);

  onMount(async () => {
    const secret = await BrowserAuthSecretStore.loadSecret();
    recoveryPhrase = secret ? RecoveryPhrase.fromSecret(secret) : null;
    isLoading = false;
  });

  return {
    get isLoading() {
      return isLoading;
    },
    get recoveryPhrase() {
      return recoveryPhrase;
    },
  };
}

export async function getRecoveryPhrase(): Promise<string | null> {
  const secret = await BrowserAuthSecretStore.loadSecret();
  return secret ? RecoveryPhrase.fromSecret(secret) : null;
}

export function useRecoveryPhraseRestore(): (userInput: string) => Promise<void> {
  const { login } = useLocalFirstAuth();

  return async (userInput: string) => {
    const restoredSecret = RecoveryPhrase.toSecret(userInput);
    await login(restoredSecret);
  };
}

export function useRecoveryPhraseRestore() {
  return async (userInput: string) => {
    const restoredSecret = RecoveryPhrase.toSecret(userInput);
    await BrowserAuthSecretStore.saveSecret(restoredSecret);
    // Reload so the mounted JazzProvider picks up the restored secret.
    location.reload();
  };
}

export async function restoreFromRecoveryPhrase(userInput: string) {
  const restoredSecret = RecoveryPhrase.toSecret(userInput);
  await BrowserAuthSecretStore.saveSecret(restoredSecret);
  // Reload so the mounted JazzSvelteProvider picks up the restored secret.
  location.reload();
}

export async function restoreFromRecoveryPhrase(userInput: string): Promise<void> {
  const restoredSecret = RecoveryPhrase.toSecret(userInput);
  await BrowserAuthSecretStore.saveSecret(restoredSecret);
  // Reload so the live Jazz client picks up the restored secret.
  location.reload();
}

const passkeyBackup = new BrowserPasskeyBackup({
  appName: "My App",
  // Pin to your canonical production hostname. If omitted, defaults to `location.hostname`,
  // which scopes passkeys per preview-deploy URL.
  appHostname: "myapp.com",
});

export function usePasskeyBackup(): {
  isLoading: boolean;
  backupWithPasskey: (displayName: string) => Promise<void>;
} {
  const { secret, isLoading } = useLocalFirstAuth();

  return {
    isLoading,
    backupWithPasskey: async (displayName: string) => {
      if (!secret) {
        throw new Error("Local-first secret is not ready yet");
      }

      await passkeyBackup.backup(secret, displayName);
    },
  };
}

const passkeyBackup = new BrowserPasskeyBackup({
  appName: "My App",
  // Pin to your canonical production hostname. If omitted, defaults to `location.hostname`,
  // which scopes passkeys per preview-deploy URL.
  appHostname: "myapp.com",
});

export function usePasskeyBackup() {
  return async (displayName: string) => {
    const secret = await BrowserAuthSecretStore.loadSecret();
    if (!secret) throw new Error("No local secret to back up yet");
    await passkeyBackup.backup(secret, displayName);
  };
}

const passkeyBackup = new BrowserPasskeyBackup({
  appName: "My App",
  // Pin to your canonical production hostname. If omitted, defaults to `location.hostname`,
  // which scopes passkeys per preview-deploy URL.
  appHostname: "myapp.com",
});

export async function backupToPasskey(displayName: string) {
  const secret = await BrowserAuthSecretStore.loadSecret();
  if (!secret) throw new Error("No local secret to back up yet");
  await passkeyBackup.backup(secret, displayName);
}

const passkeyBackup = new BrowserPasskeyBackup({
  appName: "My App",
  // Pin to your canonical production hostname. If omitted, defaults to `location.hostname`,
  // which scopes passkeys per preview-deploy URL.
  appHostname: "myapp.com",
});

export async function backupToPasskey(displayName: string): Promise<void> {
  const secret = await BrowserAuthSecretStore.loadSecret();
  if (!secret) throw new Error("No local secret to back up yet");
  await passkeyBackup.backup(secret, displayName);
}

export function usePasskeyRestore(): () => Promise<void> {
  const { login } = useLocalFirstAuth();

  return async () => {
    const restoredSecret = await passkeyBackup.restore();
    await login(restoredSecret);
  };
}

export function usePasskeyRestore() {
  return async () => {
    const restoredSecret = await passkeyBackup.restore();
    await BrowserAuthSecretStore.saveSecret(restoredSecret);
    location.reload();
  };
}

export async function restoreFromPasskey() {
  const restoredSecret = await passkeyBackup.restore();
  await BrowserAuthSecretStore.saveSecret(restoredSecret);
  location.reload();
}

export async function restoreFromPasskey(): Promise<void> {
  const restoredSecret = await passkeyBackup.restore();
  await BrowserAuthSecretStore.saveSecret(restoredSecret);
  location.reload();
}