Build Passwordless Auth

. In this guide, you will learn how React/Next.js app can use the Arcana Auth product to easily onboard users through the passwordless login option in a custom login UI.

Prerequisites

Make sure you can access the Arcana Developer Dashboard: https://dashboard.arcana.network
The app must be registered using the Arcana Developer Dashboard and a unique Client ID must be already assigned to it. This Client ID is essential for integrating the app with the Arcana Auth SDK
Follow the instructions to integrate the React app with the Arcana Auth product.

Configuring App

Unlike other user onboarding options that require enabling authentication providers, passwordless login does not require any configuration setup through the Arcana Developer Dashboard.

Steps

Enabling passwordless login in a React app is simple!

After integrating the app, add the code to onboard users in a passwordless manner using the SDK method listed below.

useAuth() hook

Use loginWithLink (deprecated) loginWithOTPStart and loginWithOTPComplete through the useAuth hook offered by the Arcana Auth React SDK and trigger passwordless login to onboard the users.

App users must supply an email ID to receive the OTP for logging into the app. An OTP is sent to the specified email ID. When the user provides the same OTP in the app context, authentication is complete and a wallet address is assigned to the user.

await auth.loginWithLink(`${email}`)

Deprecated

loginWithLink is deprecated.

Use loginWithOTPStart, loginWithOTPComplete for passwordless login with OTP. The OTP will be received via email supplied in loginWithOTPStart call.

try {
const loginState = await auth.loginWithOTPStart("john.doe@somemail.com");
await loginState.begin()
if(loginState.isCompleteRequired) {
  // App is using default app-specific keys
  // App must ask the user to input a 6-digit code received in mail
  var userInput = prompt("Please enter a 6-digit code:", "111111");

  // Validate if the input is a 6-digit code
  if (userInput !== null && 
      userInput.length === 6 && 
      !isNaN(userInput)) {
    const complete = await auth.loginWithOTPComplete(
      userInput, 
      onMFARequired() => {
      //Hide overlay, if used in the app
    });
    console.log("complete:",complete);
  } else {
    console.log("Invalid input. Please enter a valid 6-digit code.");
  } 
} else {
  // App is using global keys, built-in OTP input UI is displayed by the SDK
  // App is not required to add code for OTP input
}
} catch (e) {
console.log(e);
}

Global vs. App Specific Keys

Apps using app-specific keys must add custom UI code that allows users to input the OTP at login. In this case, the isCompleteRequired boolean returns true after initiating login with OTP.

Apps using global keys are not required to add custom UI. A built-in login UI to enter the OTP is displayed automatically. Users must enter the OTP received via email in this UI.

MFA Enabled / Disabled

During passwordless login via OTP, apps configured for MFA and those using overlays must hide it to enable OTP input. Use the isMFARequired callback in the loginWithOTPComplete method to hide the overlay.

That is all!

Your React app is all set for onboarding users via the passwordless login option.

What's Next?

After enabling passwordless login in the app, developers can enable Web3 wallet operations for authenticated users. See Arcana Auth SDK Usage Guide, how to enable the Arcana wallet for details.

Build Passwordless Auth

Prerequisites

Steps

Login with link

Login with OTP

What's Next?

See also