Authenticating Users

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

Utilization of Keygen's user identity management is completely optional—if you'd rather skip user-accounts and simply validate license keys and handle the rest server-side, feel free to do that. Our user resources are designed to help make client-side API integration easier, allowing your users to manage their own resources, while you respond to their actions via webhooks.

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.

Once you've created a user, you will likely want to authenticate them so that future requests such as license creation and license validation can be done without using your secret product or admin tokens, but rather using an authentication token that belongs to them.

Authenticating your users also allows you to integrate Keygen 100% client-side, as opposed to doing a server-side integration using a product token. This can be especially useful if you'd also like to allow your users the ability to manage their own resources, e.g. a "self-serve" licensing system.

Your admin, environment, and product tokens carry many privileges and should always be kept secret. Do not share your secret API tokens in publicly accessible areas such GitHub, embed them in client-facing code e.g. inside of your product, and so forth. Learn more.

To get started, we're going to create a simple HTML form that our user's can fill out and we can use to authenticate them via token generation. You can include token generation directly inside of your product, so that you can request their licenses and validate them, and so users can manage their licenses and machines from your product.

<form id="login">
  <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">
    Login
  </button>
</form>
<form id="login">
  <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">
    Login
  </button>
</form>

Next up, we'll add an event listener to the form that includes our token generation request. The response body of the request will either be an error (e.g. email or password were incorrect), or the newly created token resource, which you can store locally for future requests.

const login = document.getElementById("login")
 
login.addEventListener("submit", async (event) => {
  // Prevent form submission (and browser refresh)
  event.preventDefault()
 
  // Get our user's email and password fields
  const email = document.getElementById("email").value
  const password = document.getElementById("password").value
 
  // Base64 encode the email/password for Authorization header
  const credentials = btoa(`${email}:${password}`)
 
  // Create the token
  const response = await fetch("https://api.keygen.sh/v1/accounts/<account>/tokens", {
    method: "POST",
    headers: {
      "Content-Type": "application/vnd.api+json",
      "Accept": "application/vnd.api+json",
      "Authorization": `Basic ${credentials}`
    }
  })
 
  const { data: token, errors } = await response.json()
  if (errors) {
    // … handle errors
  }
 
  console.log(`Our user's new token is: ${token.attributes.token}`)
 
  // … handle successful form submission
})
const login = document.getElementById("login")

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

  // Get our user's email and password fields
  const email = document.getElementById("email").value
  const password = document.getElementById("password").value

  // Base64 encode the email/password for Authorization header
  const credentials = btoa(`${email}:${password}`)

  // Create the token
  const response = await fetch("https://api.keygen.sh/v1/accounts/<account>/tokens", {
    method: "POST",
    headers: {
      "Content-Type": "application/vnd.api+json",
      "Accept": "application/vnd.api+json",
      "Authorization": `Basic ${credentials}`
    }
  })

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

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

  // … handle successful form submission
})

Next steps

Congrats! Now that you've generated a token for one of your users using Keygen, you can use that token to create a license for your user. If you have any questions about what you've learned today, be sure to reach out!