Skip to content

Gasless App: Onboard Users

In this guide, you will learn how 'Vanilla HTML/CSS/JS' Web3 apps can integrate with the Arcana Auth SDK onboard users and allow authenticated users to perform gasless transactions.

Developers can choose to onboard users by either using the built-in plug-and-play login UI provided by the Arcana Auth SDK or a build a custom login UI. Once a user onboards the app, they can instantly access the Arcana wallet within the app context. Developers must configure gasless operations and set up gas tanks through the Arcana Developer Dashboard prior to integrating the app with the Arcana Auth SDK.

Prerequisites

Gasless Transactions

The Arcana Auth SDK has a built-in gasless feature that can be used to enable gasless transactions in the Arcana wallet for apps that integrate with the SDK.

If you are looking at only enabling gasless transactions in third-party browser-based wallets and do not require social login, Gasless Standalone SDK (Coming soon!).

Steps

Onboarding users and enabling gasless transactions through the Arcana Auth SDK is simple!

Just a single line of code!

Option 1: Onboarding via plug-and-Play Login UI

After successfully integrating the app with the Arcana Auth SDK, make sure the AuthProvider is successfully initialized. Then simply add a single line of code, call to the connect function of the Arcana Auth SDK and enable the built-in plug-and-play login UI in the app when a user clicks a button to log in:

await auth.connect();

The connect() function will bring up the plug-and-play pop-up modal in the app context and display the available options for user onboarding. Only those options are displayed that were earlier configured by the developer using the Arcana Developer Dashboard.

The figure below shows the plug-and-play login UI screen for a test app. All the authentication providers configured by the developer are available as the onboarding options. The passwordless login option is enabled by default.

Plug-and-Play Login UI
Plug-and-Play Login

Arcana JWT Token

Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the Arcana JWT Token. App developers can use this token to verify user login and subsequently generate another token for app use. Learn more about how to verify the Arcana JWT Token for apps deployed on Testnet and Mainnet.

No plug-and-play support for Firebase authentication.

The plug and play feature of the Arcana Auth product is not supported for Firebase. Developers must build a custom login UI and add code to onboard users. For details, see onboarding users via Firebase and custom login UI

That is all!

When a user logs into the app with established gas tanks, whitelisted app operations, and deposited funds from the developer or sponsor, all allowed actions using Arcana wallet don't incur gas fees.

Option 2: Onboarding via custom Login UI

Alternatively, developers can use custom login UI to onboard users via one of the supported social login mechanisms.

That is all!

When a user logs into the app with established gas tanks, whitelisted app operations, and deposited funds from the developer or sponsor, all allowed actions using Arcana wallet don't incur gas fees.

No plug-and-play support for Firebase authentication.

The plug and play feature of the Arcana Auth product is not supported for Firebase. Developers must build a custom login UI and add code to onboard users. For details, see onboarding users via Firebase and custom login UI

What's Next?

After onboarding users in the app, developers can use other Arcana Auth SDK functions and add supported Web3 wallet operations for authenticated users. See Arcana Auth SDK Usage Guide, how to enable the Arcana wallet for details.

See also

Last update: April 12, 2024 by shaloo, shaloo