Integrate Vanilla HTML/CSS/JS App
In this guide, you will learn how to integrate a vanilla HTML/CSS/JS app 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 app settings 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
- Twitch
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 vanilla HTML/CSS/JS 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
Import auth
and create a 'new' 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.
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
setWindowProvider: true, //defaults to false, window.ethereum not set
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
}
That is all!
The vanilla HTML/CSS/JS app is now successfully integrated with the Arcana Auth SDK.
Caution
The app must use wait until the init
call is complete before invoking any of the other Arcana Auth SDK functions such as onboarding users by triggering user login, obtaining the standard Ethereum provider, adding/switching networks in the wallet, etc.
// 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)
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.
See also
- Access Ethereum providers
web3.js
,ethers.js
- Using the Arcana Auth SDK to enable user onboarding via Google
- Passwordless user onboarding
- Arcana Auth SDK Errors
- Arcana Auth SDK Usage Guide
- Arcana Auth SDK Reference Guide