Integrate Vue App

In this guide, you will learn how to integrate a Vue application with the Arcana Auth SDK.

Prerequisites

Log in to the Arcana Developer Dashboard: https://dashboard.arcana.network
Use the Arcana Developer Dashboard to register the Vue app before integrating with the Arcana Auth SDK.
Click on the Social Auth tab in the Arcana Developer Dashboard. Configure and select one or more supported authentication providers for onboarding the app users.

Configure Authentication Providers

You may be required to configure additional provider details for different authentication providers. In the case of Google, the developer must use Google Developer Console to set up the app and generate a Google assigned client ID for Google OAuth. This Google ClientID will be configured in the Arcana Developer Dashboard Social Auth settings before integrating the app.

For details, see how to configure authentication providers.
Save the Client ID assigned to the app displayed in the Arcana Developer Dashboard. It is required while integrating the app with the Arcana Auth SDK and creating the AuthProvider.

Steps

Integrating a Vue app with the Arcana Auth SDK is simple!

Follow these two steps:

Step 1: Install `auth` package

npmyarnCDN

npm install --save @arcana/auth

yarn add @arcana/auth

<script src="https://cdn.jsdelivr.net/npm/@arcana/auth"></script>
<script src="https://unpkg.com/@arcana/auth"></script>

Step 2: Initialize the Arcana Auth SDK

After installing the SDK, add code to import auth. Create an AuthProvider with the following inputs:

Client ID Specify the unique identifier obtained after registering the app through the Arcana Developer Dashboard.
Wallet User Experience: Use the alwaysVisible parameter to specify the Arcana wallet visibility mode that controls the user experience for the wallet.

The sample code below demonstrates how a new AuthProvider is created and initialized. It also uses the connect function to use the built-in, plug-and-play login UI feature of the Arcana Auth SDK to onboard users.

auth.js

import { AuthProvider } from "@arcana/auth";

let authInstance;

//Mainnet ClientId
const clientId = "xar_live_d7c88d9b033d100e4200d21a5c4897b896e60063";

export async function getAuthInstance() {
  if (authInstance == null) {
    authInstance = new AuthProvider(clientId, {
      alwaysVisible: true,
      theme: "light",
      position: "right",
    });
    await authInstance.init();
    await authInstance.connect();
  }
  return authInstance;
}

In the case of a Vue app, update the App.vue file to use the new AuthProvider and allow authenticated users to access the Arcana wallet:

App.vue

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { getAuthInstance } from "@/auth";
const msg = ref<string>("World! 123");
const myAuth = await getAuthInstance();
</script>

Once the user logs in the app, they can access the embedded, Arcana wallet to sign blockchain transactions.

That is all!

The Vue app is now successfully integrated with the Arcana Auth SDK. Refer to the Auth Examples for working integration examples.

What's Next?

After integrating an app with the Arcana Auth SDK, developers can add code to onboard users and enable Web3 wallet operations for authenticated users to sign blockchain transactions.

Integrate Vue App

Prerequisites

Steps

Step 1: Install auth package

Step 2: Initialize the Arcana Auth SDK

What's Next?

See also

Step 1: Install `auth` package