Configure Aptos Keyless

Kana Widget Configuration for Aptos Keyless

To enable Aptos keyless functionality in the Kana Widget, follow the steps below:

1. Registering your dApp with Google

   Step 1: Sign in to Google Developer Console

   1. Navigate to the Google Cloud Console.

      1. Sign in with your Google account credentials.

   Step 2: Create a New Project

   1. If you don’t have an existing project, click on the “Select a project” dropdown menu at the top of the page and choose “New Project.”

   2. Enter a name for your project and click “Create.” Detailed instructions can be found here.

   Step 3: Configure Consent Screen

   1. In the left sidebar, navigate to “APIs & Services” > “OAuth consent screen.”

   2. Choose “External” user type and click “Create.”

   3. Enter the required details such as the application name, user support email, and developer contact information.

   4. Optionally, add additional details like the application logo and privacy policy URL.

   5. Click “Save and continue.” Detailed steps are available here.

   Step 4: Register Your Application

   1. In the left sidebar, navigate to “APIs & Services” > “Credentials.”

   2. 2.Click on “Create Credentials” and select “OAuth client ID.”

   3. Choose the application type (e.g., Web application, Desktop app, or Mobile app).

   4. Enter the necessary details such as the name of your application and the authorized redirect URIs. For OIDC, the redirect URIs should follow the format https://your-app-domain.com.

   5. Click “Create.”

   Step 5: Obtain Client ID and Client Secret

   1. After creating the OAuth client ID, Google will provide you with a client ID and client secret. These credentials are essential for authenticating your application.

   2. Note down the client ID and client secret securely. Do not expose them publicly.

   Step 6: Configure OIDC Integration in Your Application

   1. Integrate OIDC authentication into your application using a suitable OIDC library or framework (e.g., Passport.js for Node.js, Spring Security for Java, or Auth0 for various platforms).

   2. Use the client ID and client secret obtained from Google to configure OIDC authentication in your application settings.

   3. Set up the appropriate callback URL (https://your-app-domain.com) for handling authentication responses from Google.

2. Example Implementaion

   Once you have obtained the Client ID and added the appropriate callback URL, you can use the Google CLIENT_ID in your WidgetConfig

note

import { KanaWidget, AptosDexsFilter, BridgeOption, Chain, WidgetConfig } from "@kanalabs/kana-widget-v2";

const widgetConfig: WidgetConfig= {
  // Required: The unique SDK key provided by the development team. This key is essential for the widget to function properly.
  // If you haven't received a key yet, please contact the development team to obtain one.
  sdkKey: "Your dApp/company SDK key",
  
  //Optional: The name of your dApp or company using this widget.
  integrator:"Your dApp/company name",
  
  // Optional: Configure custom blockchain network providers if you wish to use your own instead of default settings.
  Provider: {
    aptosProvider: `https://aptos-mainnet.nodereal.io/v1/${NODEREAL_KEY}/v1`,
    solanaProvider: `https://greatest-frequent-owl.solana-mainnet.quiknode.pro/${SOLANA_QUICKNODE_KEY}`,
    polygonProvider: `https://polygon-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    binanceProvider: `https://bsc-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    ethereumProvider: `https://eth-mainnet.nodereal.io/v1/${NODEREAL_KEY}`,
    arbitrumProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/arbitrum-nitro/`,
    avalancheProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/avalanche-c/ext/bc/C/rpc`,
    zkSyncProvider: `https://open-platform.nodereal.io/${NODEREAL_KEY}/zksync`,
    suiProvider: "https://sui-mainnet-rpc.nodereal.io", 
  },
  
  // paymaster api key to enable paymaster 
  paymasterApikey: "Your Paymaster API key",
  
  // google client_id to enable Aptos Keyless 
  googleClientId: "your Google client_id',
  
  integratorFee:{
    // Fee range is 0.01% to 5%
    // Input should be between 1 to 500
    Fee: 1, 
    Address:"Your Integrator Address"
  }
};

export const WidgetPage = () => {
  return <KanaWidget config={widgetConfig} />;
};