Integrate Vue App

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

Prerequisites

Developers need to first log into the Arcana Developer Dashboard: https://dashboard.arcana.network
Use the Arcana Developer Dashboard to register and configure 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.
- Discord
- GitHub
- Google
- Twitch
- Twitter
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

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 Arcana Auth SDK

To integrate the application, first, you need to import auth and create an AuthProvider. During instantiation of the AuthProvider, specify the unique Client ID value assigned to the app after registering and configuring it using the Arcana Developer Dashboard. Also, specify the Arcana wallet visibility mode via the alwaysVisible parameter to manage the wallet user experience.

You can club all the Arcana 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!

The Vue app is now successfully integrated with the Arcana Auth SDK.

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