Getting Started
Using @othent/kms
Last updated
Using @othent/kms
Last updated
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.
To use the library in your project, you first need to install it using npm
/ pnpm
/ yarn
:
Make sure peer dependencies (arweave
, axios
and warp-arbundles
) are also installed.
Next, simply instantiate Othent
with :
Here's an example inside a React component:
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.
https://arweave.ar
https://arweave.net / https://arweave.dev
https://ar-io.net / https://ar-io.dev
https://g8way.io
https://ar.io
ar://
URI)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
:
Make sure you add a check to only instantiate Othent
on the client:
Next, update your platform-specific configuration files to work with Auth0:
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.
arweave-js
)To use Othent library like this:
Import it into your project.
Instantiate it passing in the inject = true
option. This will set window.arweaveWallet
to this Othent
instance.
Once the transaction is signed, you can safely post it to the network.
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.
Othent
instance)To use Othent library like this:
Import it into your project.
Instantiate it (no need for inject = true
in this case).
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:
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.
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.