Skip to main content

๐Ÿ“ก Onboarding Web SDK

KryptoGO Onboarding Web SDK (@kryptogo/auth) is a JavaScript library for handling user authentication and interacting with user wallets in web applications.

tip

This is a demo site using Onboarding Web SDK.

tip

Want a quicker and easier way to use KryptoGO authentication in your React app with less manual coding? Check out our Auth Button instead.

Initializing the SDKโ€‹

To use KryptoGO Onboarding Web SDK, include the SDK script in your HTML file using a <script> tag or install it with npm/pnpm/yarn.

  • Include the Onboarding Web SDK script in your HTML file:

    <script src="path-to-our-sdk.0.1.0.min.js"></script>

  • Or, install using your preferred packagae manager: npm, pnpm, or yarn

    npm install @kryptogo/auth
    # or
    pnpm add @kryptogo/auth
    # or
    yarn add @kryptogo/auth

Initialize the SDK with your client ID and other optional configuration parameters. The useIFrame parameter specifies whether to use an iframe to show the login window. Example code:

import { KryptoGOAuth } from "@kryptogo/auth";

KryptoGOAuth.init({
  clientId: "CLIENT_ID",
  useIFrame: true,
  onConnect: function () {
    console.log("Authenticated!");
  },
  onLogout: function () {
    console.log("User logged out!");
  },
  onError: function (error) {
    console.error("Authentication failed:", error);
  },
  onTokenRefresh: function (token) {
    if (token) {
      console.log("New access token: ", token);
    }
  },
});
 ```

- Replace `CLIENT_ID` with your actual client ID, which is provided by KryptoGO.
- The parameters of the `init` function are shown below:

  | Parameter      | Type                   | Definition                                                                                                                             |
  | -------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
  | clientId       | string                 | The client ID provided by KryptoGO.                                                                                                    |
  | useIFrame      | boolean                | Whether to use an iframe to show the login window. Default to true.                                                                    |
  | onConnect      | () โ‡’ void              | A callback function that is called when authentication is successful.                                                                  |
  | onLogout       | () โ‡’ void              | A callback function that is called when the user logs out.                                                                             |
  | onError        | () โ‡’ void              | A callback function that is called when an error occurs during authentication.                                                         |
  | onTokenRefresh | (token: string) โ‡’ void | A callback function that is called when a new access token is retrieved. Useful when you want to utilize the access token by yourself. |

## Implementing OAuth

To begin the OAuth flow, use the following function:

`KryptoGOAuth.asyncLogin(type?: LOGIN_TYPE, account?: string): Promise<void>`

Calling this function brings up the login window. Upon a successful login, the window automatically closes and the Promise is resolved.

If `type(method)` is not specified, users have the option to select their login method within the login window..

There are two ways to handle callbacks when the login process ends, whether it is successful or fails.

1. Use the `onConnect` and `onError` callback in the `init` function. These will be triggered once the login process is complete.
2.  **(Recommended)** Handle the login process using a promise or a try-catch block. Example code snippet:

  ```typescript
   import { KryptoGOAuth } from "@kryptogo/auth";

   // Using a Promise
   KryptoGOAuth.login("email", "foo@bar.com")
     .then(() => {
       console.log("Success");
     })
     .catch((err) => {
       console.error("Error", err);
     });

   // Using a try-catch block
   try {
     await KryptoGOAuth.login("email", "foo@bar.com");
     console.log("Success");
   } catch (err) {
     console.error("Error", err);
   }
   ```
## Interacting with User Wallet
After the user logs in, you can use the following methods to retrieve information about their wallet.

### Retrieving on-chain information

- **`KryptoGOAuth.getCurrentAccount(): Promise<string>`** initiates a handshake with the server to verify the userโ€™s access token's validity, and then returns the current wallet address of the user.

 <details>
     <summary>What address will the function return?</summary>

     Upon login, two scenarios may occur:

     1. The user is not already a KryptoGO user:
         - A new wallet will be automatically created.
         - The address of this new wallet will be set as the default wallet address and returned by this function.
     2. The user is an existing KryptoGO user (with potentially mutliple associated wallets),
         - The default wallet address will be returned.
         - The default wallet address can be set in the [KryptoGO Wallet app](/category/-kryptogo-wallet).
 </details>

- **`KryptoGOAuth.getNfts(options?: Options): Promise<Nft[]>`** returns paged NFT results.

```typescript
type Options = {
 pagesize: number; // default to 10
 pageNumber: number; // default to 1
};

type ChainId =
 | "eth"
 | "bsc"
 | "matic"
 | "arb"
 | "btc"
 | "kcc"
 | "sol"
 | "tron";
type NFTProtocol = "ERC721" | "ERC1155";
type NFT = {
 chain_id: ChainId;
 contract_address: string; // "0x60e4d786628fea6478f785a6d7e704777c86a7c6",
 token_id: string; // "24059"
 collection_slug: string; // "mutant-ape-yacht-club",
 contract_schema_name: NFTProtocol;
 floor_price_in_eth: number | null;
 image_url: string; // "https://lh3.googleusercontent.com/k7d4rPjPosBpl-PtKnqH8bcQqaEjZ7AlXHx27RKC6gSA9yduLsjOcBy5GNPC_kdNkc88sen6pm14X23eM0Pb8QNsaa4arswDO8kcQ6w",
 image_preview_url: string; // "https://lh3.googleusercontent.com/k7d4rPjPosBpl-PtKnqH8bcQqaEjZ7AlXHx27RKC6gSA9yduLsjOcBy5GNPC_kdNkc88sen6pm14X23eM0Pb8QNsaa4arswDO8kcQ6w=s250",
 amount: number;
};

  • KryptoGOAuth.getTokens(options?: Options): Promise<Token[]> returns paged token results.

    type Options = {
      pagesize: number; // default to 10
      pageNumber: number; // default to 1
    };

    type ChainId =
      | "eth"
      | "bsc"
      | "matic"
      | "arb"
      | "btc"
      | "kcc"
      | "sol"
      | "tron";
    type Token = {
      chain_id: ChainId;
      amount: number; // 1.356,
      amount_str: string; // "1.356",
      logo_urls: string[]; // ["https://static.debank.com/image/token/logo_url/eth/935ae4e4d1d12d59a99717a24f2540b5.png"],
      symbol: string; // "ETH",
      usd_value: number; // 1566.26136,
      decimals: number; // 9,
      prices_in_24h: number[][] | null;
      price: number;
    };

The following two methods will be published in the next release:

  • KryptoGOAuth.getRewards(options?: Options): Promise<Reward[]> returns paged reward results.
  • KryptoGOAuth.getTxs(options?: Options): Promise<Transaction[]> returns paged transaction results.

Other methodsโ€‹

  • KryptoGOAuth.isConnected(): Promise<boolean> returns whether the user is logged in.
  • KryptoGOAuth.getAccessToken(): Promise<string | undefined> returns the userโ€™s KryptoGO access token.
  • KryptoGOAuth.logout() logs out the current user session.