Integrate Vanilla JS application
In this tutorial, you will learn how to integrate a vanilla JS application with the Arcana Auth SDK to enable user onboarding and signing of blockchain transactions via the embedded Web3 Arcana wallet.
Note
Refer to these code samples for integrating your React/Next.js or Vue application with the Arcana Auth SDK:
Prerequisites
-
Developers must first log into the Arcana Developer Dashboard: https://dashboard.arcana.network
-
Use the dashboard to register and configure application settings for using the Auth SDK. Click on the Social Auth tab in the dashboard. Configure the application settings as per the required user onboarding experience. Choose and configure from a list of supported social providers:
- Discord
- GitHub
- Twitch
We are working on supporting additional social providers for onboarding users. Watch out for the upcoming Auth SDK releases:
- Telegram
- LINE
-
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.
-
Save the Client ID assigned to the application. It is displayed on the dashboard application page and is 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
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.
const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider, CHAIN } from '@arcana/auth' //From npm
//clientId : Arcana Unique App Identifier via Dashboard
const clientId = 'xar_test_445007f942f9Ba718953094BbeeeeeB9484cAfd2'
const auth = new AuthProvider(`${clientId}`, { //required
network: 'testnet', //defaults to 'testnet'
position: 'left', //defaults to right
theme: 'light', //defaults to dark
alwaysVisible: false, //defaults to true, wallet always visible
chainConfig: {
chainId: CHAIN.POLYGON_MAINNET, //defaults to CHAIN.ETHEREUM_MAINNET
rpcUrl: 'https://polygon-rpc.com', //defaults to 'https://rpc.ankr.com/eth'
},
})
Initialize the newly instantiated AuthProvider
.
try {
await auth.init()
} catch (e) {
// Handle exception case
}
Before you call any other Auth SDK functions, make sure initialization function is successful.
// After successful initialization, use AuthProvider functions
// For e.g., if you are building user login UI, when user
// chooses to log in via UI, call loginWithSocial function.
const arcanaProvider = await auth.loginWithSocial('google')
// If you are using ethers, you can access provider as shown below:
const provider = new ethers.providers.Web3Provider(arcanaProvider)
// If you are using web3js, then access the provider as shown below:
const provider = new Web3(arcanaProvider)
Caution
The application must wait until the initialization is complete, before invoking any of the other Auth SDK functions such as triggering user login, encryption/decryption, obtaining public keys, etc.
That is all!
You have successfully integrated your 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
- Access Ethereum providers web3.js, ethers.js
- 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