transposit

Transposit JavaScript SDK

SDK for web apps using Transposit as a backend.

• Call endpoints: Call your backend through an idiomatic library.
• Require sign-in: Ask users to sign in before interacting with your web app.
• Manage authentication: Allow users to grant access to their third-party data.

To learn more about Transposit as a backend, see the Transposit documentation.

Installation

Install with npm or embed the library in a <script> tag.

$ npm install transposit

<script src="https://unpkg.com/transposit@1.0.0/dist/bundle.prod.js"></script>

Instantiate the SDK with the hosted app origin that uniquely identifies your application:

import { Transposit } from "transposit";

const transposit = new Transposit("https://hello-world-xyz12.transposit.io");

<script>
  const transposit = new Transposit.Transposit("https://hello-world-xyz12.transposit.io");
</script>

Call endpoints

Call your backend through an idiomatic library.

transposit
  .runOperation("myOperation")
  .then(response => {
    if (response.status !== "SUCCESS") {
      throw response;
    }
    const results = response.result.results;
  })
  .catch(response => {
    console.log(response);
  });

Sign-in

If your web app requires sign-in, implement these routes.

• /signin: Displays a sign-in button
• /handle-signin: Handles redirection after successful sign-in

/signin

Create a page that displays a sign-in button. Use the SDK to begin sign-in when the button is clicked.

<button type="button" onclick="signin()">Sign in</button>
<script>
  function signin() {
    window.location.href = transposit.startLoginUri(
        // Specify where to redirect after sign-in is successful
        `${window.location.origin}/handle-signin`
    );
  }
</script>

Specify <your-site>/handle-signin as a Successful sign-in URI when you enable user sign-in in Transposit.

/handle-signin

Create a page that handles redirection at the end of sign-in. Use the SDK to complete sign-in when the page loads. You do not need to render anything on this page if you redirect once sign-in is complete.

<script>
  try {
    transposit.handleLogin(() => {
      // Specify where to redirect after sign-in completes
      window.location.href = "/";
    });
  } catch (err) {
    console.log(err);
    window.location.href = "/signin";
  }
</script>

Signed-in routes

For all routes that require sign-in, check if the user is signed-in. Redirect to your sign-in page if they are not.

<script>
  if (!transposit.isLoggedIn()) {
    window.location.href = "/signin";
  }
</script>

Sign-out

Render a sign-out button. Use the SDK to sign out when the buttons is clicked.

<button type="button" onclick="signout()">Sign out</button>
<script>
  function signout() {
    transposit.logOut(`${window.location.origin}/signin`);
  }
</script>

Managed authentication

Allow users to grant access to their third-party data. Use the SDK to link users to the Transposit settings page.

<button type="button" onclick="settings()">Settings</button>
<script>
  function settings() {
    window.location.href = transposit.settingsUri();
  }
</script>

FAQs

I'm an SDK power user. Can you tell me more?

Absolutely! See the Transposit reference documentation.

I have a question about the SDK. Where should I ask?

File an issue against this repository.

I have a question about Transposit. Where can I learn more?

Check out the Transposit documentation. Email [e-mail].

License

The Transposit JavaScript SDK is licensed under the Apache License, Version 2.0.