Skip to content

Integrate Custom OAuth App

Estimated time to read: 3 minutes

This guide shows how apps using custom OAuth for signing in users can integrate with the Arcana Auth SDK and easily allow authenticated users to sign blockchain transactions securely.

Prerequisites

  • Make sure you have configured the custom OAuth settings using the Arcana Developer Dashboard.

  • You will require the following to integrate the app with the SDK:

  • Unique Client ID assigned to the app after registration.

  • Provider identifier value displayed in the registered app settings in the dashboard after configuring and saving the custom OAuth settings.

Step 1: Install auth package

npm install --save @arcana/auth

yarn add @arcana/auth

<script src="https://cdn.jsdelivr.net/npm/@arcana/auth"></script>
<script src="https://unpkg.com/@arcana/auth"></script>

Step 2: Initialize the Arcana Auth SDK

After installing the SDK, add code to import auth. Create an AuthProvider with the following inputs:

  • Client ID Specify the unique identifier obtained after registering the app through the Arcana Developer Dashboard.

  • Wallet User Experience: Use the alwaysVisible parameter to specify the Arcana wallet visibility mode that controls the user experience for the wallet.

  • Call AuthProvider.init() method to initialize the SDK

import { AuthProvider } from "@arcana/auth";

let auth: AuthProvider | null = null;

if (!auth) {
  auth = new AuthProvider("Enter your app's Client Id");
}
await auth.init();

Step 3: Call loginWithCustomProvider

After the user logs in successfully via custom OAuth, get the JWT and provide it as input to the Arcana Auth SDK method below:

           await auth.loginWithCustomProvider({
              token: params.token, //JWT Token
              userID: params.userID,  // Email or ID as configured in the Dashboard settings
              provider: "provider-id-name", //Custom OAuth Provider identifier displayed in the Dashboard
            });

Upon success, loginWithCustomProvider will ensure that the authenticated user's key shares are fetched locally and the user key is generated within the app/user context securely, with full privacy.

If you specify the alwaysVisible flag as true when creating the AuthProvider in the integration code above, the embedded Arcana wallet UI is displayed instantly within the app's context after JWT claim verification via the loginWithCustomProvider method.

Next, developers can use the provider initialized earlier to allow authenticated users to sign the blockchain transactions via the wallet UI or JSON/RPC calls added in the integrated app code.

Sample Code

Refer to Custom OAuth Frontend and Custom OAuth Server for details. These are examples of a custom OAuth login server and a frontend that uses the loginWithCustomProvider method for fetching authenticated user's keys to perform blockchain transactions.

That is all!

What's Next?

You can add enable Web3 wallet operations for authenticated users to sign blockchain transactions.

See also

Last update: May 14, 2024 by shaloo