Plug & Play Auth

In earlier beta releases, apps were required to integrate with the Arcana Auth SDK in order to onboard users with a custom login UI. For instance, the custom login UI code was required to call the loginWithSocial('google') method to onboard users via Google. Similarly, the passwordless login option was required to provision an email input field and call loginWithLink (deprecated), loginWithOTPStart and loginWithOTPComplete functions to onboard users.

Now, the latest Arcana Auth SDK offers a 'plug-and-play' feature, with a built-in login UI. Developers can choose to use custom login UI or get started faster with the built-in user onboarding via the 'plug-and-play auth' feature.

Developers can now choose to use the connect method to bring up the built-in login UI, displaying configured onboarding options as setup using the Arcana Developer Dashboard.

After successful authentication, users instantly access the Arcana wallet for blockchain transactions.

flowchart LR 
    subgraph A [Plug & Play vs. Custom Login UI]
    direction LR
        A1(((Developer))) -- 1. Register App --> B1(Dashboard Login)
        B1  --> C1[Get Client ID] --> E1[Initialize <code>AuthProvider</code>]
        A1 -- 2. Integrate App --> D1[Install Auth SDK] --> E1 --> O[Onboard Users]
    end
classDef an-pink stroke:#ff4e9f,stroke-width:0.25rem;
class F1 an-pink

flowchart LR
    subgraph B [Onboard Users]
    direction LR
        O[Onboard Users] -- Plug-and-Play Login UI--> F1[<code>connect</code>]
        O -- Custom Login UI --> P1{Provider Type} -- Social Providers --> G1[<code>loginWithSocial</code>]
        P1 -- IAM Provider Firebase --> H1[<code>loginWithBearer</code>]
    end

classDef an-pink stroke:#ff4e9f,stroke-width:0.25rem;
class F1 an-pink

Compact Plug & Play UI

When using the built-in plug-and-play login UI, developers can choose to use the standard login modal or a compact one by specifying the compact: true setting in the connectOptions while instantiating the AuthProvider. For details, see AuthProvider constructor parameters.

import { AuthProvider, CHAIN } from '@arcana/auth'

interface ChainConfig {
  chainId: CHAIN
  rpcUrl?: string
}

const auth = new AuthProvider(`${clientId}`, {
  position: 'left',        // default - right
  theme: 'light',          // default - dark
  alwaysVisible: false,    // default - true
  setWindowProvider: true, // default - false
  connectOptions: {
    compact: true // default - false
  },
  chainConfig: {
    chainId: CHAIN.POLYGON_MAINNET,
    rpcUrl: '',
  },
})

await auth.init()

Login UI Types

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.

---

Last update: April 22, 2024 by shaloo, shaloo