Quickstart with a Backend Server

1. Set up your Xkit Platform

Sign up for a free Xkit developer account.
Set the Website origin and Login redirect URL for your application (see the Configure Xkit documentation for more information)

2. Generate an API Key

Follow the API Key guide for instructions on how to generate a publishable and secret API key.

3. Connect apps

Follow the Connecting with Apps guide for more specific instructions.

4. Provision users for Xkit access

During your authentication process, or anywhere in the request/response lifecycle that you have access to an authenticated user, provision them for access to Xkit with one API call: Provision Platform User.

Here's an example:

// `app` is a configured Express App with authentication middleware
// that provides the `req.user` parameter for authenticated users.
import axios from 'axios'
const PUBLISHABLE_KEY = process.env.XKIT_PUBLISHABLE_KEY
const SECRET_KEY = process.env.XKIT_SECRET_KEY

app.use(async (req, res) => {
  if (!req.user) return
  const { data } = await axios({
    baseUrl: 'https://app.xkit.co/api/platform',
    method: 'post',
    url: '/users',
    auth: {
      username: PUBLISHABLE_KEY,
      password: SECRET_KEY
    },
    data: {
      user: { external_id: req.user.id }
    }
  })
 
  res.locals.xkitToken = data.access_token
})

curl --user publishable_key:secret_key \
     -X POST \
     -H "Content-Type: application/json" \
     -d '{"user": {"external_id": ": "your_user_id"}}' \
     https://app.xkit.co/api/platform/users

Check out the Provision Users via API guide for a more in-depth example.

5. Install xkit.js on your front-end

Add the script tag below anywhere in your rendered HTML to load a customized version of xkit.js onto the page:

<script src="https://<your-slug>.xkit.co/xkit.js"></script>

6. Log your users into Xkit

When you provision a user, Xkit will return an access_token that you can use to log them into Xkit on the front-end of your application using xkit.js.

Below is an extension of the ExpressJS example that should be applicable to most web application frameworks.

app.get('/home', (req, res) => {
    res.render('home', { xkitToken: res.locals.xkitToken })
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My App</title>
  </head>
  <body>
    <script src="https://<your-slug>.xkit.co/xkit.js"></script>     
    <script>xkit.ready(() => xkit.login("{{ xkitToken }}"))</script>
  </body>
</html>

See the Provision Users via API guide for more detail on this example.

7. Retrieve an access token, or redirect to your catalog

You can use the Get User Connection endpoint to retrieve access tokens for connected apps, or redirect users to your hosted integration catalog if they're not yet set up.

An example, again in ExpressJS is below:

app.post("/share-to-slack", async (req, res) => {
  const {
    connection,
    connector,
    authorization
  } = await axios({
    baseUrl: 'https://app.xkit.co/api/platform',
    url: `/connections/${req.user.id}/slack`,
    auth: {
      username: PUBLISHABLE_KEY,
      password: SECRET_KEY
    }
  })
  
    if (!connection.enabled || authorization.status !== 'active') {
    res.redirect('https://<your-slug>.xkit.co/connectors/slack')
    return
  }
  
  const slackToken = authorization.access_token
  
  // ... post to Slack with the Slack API
})

See the Retrieving Access Tokens guide for more information.

Xkit

The xkit Developer Hub

Quickstart - with a Backend Server