Othent
  • 👋Welcome to Othent
  • 🥪JS SDK
    • Getting Started
    • Events
    • Error Handling
    • Binary Data Types Utils
    • TypeScript Types
    • Config Constants
  • 🥪JS SDK API
    • constructor()
    • startTabSynching()
    • completeConnectionAfterRedirect()
    • connect()
    • disconnect()
    • requireAuth()
    • isAuthenticated
    • getActiveAddress()
    • getActivePublicKey()
    • getAllAddresses()
    • getWalletNames()
    • getUserDetails()
    • getSyncActiveAddress()
    • getSyncActivePublicKey()
    • getSyncAllAddresses()
    • getSyncWalletNames()
    • getSyncUserDetails()
    • sign() (transaction)
    • dispatch() (transaction)
    • encrypt()
    • decrypt()
    • signature()
    • signDataItem()
    • signMessage()
    • verifyMessage()
    • privateHash()
    • walletName
    • walletVersion
    • config
    • getArweaveConfig()
    • getPermissions()
  • Demos
    • 🍏SDK playground / demo
    • 🍏SDK playground / demo GitHub
    • 🍎File upload app example
    • 🍎File upload app example GitHub
  • 📚External libraries
    • arweave-js
    • Arweave Wallet Kit
  • Additional Links
    • 🌐Othent.io
    • 🌐Discord
    • 🌐GitHub
    • 🌐X
Powered by GitBook
On this page
  • Installation & Setup
  • Whitelisting your domain
  • React
  • Next.js
  • React Native
  • Indirect Usage (through arweave-js)
  • Indirect Usage (through Arweave Wallet Kit)
  • Direct Usage (through Othent instance)
  1. JS SDK

Getting Started

Using @othent/kms

PreviousWelcome to OthentNextEvents

Last updated 4 days ago

Note: Othent will be deprecated by the end of 2025. For an alternative, please check out Wander Connect:

The Othent JS SDK exports a TypeScript class Othent that exposes a collection of functions that enable interaction with wallet under Othent's custody. These functions are designed to make it seamless for developers to integrate Othent into their applications, and closely follow to provide a familiar interface.

Installation & Setup

To use the library in your project, you first need to install it using npm / pnpm / yarn:

npm i @othent/kms
pnpm i @othent/kms
yarn add @othent/kms

Make sure peer dependencies (arweave, axios and warp-arbundles) are also installed.

TypeScript types are included in the @othent/kms package. You can find an exhaustive list in .

Next, simply instantiate Othent with :

import { Othent, AppInfo } from "@othent/kms";

const appInfo: AppInfo = {
  name: "My Awesome App",
  version: "1.0.0",
  env: "production",
};

const othent = new Othent({ appInfo, ... });

Here's an example inside a React component:

import { Othent } from "@othent/kms";

const MyComponent = () => {
  const othent = useMemo(() => {
    return new Othent(options);
  }, [options]);

  useEffect(() => {
      const cleanupFn = othent.startTabSynching();

      return () => {
        cleanupFn();
      };
  }, [othent])
}

Whitelisting your domain

Development

You must use http://localhost:3000, http://localhost:5173 or http://localhost:8081.

Deploying to a preview environment on Vercel will also work, all https://*.vercel.app domains are whitelisted.

Production (web2 domain)

Production (gateway + ArNS subdomain)

  • https://arweave.ar

  • https://arweave.net / https://arweave.dev

  • https://ar-io.net / https://ar-io.dev

  • https://g8way.io

  • https://ar.io

Production (ar:// URI)

React

Next.js

On top of the information on the React section above, when using Next.js you don't need / cannot instantiate Othent on he server, as that will throw an error coming from @auth0+auth0-spa-js:

unhandledRejection: ReferenceError: document is not defined
  at getAll (.../node_modules/@auth0/auth0-spa-js/dist/lib/auth0-spa-js.cjs.js:1324:22)

Make sure you add a check to only instantiate Othent on the client:

import { Othent, AppInfo } from '@othent/kms';

const appInfo: AppInfo = {
  name: "My Awesome App",
  version: "1.0.0",
  env: "production",
};

export const othent = typeof window === "undefined" ? null : new Othent({ appInfo, ... });

React Native

Next, update your platform-specific configuration files to work with Auth0:

  • {PACKAGE_NAME}.auth0://{YOUR_DOMAIN}/android/{PACKAGE_NAME}/callback
    {BUNDLE_IDENTIFIER}.auth0://{YOUR_DOMAIN}/ios/{BUNDLE_IDENTIFIER}/callback

Then, you need to set (at least) the following options when instantiating Othent:

  • auth0LogInMethod = "redirect"

  • auth0RedirectURI (callback URL): Based on the values defined above.

  • auth0ReturnToURI (log out URL): Based on the values defined above.

Indirect Usage (through arweave-js)

To use Othent library like this:

  1. Import it into your project.

  2. Instantiate it passing in the inject = true option. This will set window.arweaveWallet to this Othent instance.

import { Othent, AppInfo } from "@othent/kms";

const appInfo: AppInfo = {
  name: "My Awesome App",
  version: "1.0.0",
  env: "production",
};

new Othent({ appInfo, inject: true, ... });

// Create an Arweave transaction:
const tx = await arweave.createTransaction({ /* Transaction options */ });

// Sign the transaction:
await arweave.transactions.sign(tx);

// Do something else with the transaction (e.g. post it to the network).

Once the transaction is signed, you can safely post it to the network.

Indirect Usage (through Arweave Wallet Kit)

Note, however, that there might be some limitations, like some methods like signDataItem, signMessage or verifyMessage not being (currently) available.

TODO: We are still working on this. We'll update the documentation soon.

Direct Usage (through Othent instance)

To use Othent library like this:

  1. Import it into your project.

  2. Instantiate it (no need for inject = true in this case).

  3. Now you can access Othent's properties & methods directly from the Othent instance. Each property & method is described in detail in the following pages.

See here for a basic example:

import { Othent, AppInfo } from "@othent/kms";

const appInfo: AppInfo = {
  name: "My Awesome App",
  version: "1.0.0",
  env: "production",
};

const othent = new Othent({ appInfo, throwErrors: false, ... });

othent.addEventLister("error", (err) => {
  console.error(err);
});

await othent.connect();

const mySecret = await othent.encrypt("My secret");

const transaction = await arweave.createTransaction({
  data: mySecret,
});

const result = await othent.dispatch(transaction);
const transactionURL = `https://viewblock.io/arweave/tx/${result.id}`;

console.log(transactionURL);

Additionally, if you set the option to persist and/or sync user details across tabs, you need to call and make sure the cleanup function it returns is called once you no longer need the Othent instance you've created.

Note: Othent will be deprecated by the end of 2025. For an alternative, please check out Wander Connect:

To use Othent in production on your own web2 domain, you'll have to reach out to the to get your domain whitelisted.

To use Othent in production through a gateway with your , you must use one of these whitelisted gateways:

Whitelisting a ar:// URI is technically possible too, but due to the way works, Othent won't work properly.

While you can use your ar:// URI as and , that won't currently work as expected because request made from your dApp will never originate from your ar:// domain, but from the gateway's domain randomly picked.

Moreover, your dApp won't work for users using if they are routed through a different non-whitelisted gateway.

Track the progress on this .

If you are using Othent with React, you might want to consider using to use a single Othent instance for your whole app, or decoupling it even more by using a state management library like , or .

Alternatively, you might prefer to use . See below.

Othent directly uses the to create hashes, verify signatures and, indirectly, through . If your environment doesn't has this API natively, you'll have to polyfill it.

See to update your build.gradle and AppDelegate.mm files. Othent's Auth0 domain is auth.othent.io.

See to define your callback and logout URLs. They should look something like this, for Android and iOS, respectively:

auth0Cache: You have to pass a custom implementation. This object will be responsible of persisting the refresh tokens, so, on iOS, we recommend implementing it using .

Lastly, make sure when Auth0 redirects the user back to your app (auth0RedirectURI), you call , passing the URI with the code and state params provided by Auth0, which handles the redirect callback.

See .

Similarly to using ArConnect or other browser-based wallets, to use Othent in your application, you don't need to integrate or learn how the Othent JS SDK API works. Using , you can easily sign transactions through Othent.

Now you can use , which will use Othent in the background.

When signing a transaction through , you'll need to omit the second argument of the sign() function, or set it to "use_wallet". This will let the package know you want to use the injected wallet, which has been exposed at window.arweaveWallet, to sign the transaction in the background.

provides a set of React Hooks and Components for better interaction with Arweave wallets.

Alternatively, you can also use Othent's JS SDK directly, which provides some extra functionalities. These features are not integrated in the package, but can be useful to further customize your app.

🥪
https://wander.app/connect
ArConnect's API
TypeScript Types
any options you need
https://wander.app/connect
Othent team on Discord
ArNS subdomain
AR.IO Wayfinder
AR.IO Wayfinder
GitHub issue
React's Context
MobX
TanStack Query
Redux
Web/Node.js Crypto API
arweave-js
"Integrate Auth0 in Your Application"
"Configure Callback and Logout URLs"
ICache
Keychain Services
completeConnectionAfterRedirect
Auth0's handleRedirectCallback
arweave-js
arweave-js
arweave-js
Arweave Wallet Kit
arweave-js
ArweaveKit
Indirect Usage (through ArweaveKit)
startTabSynching
AR.IO Wayfinder
persistLocalStorage
auth0RedirectURI
auth0ReturnToURI