Skip to main content

Getting started

Katavault can be easily initialized within a React app.

Overview​

The React implementation leverages React's Context API and hooks to allow Katavault's functionality to be easily available across a React app.

Quick start​

1. Wrap the app in the provider​

Wrap the app in the KatavaultProvider React Context Provider and pass the params to the value property.

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

function App() {
  return (
    <KatavaultProvider config={config}>
      {/** ... */}
    </KatavaultProvider>
  );
}
note

See CreateKatavaultParameters for information on the available parameters for the config.

2. Authentication​

As explained in the core documentation, before the app is able to start using the provider, the user MUST authenticate.

2.1. Passkey authentication​

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;
}
note

See AuthenticateWithPasskeyParameters for information on the available parameters.

2.2. Password authentication​

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

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

  useEffect(() => {
    authenticateWithPassword({
      password: 'mtr*tpv!cbg@dhn9RFH',
      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;
}
note

See AuthenticateWithPasswordParameters for information on the available parameters.

3. Using Katavault​

Now that everything is set up, every component inside the KatavaultProvider can use the React Hooks.

import { useAccounts } from '@kibisis/katavault-react';
import config from './config';

export function Accounts() {
  const accounts = useAccounts();

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