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.
Updated 3 months ago