How to easily create an invite-only signup form (ep.1)

Pan Chasinga — Tue, 24 Nov 2020 19:00:00 +0000

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 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 and sign up 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.

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:

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.

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 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:

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. 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 and play with the request Postman-style and see for yourself what you can build with it!

DEV Community: Referkit

How to easily create an invite-only signup form (ep.1)

Setting up

Create a Campaign

Create a User

Create a `Campaign`

Create a `User`