Integrate Vue application

In this tutorial, you will learn how to integrate a Vue application with the Arcana Auth SDK to enable user onboarding and signing of blockchain transactions via the embedded Web3 Arcana wallet.

Try Auth Example

Prerequisites

Developers must first log into the Arcana Developer Dashboard: https://dashboard.arcana.network
Use the dashboard to register and configure your Vue application settings for using the Auth SDK. Click on the Auth tab in the dashboard. Configure the application settings as per the required user onboarding experience. Choose and configure from a list of supported authentication mechanisms:
- Discord
- GitHub
- Google
- Twitch
- Twitter

We are working on supporting additional social providers for onboarding users. Watch out for the upcoming Auth SDK releases:

Telegram
LINE
Wechat
Kakaotalk

Tip

You may be required to configure additional details depending on the choice of social providers for user authentication. For example, to enable user onboarding via the social provider, Google, the developer must set up and specify the client ID for Google OAuth in the Arcana Dashboard before integrating the application.

For details, refer to the social provider configuration guides.
The Client ID assigned to the application is displayed on the dashboard application screen. Save the Client ID as it will be required for instantiating the AuthProvider while integrating the app with the Auth SDK.

Steps

Integrating your application with the Auth SDK is simple!

Follow these two steps:

Step 1: Install Auth SDK

npm

npm install --save @arcana/auth

yarn

yarn add @arcana/auth

CDN

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

Step 2: Initialize the Auth SDK

To integrate the application, first, you need to import Arcana Auth SDK and create a 'new' AuthProvider. During instantiation of the AuthProvider, specify the unique Client ID value assigned to your application after registering and configuring using the dashboard. Also, specify the Arcana wallet visibility mode via the alwaysVisible parameter.

You can club all the Auth SDK integration code in a file src/lib/auth.js and export the function that instantiates the AuthProvider.

import { AuthProvider } from '@arcana/auth'

let authInstance

export async function getAuthInstance () {
  if (authInstance == null) {
    // Client ID is a required parameter
    // Check SDK Reference Guide for optional parameters
    authInstance = new AuthProvider(process.env.VUE_APP_ARCANA_CLIENT_ID, {
      network: process.env.VUE_APP_ARCANA_NETWORK ?? 'testnet',
      alwaysVisible: true,
      theme: 'light',
      position: 'right'
    })
    await authInstance.init()

    // once auth instance is initialized, you can call Auth SDK functions

    // call plug and play function in the Auth SDK
    await authInstance.connect()

    // check if a user is logged in , check account balance and more...
  }
  return authInstance
}

Next, import and call this exported function in the App.vue file as shown below:

_App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
import { getAuthInstance } from './lib/auth'
export default {
  name: 'App',
  async mounted () {
    // eslint-disable-next-line no-unused-vars
    const a = await getAuthInstance()
    // Provider available at a.provider
  }
}
</script>

That is all!

You have successfully integrated your Vue application with the Auth SDK and can invoke any supported functions.

What's Next?

After integrating with the Arcana Auth SDK, an application can onboard users through social authentication and passwordless login. The application users can utilize the embedded Arcana wallet to sign blockchain transactions, transfer or send blockchain tokens, etc.