How to build a public Setmore Appointments integration: Building the Auth Flow

Aug 16, 2024 • 6 minute read

Hey there, fellow JavaScript enthusiast! Ready to dive into the world of Setmore Appointments integration? Today, we're focusing on the crucial part of any API integration: the authorization flow. Let's get your app talking to Setmore securely and efficiently.

Introduction

Setmore's API is a powerful tool for managing appointments, but before we can start booking and managing schedules, we need to set up a secure connection. That's where our auth flow comes in. It's the gatekeeper that ensures only authorized apps can access user data. Let's build it!

Prerequisites

Before we jump in, make sure you've got:

A Setmore Developer account (if you don't have one, go grab it!)
Node.js and Express.js set up on your machine
A basic understanding of OAuth 2.0 (don't worry, we'll cover the specifics)

Setting up the project

First things first, let's get our project ready:

mkdir setmore-integration
cd setmore-integration
npm init -y
npm install express axios dotenv

Create an app.js file and let's get coding!

Registering your application with Setmore

Head over to the Setmore Developer Portal and register your app. You'll get a client ID and client secret - treat these like your firstborn, they're precious!

Set up your redirect URI (e.g., http://localhost:3000/callback) in the Setmore Developer Portal. This is where Setmore will send the auth code.

Implementing the authorization flow

Now for the fun part! Let's build our auth flow:

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const app = express();

const CLIENT_ID = process.env.CLIENT_ID;
const CLIENT_SECRET = process.env.CLIENT_SECRET;
const REDIRECT_URI = 'http://localhost:3000/callback';

app.get('/auth', (req, res) => {
  const authUrl = `https://developer.setmore.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  res.redirect(authUrl);
});

app.get('/callback', async (req, res) => {
  const { code } = req.query;
  try {
    const response = await axios.post('https://developer.setmore.com/oauth/token', {
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      code,
      grant_type: 'authorization_code',
      redirect_uri: REDIRECT_URI
    });
    const { access_token, refresh_token } = response.data;
    // Store these tokens securely!
    res.send('Authorization successful!');
  } catch (error) {
    console.error('Error exchanging code for tokens:', error);
    res.status(500).send('Authorization failed');
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

Storing and managing tokens

Now that we've got our tokens, we need to store them securely. In a real-world scenario, you'd want to encrypt these before storing them in a database. For token refresh, you can set up a similar flow using the refresh token when the access token expires.

Making authenticated requests

With your access token in hand, you're ready to make API calls:

async function getAppointments() {
  try {
    const response = await axios.get('https://developer.setmore.com/api/v1/bookingapi/appointments', {
      headers: { 'Authorization': `Bearer ${access_token}` }
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching appointments:', error);
  }
}

Error handling and edge cases

Always be prepared for things to go wrong. Handle expired tokens by refreshing them, and make sure to catch and log any authorization errors.

Best practices and security considerations

Remember:

Always use HTTPS in production
Implement PKCE for added security
Never expose your client secret in client-side code

Conclusion

And there you have it! You've just built a secure auth flow for your Setmore integration. From here, you can start adding more features and really make your integration shine.

Additional resources

Want to dive deeper? Check out:

Now go forth and integrate! Your users are waiting for that sweet, sweet appointment booking goodness. Happy coding!