Custom authentication

Connect to your own authentication back-end

Creating a custom adapter

First create an authentication adapter. This allows KlayKit to create/prepare messages and communicate with your back-end.

As an example, we could make an authentication adapter that lets us use Sign-In with Ethereum against some custom API endpoints.

import { createAuthenticationAdapter } from 'klaykit';
import { SiweMessage } from 'siwe';

const authenticationAdapter = createAuthenticationAdapter({
  getNonce: async () => {
    const response = await fetch('/api/nonce');
    return await response.text();
  },

  createMessage: ({ nonce, address, chainId }) => {
    return new SiweMessage({
      domain: window.location.host,
      address,
      statement: 'Sign in with Klaytn to the app.',
      uri: window.location.origin,
      version: '1',
      chainId,
      nonce,
    });
  },

  getMessageBody: ({ message }) => {
    return message.prepareMessage();
  },

  verify: async ({ message, signature }) => {
    const verifyRes = await fetch('/api/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message, signature }),
    });

    return Boolean(verifyRes.ok);
  },

  signOut: async () => {
    await fetch('/api/logout');
  },
});

Providing the authentication state

Assuming your application is already managing the authentication lifecycle in some way, you can pass the current authentication status along with your custom adapter to RainbowKitAuthenticationProvider, wrapping your existing RainbowKitProvider.

import {
  createAuthenticationAdapter,
  RainbowKitAuthenticationProvider,
  RainbowKitProvider,
} from 'klaykit';
import { AppProps } from 'next/app';
import { WagmiConfig } from 'wagmi';

const authenticationAdapter = createAuthenticationAdapter({
  /* See above... */
});

export default function App({ Component, pageProps }: AppProps) {
  // You'll need to resolve AUTHENTICATION_STATUS here
  // using your application's authentication system.
  // It needs to be either 'loading' (during initial load),
  // 'unathenticated' or 'authenticated'.

  return (
    <WagmiConfig {...etc}>
      <RainbowKitAuthenticationProvider
        adapter={authenticationAdapter}
        status={AUTHENTICATION_STATUS}
      >
        <RainbowKitProvider {...etc}>
          <Component {...pageProps} />
        </RainbowKitProvider>
      </RainbowKitAuthenticationProvider>
    </WagmiConfig>
  );
}

Overview

Getting Started

Advanced

Custom authentication

Connect to your own authentication back-end

Creating a custom adapter

Providing the authentication state