How to easily create an invite-only signup form (ep.1)
Tags: javascript, webdev
Published: 2020-11-24 19:00:00

In this tutorial, I'm going to walk you through creating an invite-only signup list ala Superhumans, Robinhood, and many more apps. 
Creating an invite-only signup may sound like the opposite of collecting as many users' onboard as possible, but it actually can create a FOMO (Fear-of-Missing-Out) among the users, knowing they can only join if they get an invitation from the "club".

While it is possible to implement your own referral logic,it is often unproductive since this isn't a core part of your app. [Referkit](https://referk.it) has a free and lightweight developer-friendly API to help manage these relationships and save us a few database tables and days of setup headache. So let's head over to [Referkit](https://referk.it) and [sign up](https://refk.it/signup) to get you set up!

## Setting up

> 🧶 We will be using vanilla JavaScript in this tutorial, although you can use cuRL, Postman, or any language of your choice.

Once you're done, you will have received a unique client ID and secret. The first thing to do is to use the credentials to get the access token which we will use in other API calls.


```javascript
let res = await fetch('https://api.refk.it/v1/access-token', {
    method: 'POST',
    body: JSON.stringify({
        'client_id': <YOUR_CLIENT_ID>,
        'client_secret': <YOUR_CLIENT_SECRET>
    })
});

let token = await response.json();
```

> 🧶 Note that Referkit JSON field name standard uses `snake_case` instead of `camelCase`.


When you receive the access token, you can save it to use with other API calls. The first endpoint we should call is a `/me` endpoint, which give us some information about our own self, the account owner:

```javascript
let res = await fetch('https://api.refk.it/v1/me', {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${YOUR_ACCESS_TOKEN}`
    }
});

let myInfo = await response.json()#launch;
```

`myInfo` should contain your credentials like `email`, `client_id`, and more. The one we have to save for later use is `key`, which is your unique user ID.

Let's start with building a simple campaign.

## Create a `Campaign`

A `Campaign` is like a project holding all the user signup emails and how they invite one another through referral codes. Let's imagine we are creating a signup page for a super cool shaving kit called Wooly.

Let's give our campaign a `name` and `landing_url`. The `landing_url` can be anything at this point, like your localhost address. But in production this URL is used to redirect invite links to and track visits. You'll also need to pass `owner_key` so the campaign is tied to you.

```javascript
let res = await fetch('https://api.refk.it/v1/campaigns', {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${YOUR_ACCESS_TOKEN}`
    },
    body: JSON.stringify({
        name: 'Wooly',
        landing_url: 'https://wooly.com',
        owner_key: <YOUR_KEY_ID>
    })
});

let campaign = await response.json();
```

Again, the `key` attribute of the `Campaign` should be noted. Now we're ready to create our campaign's first user.

## Create a `User`

Usually, we create a `User` on a form submission, such as a subscription form, signup form, or even a payment form. Think of [Referkit](https://referk.it) as a special helper that create an gives your users a unique invite code and link they can use to share and invite others while letting you, the campaign owner, track their invitation scores. You can choose to give them an incentive to make them invite an more users and you can prohibit users who come to signup on your page without an invitation code or simply display a different message and save them in a different, uninvited list for later phase of product offering.

When you are ready to create a user, here is how to do it:

```javascript
let res = await fetch('https://api.refk.it/v1/users?referral-code=<USER_INVITE_CODE>', {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${YOUR_ACCESS_TOKEN}`
    },
    body: JSON.stringify({
        campaign: <YOUR_CAMPAIGN_KEY>,
        email: <USER_SUBMITTED_EMAIL>
    })
});

let user = await response.json();
```

Note that the query parameter `referral_code` is optional, and if left out or Referkit checks the code as invalid, the user will still be created like an uninvited user. Otherwise, the user owning the `referral_code` will get +1 score for a successful creation of this user.

This is pretty much the basic of creating an invite-only list with [Referkit API](https://referk.it). Next episode, I'll dive deeper into integrating this into a nifty NextJS frontend with a real-world example project.

Meanwhile, if you have already signed up, head over to the [API Sandbox](https://api.refk.it/v1/sandbox) and play with the request Postman-style and see for yourself what you can build with it!