Creating Users

Use Keygen's API and your client-side code to create new users for your product. If you need help after reading this, can reach out to us anytime at [email protected].

This tutorial is written in JavaScript, but you can follow along in any other language that you're comfortable in. Throughout this tutorial, you will see placeholders such as <account> within the code examples that will need to be replaced with an ID for that particular resource type.

You can create new users either from a web page (client-side or server-side), or directly from within your app. If you're creating users client-side or from within your app, you will need to make sure that you do not use a product token or an admin token for authentication, as you would be revealing your secret tokens to the public. By default, user creation is able to be done without authentication—though this can be disabled by setting your account to protected.

To get started, we're going to create a simple HTML sign up form that our user's can fill out and we can use to create a new user profile for them via user creation. You can include this sign up form directly within your app, or from within a web page.

<form id="register">
  <label for="first-name">
    First Name
  </label>
  <br>
  <input type="text" name="first-name" id="first-name">
  <label for="last-name">
    Last Name
  </label>
  <br>
  <input type="text" name="last-name" id="last-name">
  <label for="email">
    Email
  </label>
  <br>
  <input type="email" name="email" id="email">
  <br>
  <label for="password">
    Password
  </label>
  <br>
  <input type="password" name="password" id="password">
  <br>
  <br>
  <button type="submit">
    Register
  </button>
</form>
<form id="register">
  <label for="first-name">
    First Name
  </label>
  <br>
  <input type="text" name="first-name" id="first-name">
  <label for="last-name">
    Last Name
  </label>
  <br>
  <input type="text" name="last-name" id="last-name">
  <label for="email">
    Email
  </label>
  <br>
  <input type="email" name="email" id="email">
  <br>
  <label for="password">
    Password
  </label>
  <br>
  <input type="password" name="password" id="password">
  <br>
  <br>
  <button type="submit">
    Register
  </button>
</form>
content_copy

Next up, we'll add an event listener to the form that will fire off a user creation request on form submit. Below you'll see that we're including the user's first and last name, an email address (which they'll use to authenticate with), as well as a password (which is also used for authentication).

The response of this request will either be an error (e.g. if a required attribute is missing, or the email has already been used), or a user resource containing your new user's information.

const register = document.getElementById("register")
 
register.addEventListener("submit", async (event) => {
  // Prevent form submission (and browser refresh)
  event.preventDefault()
 
  // Get our user's information from the form fields
  const firstName = document.getElementById("first-name").value
  const lastName = document.getElementById("last-name").value
  const email = document.getElementById("email").value
  const password = document.getElementById("password").value
 
  // Create the user
  const response = await fetch("https://api.keygen.sh/v1/accounts/<account>/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/vnd.api+json",
      "Accept": "application/vnd.api+json"
    },
    body: JSON.stringify({
      "data": {
        "type": "users",
        "attributes": {
          firstName,
          lastName,
          email,
          password
        }
      }
    })
  })
 
  const { data: user, errors } = await response.json()
  if (errors) {
    // … handle errors
  }
 
  console.log(`Our user's name is: ${user.attributes.fullName}`)
 
  // … handle successful form submission
})
const register = document.getElementById("register")

register.addEventListener("submit", async (event) => {
  // Prevent form submission (and browser refresh)
  event.preventDefault()

  // Get our user's information from the form fields
  const firstName = document.getElementById("first-name").value
  const lastName = document.getElementById("last-name").value
  const email = document.getElementById("email").value
  const password = document.getElementById("password").value

  // Create the user
  const response = await fetch("https://api.keygen.sh/v1/accounts/<account>/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/vnd.api+json",
      "Accept": "application/vnd.api+json"
    },
    body: JSON.stringify({
      "data": {
        "type": "users",
        "attributes": {
          firstName,
          lastName,
          email,
          password
        }
      }
    })
  })

  const { data: user, errors } = await response.json()
  if (errors) {
    // … handle errors
  }

  console.log(`Our user's name is: ${user.attributes.fullName}`)

  // … handle successful form submission
})
content_copy

Next steps

Congrats! You've created your first user using Keygen. Next up, we can create an authentication token for your user and then learn how to create a license for your user. If you have any questions about what you've learned today, be sure to reach out!