# Browser ("Web3")

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 [browserified](https://xumm.app/assets/cdn/xumm.min.js) 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)](/environments/identity-oauth2-openid.md) / [Native Apps](/environments/native-apps.md)).

{% hint style="success" %}
Make sure to add the **return URL** (also known as **redirect URL**) in the Xumm[ Developer Console](https://apps.xumm.dev/) on the application home page in the "**Origin/Redirect URIs (one per line)**" field.
{% endhint %}

## 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

{% hint style="info" %}
Please note the **`xumm.authorize()`** and **`xumm.logout()`** methods:
{% endhint %}

{% code lineNumbers="true" %}

```html
<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>
```

{% endcode %}

### More links

For the SDK documentation (objects, methods), see the SDK section: [SDK (syntax)](/js-ts-sdk/sdk-syntax.md). For a simple demo of the Xumm SDK in a React Native environment, check this sample repository: [https://github.com/XRPL-Labs/XummSDK-React-Demo](https://github.com/XRPL-Labs/XummSDK-React-Demo/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xaman.dev/environments/browser-web3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
