The Secure Mode authorization of our Client SDK requires a userToken to be provided in order to make calls. You’ll have to fetch this token via the GraphQL API (server-side) before passing it client-side.

This is different from your API Key. You should not expose (nor attempt to use) your Private API Key client-side.

This token (aka. userToken ) will be linked to one particular Kana User - meaning actions taken and data returned from the available methods will be tied only to that user.

We’ll walk through an example flow of how to obtain and provide this successfully below.

​
Walkthrough

​
1. Gain details on the user

You will need to ensure you have details on the User who you want to make calls for. Namely, you will need to have an identifier which maps to the id in Kana.

The id for a User is defined by you upon creation in Kana.

If the user does not yet exist in Kana, then you should create them first:

Create Users

We will work on the assumption that you have pulled the following user and have all the following details to hand (as will be used throughout our examples):

Node.js / Javascript
const currentUser = {
  id: 123456,
  kanaId: "123456",
  name: "Zach Read",
  email: "zach@usekana.com",
};

​
2. Fetch the token on the server

We can then make a server-side call to generate the token . This can be done with the GraphQL API via the generateUserToken mutation.

Don’t know how to authenticate and make calls to the GraphQL API?

You should read our Quick Start guide to get familiar within a few minutes and ensure you’ve grabbed your API Key to authorize requests properly.

You’ll need to provide a userId argument which maps to the id for the User (as pulled earlier):

curl \
-X POST \
-H "Content-Type: application/json" \
-H "Authorization: {API_KEY}" \
-d '{ "query": "mutation { generateUserToken(userId: \"123456\") }" }' \
https://api.usekana.com/graphql

​
3. Pass the token to the client

Now that you have the token, you’re going to want to pass it down to the client so we can initialize the Client SDK.

It’s up to you on how and when you want to achieve this, but we’ve provided some examples below which show the token being generated and sent downstream upon a dedicated /kana/token endpoint being hit.

On the client-side, we have the following function available which attempts to make a POST request to the /kana/token endpoint we setup earlier:

Javascript
async function grabKanaToken(user) {
  const userId = user.kanaId;
  try {
    const kanaToken = await fetch("/kana/token", {
      method: "POST",
      mode: "cors",
      body: JSON.stringify({ userId: userId }),
      headers: {
        "Content-Type": "application/json",
      },
    });
    return kanaToken;
  } catch (e) {
    console.log(e);
  }
}

If successful, the function will return the value of the token. We can assign this to a constant (so we can use this value later) like so:

const userToken = await grabKanaToken(currentUser);

Notice that the function is passed currentUser as an argument. This is the one we have hard-coded but you would have pulled/stored from before - and we assume you do this client-side. If you instead do this server-side, then you can:

  • Remove this as an argument of the function

  • Remove the body of the Fetch API request

  • Ensure the route function is updated to not require this (as per Step 2)

​
4. Initialize the Kana JS Client

The userToken is now available client-side. Let’s pass it in as an argument to initialize the client.

JavaScript
const kanaUserClient = new KanaUserClient({
  userToken,
});

Congratulations - you’ve successfully setup the Client SDK to make calls 🎉

Explore the Client SDK (Frontend) Reference for more on what you can do.