Browser ("Web3")

Building a web app? Running as a client side SPA (single page webapp) or server side rendered? React Native / VueJS / VanillaJS / etc.: you can integrate with the Xumm ecosystem using our SDK.

PreviousSimple Sign Link/QR NextCORS (Browser)

Last updated 1 year ago

Was this helpful?

Browser ("Web3")

Building a web app? Running as a client side SPA (single page webapp) or server side rendered? React Native / VueJS / VanillaJS / etc.: you can integrate with the Xumm ecosystem using our SDK.

The Xumm SDK can run fully client side: either as part of your compiled web app or using plain HTML and Javascript using our ready to use version.

Using the Xumm SDK, you can easily add "Sign in with Xumm" capabilities to your web app. You don't even need a backend. You get the full "Web3" experience (sign in with a blockchain account) with our "Web2" compatible stack (see: Identity (OAuth2, OpenID) / Native Apps).

Make sure to add the return URL (also known as redirect URL) in the Xumm on the application home page in the "Origin/Redirect URIs (one per line)" field.

Capabilities

Using the Xumm SDK in your web project, you get:

Sign in with a QR code for when loaded on a desktop
Deeplink (redirect to Xumm, back to your web app) on mobile
Basic user information: XRP Ledger account address, icon (hashicon or even avatar), connected chain (mainnet, testnet, ..) & some basic information about the end user's environment (currency, language, ...)
An access token (JSON Web Token "JWT") valid for 24h, to actively send (push) Sign Requests (transactions for the end user to sign)

Sample code

Please note the xumm.authorize() and xumm.logout() methods:

<html lang="en">
  <body>
    <h1 id="accountaddress">...</h1>
    <button id="signinbutton" onclick="xumm.authorize()">Login</button>
    <button id="logoutbutton" onclick="xumm.logout()">Logout</button>
        
    <script src="https://xumm.app/assets/cdn/xumm.min.js"></script>
    <script>
      var xumm = new Xumm('your-api-key')
      
      xumm.on("ready", () => console.log("Ready (e.g. hide loading state of page)"))
      
      // We rely on promises in the `success` event: fired again if a user
      // logs out and logs back in again (resets all promises)
      xumm.on("success", async () => {
        xumm.user.account.then(account => {
          document.getElementById('accountaddress').innerText = account
        })
      })

      xumm.on("logout", async () => {
        document.getElementById('accountaddress').innerText = '...'
      })
    </script>
  </body>
</html>

Capabilities

Using the Xumm SDK in your web project, you get:

Sign in with a QR code for when loaded on a desktop
Deeplink (redirect to Xumm, back to your web app) on mobile
Basic user information: XRP Ledger account address, icon (hashicon or even avatar), connected chain (mainnet, testnet, ..) & some basic information about the end user's environment (currency, language, ...)
An access token (JSON Web Token "JWT") valid for 24h, to actively send (push) Sign Requests (transactions for the end user to sign)

Sample code

Please note the xumm.authorize() and xumm.logout() methods:

<html lang="en">
  <body>
    <h1 id="accountaddress">...</h1>
    <button id="signinbutton" onclick="xumm.authorize()">Login</button>
    <button id="logoutbutton" onclick="xumm.logout()">Logout</button>
        
    <script src="https://xumm.app/assets/cdn/xumm.min.js"></script>
    <script>
      var xumm = new Xumm('your-api-key')
      
      xumm.on("ready", () => console.log("Ready (e.g. hide loading state of page)"))
      
      // We rely on promises in the `success` event: fired again if a user
      // logs out and logs back in again (resets all promises)
      xumm.on("success", async () => {
        xumm.user.account.then(account => {
          document.getElementById('accountaddress').innerText = account
        })
      })

      xumm.on("logout", async () => {
        document.getElementById('accountaddress').innerText = '...'
      })
    </script>
  </body>
</html>

Browser ("Web3")

Browser ("Web3")

Capabilities

Sample code

More links

Capabilities

Sample code

More links