Developer Intro

Overview

The Eluvio Media Wallet gives users access to content and marketplaces.

All content and blockchain functions are ultimately accessed using a public/private key pair but the media wallet framework allows users to authenticate using several different methods:

  • a crypto wallet (Metamask or compatible)
  • the built-in eluvio custodial wallet which supports email-based login or SSO using Google or Apple IDs
  • a custom Open ID system operated by a tenant
  • any custom signer

Building an Application

There are three options for building an application using the Eluvio Media Wallet:

Build a site on live.eluv.io

Using our Eluvio Live platform, you can build your own custom website and marketplace with no code required. You can even use your own custom domain.

Please see the Eluvio Live section for more details.

Embed the Eluvio Media Wallet in your site with the Wallet Frame Client

With @eluvio/elv-wallet-frame-client, you can include the entire wallet experience on your own website. The Eluvio Media Wallet is loaded into an embedded iframe, and the client allows you to control the experience, including navigating the application, retrieving user, marketplace, secondary listing and NFT information, and performing actions like purchasing.

Build your own application with the Eluvio Wallet Client

The Eluvio Wallet Client in @eluvio/elv-client-js, the same client the Eluvio Media Wallet uses, allows you to take full control of the Eluvio Wallet experience and build your own application from the ground up.

Additionally, the Eluvio Wallet Client contains a full instance of @eluvio/elv-client-js that can be accessed via walletClient.client.

Authentication

The first step in building an application is deciding the authentication model.

Here are your options:

  1. Use the Eluvio Custodial Wallet
  2. Use your own open ID system
  3. Use your own ‘signer’ - basically using any wallet(s) that can create signed messages

Eluvio Media Wallet Login - Custodial & MetaMask

The standard Eluvio Media Wallet application login can be used to authenticate. It supports both our Eluvio Custodial Wallet, an open ID system, as well as MetaMask.

As an application developer you can use the standard wallet login as follows:

Using Eluvio Wallet Client

Using the Eluvio Wallet Client, you can use the LogIn method. This will redirect your application to the Eluvio Media Wallet, where the user will log in with the standard Media Wallet login flow (using either the custodial wallet or MetaMask), and redirect back with a signed token that your client will use to perform actions on behalf of the user.

Using the Eluvio Wallet Frame Client

If you’ve embedded the Eluvio Media Wallet into your site with the frame client, there are two options for dealing with login.

The simplest option is to just allow the Eluvio Media Wallet application handle login natively. If the frame is visible, the user can simply navigate through the login flow with the standard Media Wallet UI. The frame client also offers a LogIn method that you can use in your application, but please note that this often runs afoul of popup blockers, as login via the embedded media wallet uses a popup and browsers require a deliberate user action in the frame to generate a popup without being blocked. It is recommended to use the method below instead.

The other option is to use the full Eluvio Wallet Client login flow (see above), retrieve the token, then pass that token to the embedded wallet via the frame client. This is recommended if you are using both clients, as the frame client cannot access the auth token from the embedded application, so if the user logs in via the frame client, you cannot set up the full wallet client to use that authentication.

Using both clients can be useful if you want to implement your own login screen separate from the Media Wallet application, or if you need to access wallet functionality on pages where the wallet application is not embedded.

To see code examples of all three options, see this example and/or the live DApp Sample and its source code. The DApp Sample Wallet Examples section, below, has more details on the latter.

Custom Open ID System

If you already use an open ID system you can set up you tenancy to recognize your open ID issuer and create a tenant-specific custodial wallet function.

The basic application flow starts by logging on the user using your open ID system and retrieving a JWT ID token.

Option A: use the elv-media-wallet library as an embedded iframe

You can initialize the elv-media-wallet library using your custome JWT ID token and use it to access all content and marketplace functions (the same way as using the built-in Eluvio Custodial Wallet)

Option B: use the tenant-specific custodial wallet to create a client-signed token and access the content and marketplace functions directly over the API.

External Signer

If you use an external signer, you can create a client-signed token and access content and marketplace functions ditrectly.

Using the elv-media-wallet library with an external signer is not supported at this moment but will be supported in the near feature.

DApp Sample Wallet Examples

We provide a live API usage sample we call the DApp Sample with source code. Useful as a model for writing the code above, you can use this to:

  • Log into a a crypto wallet (Metamask or compatible) or the built-in eluvio custodial wallet
  • Sign a message with either type of login (one giving a Metamask “pop up”, the other a redirect to a signing page)
  • Invoke user information methods such as UserInfo() and UserItems()
  • Select a Marketplace and invoke marketplace information methods such as Listings() and Stock()

For more information, please see the README

REFERENCES

Eluvio Media Wallet app: