Skip to content

Plug-and-Play Login UI

In this guide, you will learn how 'Vanilla HTML/CSS/JS' Web3 apps can integrate with the Arcana Auth SDK and use the plug-and-play feature to onboard users with the built-in login UI.

Prerequisites

Steps

Using the plug-and-play authentication feature is simple!

Just a single line of code!

Step 1: Call User Onboarding Function: connect

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 built-in, plug-and-play login UI screen for a test app. All the authentication providers configured by the developer are displayed as the onboarding options in this login UI. The passwordless login option is automatically enabled and requires no dashboard set up.

Plug-and-Play Login UI

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.

That is all!

The plug-and-play user onboarding feature is successfully enabled in an app integrated with the Arcana Auth SDK.

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 [[{{ no such element: dict object['firebase_custom_ui_tag'] }}|onboarding users via Firebase and custom login UI]]

What's Next?

After enabling the plug-and-play user onboarding feature in the app, developers can use other Arcana Auth SDK functions and enable Web3 wallet operations for authenticated users. See Arcana Auth SDK Usage Guide, how to enable the Arcana wallet for details.

See also


Last update: June 21, 2023 by shaloo