Important changes to Tiny Cloud pricing > Find out more

Tiny Drive JWT Authentication

Guide on how to setup JWT Authentication for Tiny Drive

Contribute to this page

Introduction

Tiny Drive requires you to setup JWT authentication. This is to ensure that the security of your files remains in your control.

JWT is a standard authorization solution for web services and is documented in more detail at the https://jwt.io/ website. The guide aims to show how to setup JWT authentication for Tiny Drive.

If you haven’t tried any of the Starter projects yet, we urge you to try them before trying to implement your solution. The source is also available on Github to study.

Private/public key pair

Tokens used by the TinyMCE cloud services make use of a public/private RSA key-pair. This allows you as an integrator to have full control over the authentication as we don’t store the private key. Only you have access to the private key, and only you can produce valid tokens. We can only verify that they are valid and extract user information from that token.

The private/public key pair is created in your Tiny account page, but we only store the public key on our side. The private key is for you to store in your backend.

Keep the private key secure, make sure you do not commit files containing the key to public repositories or similar!

JWT provider URL

The easiest way to setup JWT authentication against TinyMCE cloud services is to create a JWT provider endpoint. This endpoint takes a JSON HTTP POST request and produces a JSON result with the token that the service will then use for all the HTTP requests.

The following diagram explains the JWT call flow:

JSON Web Token Call Flow

JWT requirements

Algorithm

Our examples use, and we recommend RS256 algorithm. This is a list of supported ones: RS256, RS384, RS512, PS256, PS384, PS512

Claims

These are like options/data you can send with the JWT token.

  • sub - (required) Unique string to identify the user. This can be a database ID, hashed email address, or similar identifier.
  • name - (required) Full name of the user that will be used for presentation inside Tiny Drive. When the user uploads a file, this name is presented as the creator of that file.
  • https://claims.tiny.cloud/drive/root - (optional) Full path to a tiny drive specific root for example “/johndoe”. The user won’t be able to see or manage files outside this configured root path.

Note: The “sub” value is a case-sensitive string containing a String or URI value. The sub cannot have a : unless it is a valid URI or else the callback would fail.

JWT endpoint setup procedure

Follow these steps to set up your own JWT endpoint.

  1. Setup a JWT endpoint on your server, this could be a simple page using one of the examples below.
  2. Configure the tinydrive_token_provider to that endpoint.
  3. Make sure you copy the private key into the example code.
  4. You should be good to go now.

The JWT Endpoint should examine your systems sessions to verify your user has access to your system.

Need help?

We recommend reading up and trying to understand how JWT works; you need some necessary skills to implement Tiny Drive. This can be tricky if you need some help, check our help page and if that doesn’t work, contact our support.

PHP token provider endpoint example

This example uses the Firebase JWT library provided through the Composer dependency manager. The private key should be the private key that was generated through your Tiny Account.

jwt.php

<?php
require 'vendor/autoload.php';
use \Firebase\JWT\JWT;

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

$privateKey = <<<EOD
-----BEGIN PRIVATE KEY-----
....
-----END PRIVATE KEY-----
EOD;

// NOTE: Before you proceed with the TOKEN, verify your users session or access.

$payload = array(
  "sub" => "123", // unique user id string
  "name" => "John Doe", // full name of user

  // Optional custom user root path
  // "https://claims.tiny.cloud/drive/root" => "/johndoe",

  "exp" => time() + 60 * 10 // 10 minute expiration
);

try {
  $token = JWT::encode($payload, $privateKey, 'RS256');
  http_response_code(200);
  header('Content-Type: application/json');
  echo json_encode(array("token" => $token));
} catch (Exception $e) {
  http_response_code(500);
  header('Content-Type: application/json');
  echo $e->getMessage();
}
?>

TinyMCE example with jwt.php Endpoint

tinymce.init({
  selector: 'textarea',
  plugins: 'image media link tinydrive code imagetools',
  tinydrive_token_provider: 'jwt.php',
  toolbar: 'insertfile image link | code'
});

Node token provider endpoint example

This example shows you how to set up a Node.js express handler that produces the tokens. It requires you to install the Express web framework and the jsonwebtoken Node modules.

/jwt

const express = require('express');
const jwt = require('jsonwebtoken');
const cors = require('cors');

const app = express();
app.use(cors());

const privateKey = `
-----BEGIN PRIVATE KEY-----
....
-----END PRIVATE KEY-----
`;

app.post('/jwt', function (req, res) {
  // NOTE: Before you proceed with the TOKEN, verify your users' session or access.
  const payload = {
    sub: '123', // Unique user id string
    name: 'John Doe', // Full name of user

    // Optional custom user root path
    // 'https://claims.tiny.cloud/drive/root': '/johndoe',

    exp: Math.floor(Date.now() / 1000) + (60 * 10) // 10 minutes expiration
  };

  try {
    const token = jwt.sign(payload, privateKey, { algorithm: 'RS256'});
    res.set('content-type', 'application/json');
    res.status(200);
    res.send(JSON.stringify({
      token: token
    }));
  } catch (e) {
    res.status(500);
    res.send(e.message);
  }
});

app.listen(3000);

TinyMCE example with /jwt endpoint

tinymce.init({
  selector: 'textarea',
  plugins: 'image media link tinydrive code imagetools',
  tinydrive_token_provider: '/jwt',
  toolbar: 'insertfile image link | code'
});

More configuration

If you managed to set this up, you should be good to go with checking out the various configuration options for Tiny Drive and how you can customize it. Don’t forget to change the JWT Claim’s (user id, user name) to get those from your system.

If you need some help, check our help page and if that doesn’t work, submit a support request.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.