Skip to main content

Auth

In this tutorial, you will learn how dApps can integrate with the Arcana Auth SDK for onboarding dApp users and enabling the embedded Web3 Arcana wallet. The Arcana wallet can be used to sign blockchain transactions on Arcana Network or any other supported EVM-compatible blockchain networks.

Before integrating with the Auth SDK, dApp developers must use the Arcana Dashboard to complete the following steps:

  • Register the dApp with Arcana Network by creating a dApp entry.
  • Configure the social authentication mechanisms for onboarding users.

Prerequisites

Steps

Integrating your dApp with the Auth SDK is simple!

Follow these two steps:

Step 1: Register and Configure dApp

  • Log into the Arcana Developer Dashboard.

  • Register your dApp by creating a new entry with the dApp name and storage region.

  • Configure the dApp settings as per the required user onboarding and blockchain signing experience:

    • User Authentication Experience: Click on the Auth tab in the dashboard. Choose and configure from a list of supported authentication mechanisms:

      • Discord
      • GitHub
      • Google
      • Twitch
      • Twitter

      note

      You may be required to configure additional details depending on the choice of authentication mechanisms. For example, if the dApp wants to enable users to onboard using the Google social authentication then the developer must set up and specify the clientID for Google OAuth.


    • Blockchain Transaction Signing Experience: Arcana Wallet

      Arcana Auth SDK provides an embedded web wallet, Arcana wallet. The dApps can use the standard Ethereum provider interface exposed by the Arcana wallet and allow users to sign blockchain transactions. The dApp developers can specify the wallet domain check settings for security.

      caution

      The dApp developers can choose the appropriate Arcana wallet visibility mode for the dApp at the time of initializing the Arcana Auth SDK by using the appropriate alwaysVisible setting. Check out how to configure wallet visibility modes for details.

  • Once your dApp is configured, Save the settings on the dashboard. Make sure you note down the App Address assigned to your newly configured dApp. This will be required to initialize the Arcana Auth SDK.

Step 2: Initialize the Auth SDK

  • Import and instantiate the AuthProvider. You need to specify the App Address assigned to your dApp in the previous step. Also, specify the Arcana wallet visibility mode via the alwaysVisible parameter.

    const { AuthProvider } = window.arcana.auth // From CDN
    //or
    import { AuthProvider, CHAIN } from '@arcana/auth' //From npm
    const appAddress = '445007f942f9Ba718953094BbeeeeeB9484cAfd2' // App Address Example

    const auth = new AuthProvider(`${appAddress}`, {
    position: 'left', // defaults to right
    theme: 'light', // defaults to dark
    alwaysVisible: false, // defaults to true which is Full UI mode
    chainConfig: {
    chainId: CHAIN.POLYGON_MAINNET,
    rpcUrl: '',
    },
    })
  • Initialize the newly instantiated AuthProvider. You can use getProvider to access the Web3 Wallet provider exported by the Auth SDK.

    try {
    await auth.init()
    } catch (e) {
    // Handle exception case
    }

    provider = auth.getProvider()
    // or
    provider = window.ethereum
    caution

    The dApp must wait until the initialization is complete, before invoking any of the other Auth SDK functions such as triggering user login, encryption/decryption, obtaining public keys, etc.

    note

    If your dApp requires to enable storage operations for the users, you also need to integrate with the Arcana Storage SDK. Save this Ethereum provider exposed by the Auth SDK in the dApp. It will be required to initialize and access the Storage SDK functions.

That is all! 🎉

You have successfully integrated your dApp with the Auth SDK and can invoke any supported functions.

tip

Refer to the sample integration code on GitHub:

What's Next?

After integrating with the Arcana Auth SDK, a dApp can onboard users through social authentication and passwordless login. The dApp users can utilize the embedded Arcana wallet to sign blockchain transactions, transfer or send blockchain tokens, etc.

You can also enable user data privacy for dApp users by integrating with the Arcana Storage SDK. It allows dApp users to control data access by signing blockchain transactions corresponding to any storage operations. This includes uploading files to the Arcana Store, and other data access operations such as retrieving, sharing, revoking access, and changing file ownership.

Refer to the following how-to guides for details:

See also