ic-siwe-js: v0.2.4

Added

• Support for Vue.

Usage with Vue

The Vue submodule comes with SiweIdentityProvider that makes the SiweManager available to all components in the app. It also provides a useSiwe hook that can be used to interact with the SiweManager instance.

1. Setup the SiweIdentityProvider component

In the App.vue component, initiate the SiweIdentityProvider with a reference to the SIWE provider canister to make it available to all child components.

<script setup lang="ts">

import { createSiweIdentityProvider } from "ic-siwe-js/vue";
import { canisterId } from "../../ic_siwe_provider/declarations/index";

createSiweIdentityProvider({
  canisterId,
});

</script>

<template>
    <!-- Your app components -->
</template>

2. Initiate the login process

The login process is initiated by calling the login function. This function requests a SIWE message from the backend if it has not already been loaded. The user is asked to sign the message using their Ethereum wallet and the signed message is sent to the backend for authentication. Once the authentication is complete, the user's identity is stored in local storage and the identity state variable is updated with the new identity.

The loginStatus state variable can be used to indicate the status of the login process. Errors that occur during the login process are stored in the loginError state variable.

<script setup lang="ts">
import { useSiwe } from "ic-siwe-js/vue";

const siwe = useSiwe();

</script>

<template>
  <div>
    <button @click="siwe.login">
      Login
    </button>

    <button @click="siwe.clear">
      Logout
    </button>
  </div>
</template>