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.
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
- Twitch
Tip
You may be required to configure additional details depending on the choice of authentication mechanisms. For example, if the application wants to enable users to onboard using the Google social authentication then the developer must set up and specify the clientID for Google OAuth.
For details, see how to configure one or more social logins.
-
Save the App Address assigned to the application. It is displayed on the dashboard application page and required to instantiate the
AuthProvider
while integrating the application.
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 App Address 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 related 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) {
authInstance = new AuthProvider(process.env.VUE_APP_ARCANA_APP_ADDRESS, {
network: process.env.VUE_APP_ARCANA_NETWORK ?? 'dev',
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 App.vue
file as shown below:
<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.
See also
- Using Auth SDK to enable Google based social authentication
- Passwordless authentication using Auth SDK
- Auth SDK Errors
- Auth SDK Usage Guide
- Auth SDK Reference Guide