Integrate Xano with Outseta | Outseta Knowledge Base

Xano is a no-code database that can power the backend of your product. While many no-code builders use products like Airtable to power their projects, Xano's integration with Outseta allows users to authenticate with Outseta.

With this setup:

Outseta—Handles authentication and gives you the tools to manage your business (billing, CRM, email, help desk).

Xano—Provides the business logic and database that powers your product.

To get started with Xano and Outseta, watch the demo video below.

⚠️ The video does not show the code in the demo that does an exchange of the Outseta access token for a Xano access token, see the "On your Site" section below for an explaination.

Setup in Xano

Within Xano, go to Marketplace > User Authentication > Outseta, install the Outseta Marketplace Extension, and configure it with your account's Outseta URL and JWT Key.

Find your account's Outseta URL under Settings > General > Company Information > Outseta URL, and it looks like https://yoursubdomain.outseta.com.
Find your account's JWT Key under Auth > Sign up and Login > Login settings > Show Advanced Options. Copy/paste the whole thing, including -----BEGIN CERTIFICATE----- and -----END CERTIFICATE-----.

On your site

The key to integrating Outseta with Xano is to exchange your authenticated user's JWT Access Token signed by Outseta for a JWT Token signed by Xano and then use the latter in subsequent requests to Xano.

Xano will behave as if the user has signed in with Xano auth from this point, and you may protect any endpoint with user authentication.

Whenever the exchange happens through the /outseta/auth endpoint provided by the Outseta extension, the decode_outseta function will upsert a user in the user table, syncing select data from the corresponding Outseta Account.

Below is a sample Javascript code that:

Initiates a Xano client,
uses the client to facilitate the exchange
and sets the Xano token for the client to use with subsequent requests.

<!-- Include Xano -->
<script src="https://cdn.jsdelivr.net/npm/@xano/js-sdk@latest/dist/xano.min.js"></script>

<script>
  var xanoClient = new XanoClient({
    apiGroupBaseUrl: "YOU_XANO_API_GROUP_BASE_URL",
  });

  const exchangeToken = async (outsetaAccessToken) => {
    try {
      // Exhange the ouseta access token for a xano auth token
      const response = await xanoClient.post("/outseta/auth", {
        token: outsetaAccessToken
      });
      // Return Xano Auth Token
      return response?.body?.authToken;
    } catch (error) {
      console.warn("Error exchanging Outseta Access Token for Xano Auth Token", error);
      return null;
    }
  }

  Outseta.on("accessToken.set", async () => {
    const outsetaAccessToken = Outseta.getAccessToken();
    if (outsetaAccessToken) {
      const xanoAuthToken = await exchangeToken(outsetaAccessToken);
      // Set the xano auth token on the xano client
      xanoClient.setAuthToken(xanoAuthToken);
    } else {
      // Remove the xano token from the xano client
      xanoClient.setAuthToken(null);
    }
    // Optional, but nice way to let business logic code live elsewhere
    // and be triggered by lisning to this event
    window.dispatchEvent(new CustomEvent("xano.authToken.set"));
  });
</script>

The code can also be found in the Code Sandbox below between  and .

Syncing Data

The extension will sync information about the user when they log in. If you'd like to keep more data in sync between Xano and Outseta, you may use the Outseta notification feature and set up an endpoint in Xano to use as a webhook.

Work in Progress

We are working with Xano to provide ready-made templates for syncing data and a more robust person/account model in Xano.

Vanilla JS Demo

The very simplistic demo is of a todo app for your family (aka Account) and completed by any member of the family (aka Person).