README.md

Code snippets for a tutorial on building a video app with JaaS, React and Vercel

Add a Little Jaas - allow-list.env

ALLOW_LIST='walter@gooddogs.com,scout@gooddogs.com'

Add a Little JaaS - config.env

ALLOW_LIST=
JAAS_ROOM_NAME=
JAAS_APP_ID=
JAAS_KEY_ID=
JAAS_PRIVATE_KEY=

Add a Little Jaas - jass-room-name.env

JAAS_ROOM_NAME=AllAboutThatJAAS

Commands - base64.sh

cat {Key Name}.pk | base64

Commands - cleanup.sh

rm ./src/App.css ./src/index.css ./src/logo.svg

Commands - create-react-app.sh

npx create-react-app jaas-hands
cd jaas-hands
npm start

Commands - install-deps.sh

npm install bootstrap bootstrap-react uuid jsonwebtoken

Commands - install-vercel.sh

npm install --global vercel

Commands - mk-api.sh

mkdir ./api

Commands - start-vercel-dev.sh

vercel dev

Commands - touch-join.sh

touch ./api/join.js

Commands - vercel-deploy.sh

 vercel deploy

Commands - vercel.sh

vercel

Creating the API - generateAvatar.js

const generateAvatar = (email) => {
	const hash = crypto.createHash('md5').update(email).digest("hex");
	return 'https://www.gravatar.com/avatar/' + hash;
}

Creating the API - generateJWT.js

// JWT Generator -- Takes user's name and email address
const generateJWT = (name, email, roomName) => {

	// Configure the JWT Header
	const key = process.env.JAAS_KEY_ID;
	const header = { algorithm: 'RS256', keyid: key };
	
	// Get the current time and set the time boundaries of the JWT
	const now = new Date();
	const expiration = Math.round(now.setHours(now.getHours() + 3) / 1000);
	const notBefore = (Math.round((new Date).getTime() / 1000) - 10);
	
	// Build the JWT Payload
	const avatar = generateAvatar(email);
	const id = uuid();
	const payload = {
		aud: 'jitsi',
		context: {
			user: { 
				id, 
				name, 
				avatar, 
				email: email, 
				moderator: 'true' 
			},
			features: {
				livestreaming: 'true',
				recording: 'true',
				transcription: 'true',
				"outbound-call": 'true'
			}
		},
		iss: 'chat',
		room: '*',
		sub: process.env.JAAS_APP_ID,
		exp: expiration,
		nbf: notBefore
	};

	// Load and decode the Private Key from the ENV
	let buff = Buffer.from(process.env.JAAS_PRIVATE_KEY, 'base64');
	const privateKey = buff.toString('ascii')

	// Finally, sign the JWT
	return jsonwebtoken.sign(
		payload, 
		privateKey, 
		header
	);
}

Creating the API - isAllowed.js

const isAllowed = (email) => {
	const friendsList = process.env.ALLOW_LIST.split(',');
	return (friendsList.indexOf(email) >= 0);
}

Creating the API - join.js

var jsonwebtoken = require('jsonwebtoken');
var uuid = require('uuid-random');
var crypto = require('crypto');

// Helper function to generate an avatar with the help of Gravatar
const generateAvatar = (email) => {
	const hash = crypto.createHash('md5').update(email).digest("hex");
	return 'https://www.gravatar.com/avatar/' + hash;
}

// Our super secure Access Management System :)
const isAllowed = (email) => {
	const friendsList = process.env.ALLOW_LIST.split(',');
	return (friendsList.indexOf(email) >= 0);
}

// Generate a Room Name
const generateRoomName = () => {
	return process.env.JAAS_APP_ID + '/' + process.env.JAAS_ROOM_NAME;
}

// JWT Generator -- Takes user's name and email address
const generateJWT = (name, email, roomName) => {

	// Configure the JWT Header
	const key = process.env.JAAS_KEY_ID;
	const header = { algorithm: 'RS256', keyid: key };
	
	// Get the current time and set the time boundaries of the JWT
	const now = new Date();
	const expiration = Math.round(now.setHours(now.getHours() + 3) / 1000);
	const notBefore = (Math.round((new Date).getTime() / 1000) - 10);
	
	// Build the JWT Payload
	const avatar = generateAvatar(email);
	const id = uuid();
	const payload = {
		aud: 'jitsi',
		context: {
			user: { 
				id, 
				name, 
				avatar, 
				email: email, 
				moderator: 'true' 
			},
			features: {
				livestreaming: 'true',
				recording: 'true',
				transcription: 'true',
				"outbound-call": 'true'
			}
		},
		iss: 'chat',
		room: '*',
		sub: process.env.JAAS_APP_ID,
		exp: expiration,
		nbf: notBefore
	};

	// Load and decode the Private Key from the ENV
	let buff = Buffer.from(process.env.JAAS_PRIVATE_KEY, 'base64');
	const privateKey = buff.toString('ascii')

	// Finally, sign the JWT
	return jsonwebtoken.sign(
		payload, 
		privateKey, 
		header
	);
}

// Request Handler
export default async (req, res) => {

	// Parse the JSON request
	const { body } = req;
	const email = body.email.trim().toLowerCase();
	const roomName = generateRoomName();

	// Construct our default response payload
	res.statusCode = 403;
	const payload = { 
		email:  body.email,
		success: false
	};

	// Check to see if the user is allowed, if so make them a JWT.
	if (isAllowed(body.email)) {
		payload.key = generateJWT(email, email, roomName);
		payload.room = roomName;
		payload.success = true;
		res.statusCode = 200;
	}
	
	// Construct Response
	res.setHeader("Content-Type", "application/json");
	res.send(JSON.stringify(payload));
}

Creating the API - requestHandler.js

// Request Handler
export default async (req, res) => {

	// Parse the JSON request
	const { body } = req;
	const email = body.email.trim().toLowerCase();
	const roomName = generateRoomName();

	// Construct our default response payload
	res.statusCode = 403;
	const payload = { 
		email:  body.email,
		success: false
	};

	// Check to see if the user is allowed, if so make them a JWT.
	if (isAllowed(body.email)) {
		payload.key = generateJWT(email, email, roomName);
		payload.room = roomName;
		payload.success = true;
		res.statusCode = 200;
	}
	
	// Construct Response
	res.setHeader("Content-Type", "application/json");
	res.send(JSON.stringify(payload));
}

Creating the UI Step 0 - App.js

import { Container, Form, Button } from "react-bootstrap";

function App() {

	return (
		<div className="App">
			<Container>
				<h2>Lets JaaS It Up</h2>
				<Form
						style={{ display: allowed ? "none" : "block" }}>
					<Form.Group>
						<Form.Label htmlFor="email">
							Email Address
						</Form.Label>
						<Form.Control 
							value={email} 
							onChange={(e) => setEmail(e.target.value)} />
					</Form.Group>
					<Button variant="primary" type="submit">Join</Button>
				</Form>
				<div style={{ display: allowed ? "block" : "none" }}>
					<div id="jaas-container" style={{height: "700px"}}></div>
				</div>
			</Container>
		</div>
	);
}

Creating the UI Step 1 - App.js

import React, { useState, useEffect } from "react";
import { Container, Form, Button } from "react-bootstrap";

function App() {

  // Setup our Hooks to manage state
	const [email, setEmail] = useState("");
	const [allowed, setAllowed] = useState(false);

	return (
		<div className="App">
			<Container>
				<h2>Lets JaaS It Up</h2>
				<Form
						style={{ display: allowed ? "none" : "block" }}>
					<Form.Group>
						<Form.Label htmlFor="email">
							Email Address
						</Form.Label>
						<Form.Control 
							value={email} 
							onChange={(e) => setEmail(e.target.value)} />
					</Form.Group>
					<Button variant="primary" type="submit">Join</Button>
				</Form>
				<div style={{ display: allowed ? "block" : "none" }}>
					<div id="jaas-container" style={{height: "700px"}}></div>
				</div>
			</Container>
		</div>
	);
}

Snippets - add-bootstrap.js

import 'bootstrap/dist/css/bootstrap.min.css';

Snippets - hooks.js

	// Setup our Hooks to manage state
	const [email, setEmail] = useState("");
	const [allowed, setAllowed] = useState(false);

Tying It Together - formElement.js

<Form onSubmit={onSubmit} style={{ display: allowed ? "none" : "block" }}>

Tying It Together - loadJaas.js

useEffect(() => {
	const script = document.createElement('script');
	script.src = "https://8x8.vc/external_api.js";
	script.async = true;
	document.body.appendChild(script);
	return () => {
		document.body.removeChild(script);
	}
}, []);

Tying It Together - onSubmit.js

// Handle the user submission
const onSubmit = async (e) => {
	await e.preventDefault();

	const res = await fetch("/api/join", {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
		},
		body: JSON.stringify({email: email})
	});

	const data = await res.json();

	if(data.success) {
		setAllowed(data.success);
		setTimeout(() => { initJaas(data); }, 500 );
	}
}

Typing It Together - initJaas.js

// Init the JaaS iFrame API once we have a JWT
const initJaas = (data) => {
	new JitsiMeetExternalAPI("8x8.vc", {
		roomName: data.room,
		parentNode: document.querySelector('#jaas-container'),
		jwt: data.key
	});
}