useGenerateCredentialAccount

Hook to generate a credential account. The credential account is an account derived from the user's credentials; for passkeys, this is the key material returned from the passkey; for passwords this is the combination of the username, password and hostname.

::: info

See here for further explanation on the processes involved to derive these accounts.

:::

Usage

Accounts.tsx

import { useAccounts, useGenerateCredentialAccount } from '@kibisis/katavault-react';

function Accounts() {
  const accounts = useAccounts();
  const generateCredentialAccount = useGenerateCredentialAccount();
  const handleOnAddAccountClick = useCallback(() => {
    generateCredentialAccount('Personal', {
      onError: (error) => {
        console.error(error);
      },
      onSuccess: (result: Account) => {
        console.log(`added new account ${account.address}`);
      },
    });
  }, [generateAccount]);

  return (
    <div>
      {accounts.map(({ address, name }) => (
        <div>
          <p>Address: {address}</p>
          <p>Name: {name ?? '-'}</p>
        </div>
      ))}

      <button onClick={handleOnAddAccountClick}>Generate account</button>
    </div>
  );
}

App.tsx

import { KatavaultProvider } from '@kibisis/katavault-react';
import { Accounts } from './Accounts';
import { AuthScript } from './AuthScript';
import config from './config';

function App() {
  return (
    <KatavaultProvider config={config}>
      <AuthScript />
      <Accounts />
    </KatavaultProvider>
  );
}

AuthScript.tsx

import { useAuthenticate } from '@kibisis/katavault-react';
import { useEffect } from 'react';

export function AuthScript() {
  const {
    authenticateWithPasskey,
    isAuthenticated,
  } = useAuthenticate();

  useEffect(() => {
    authenticateWithPasskey({
      user: {
        name: 'Kibi',
        username: 'kibi@kibis.is',
      },
    }, {
      onError: (error) => console.error(error),
      onSuccess: () => console.log('authenticated successfully!'), // for successful authentication, you can listen to this call back
    });
  }, []);
  useEffect(() => {
    console.log('is authenticated', isAuthenticated); // ... and/or check this variable
  }, [isAuthenticated]);

  return null;
}

config.ts

import { voi } from '@kibisis/chains';
import { CreateKatavaultParameters } from '@kibisis/katavault-core';

const config: CreateKatavaultParameters = {
  chains: [voi],
  client: {
    name: 'Awesome App!!',
  },
};

export default config;

Returns

(params?: string, options?: { onError, onSuccess }) => void

The function can be called with callbacks that are invoked on error/success.

onError

(error: BaseError, params?: string) => void | Promimse<void>

This will be invoked if there was an error.

onSuccess

(result: Account, params?: string) => void | Promimse<void>

This will be invoked if the account generation was successful.

See also

• generateCredentialAccount