Secure your video conference with one-time passcodes

git clone https://github.com/miguelgrinberg/flask-twilio-video.git && cd flask-twilio-video

virtualenv venv
source venv/bin/activate

# find here: twilio.com/console
TWILIO_ACCOUNT_SID='ACxx…'
TWILIO_AUTH_TOKEN=

# create one here: twilio.com/console/video/project/api-keys
TWILIO_API_KEY_SID=
TWILIO_API_KEY_SECRET=

# create one here: twilio.com/console/verify/services
VERIFY_SERVICE_SID=

# used for session storage
# change this to something difficult to guess!
SECRET_KEY='super-secret'

export FLASK_ENV=development && flask run

def get_participant(identity):
   # Hard coded for demo purposes
   # Use your customer DB in production!
   KNOWN_PARTICIPANTS = {
       'blathers': '+18005559876',
       'mabel': '+18005554321',
       'tommy': '+18005556789'
   }
   return KNOWN_PARTICIPANTS.get(identity)

@app.route('/login', methods=['POST'])
def login():
   username = request.get_json(force=True).get('username')
   if not username:
       abort(401)
  
+   phone_number = get_participant(username)
+   if not phone_number:
+       abort(401)

+   session['username'] = username
  
   token = AccessToken(twilio_account_sid, twilio_api_key_sid,
                       twilio_api_key_secret, identity=username)
   token.add_grant(VideoGrant(room='My Room'))

   return {'token': token.to_jwt().decode()}

from flask import session
app.secret_key = os.environ.get('SECRET_KEY')

from twilio.rest import Client
twilio_auth_token = os.environ.get('TWILIO_AUTH_TOKEN')
verify_service_sid = os.environ.get('VERIFY_SERVICE_SID')

def _get_verify_service():
   client = Client(twilio_account_sid, twilio_auth_token)
   return client.verify.services(verify_service_sid)


def start_verification(to):
   service = _get_verify_service()
   service.verifications.create(to=to, channel='sms')


def check_verification(to, code):
   service = _get_verify_service()
   check = service.verification_checks.create(to=to, code=code)
   return check.status == 'approved'

def login():
   username = request.get_json(force=True).get('username')
   if not username:
       abort(401)

   phone_number = get_participant(username)
   if not phone_number:
       abort(401)
   session['username'] = username

   start_verification(phone_number)

   token = AccessToken(twilio_account_sid, twilio_api_key_sid,
                       twilio_api_key_secret, identity=username)
   token.add_grant(VideoGrant(room='My Room'))

   return {'token': token.to_jwt().decode()}

@app.route('/verify', methods=['POST'])
def verify():
   username = session['username']
   phone_number = get_participant(username)
   code = request.get_json(force=True).get('code')
   if not check_verification(phone_number, code):
       abort(401)

   token = AccessToken(twilio_account_sid, twilio_api_key_sid,
                       twilio_api_key_secret, identity=username)
   token.add_grant(VideoGrant(room='My Room'))

   return {'token': token.to_jwt().decode()}

def login():
   username = request.get_json(force=True).get('username')
   if not username:
       abort(401)

   phone_number = get_participant(username)
   if not phone_number:
       abort(401)
   session['username'] = username
   session['phone'] = phone_number

   start_verification(phone_number)
-
-   token = AccessToken(twilio_account_sid, twilio_api_key_sid,
-                       twilio_api_key_secret, identity=username)
-   token.add_grant(VideoGrant(room='My Room'))
-
-   return {'token': token.to_jwt().decode()}
+   return {'phone': '********{}'.format(phone_number[-2:])} 

       <p id="count">Disconnected.</p>
+       <form id="verify" style="display: none;">
+           Code: <input type="text" id="code">
+           <button id="check_code">Verify code</button>
+       </form>
       <div id="container" class="container">

const codeInput = document.getElementById('code');
const verifyForm = document.getElementById('verify');

       connect(username).then(() => {
-           button.innerHTML = 'Leave call';
-           button.disabled = false;
+           verifyForm.style.display = "";
       }).catch(() => {
-           alert('Connection failed. Is the backend running?');
+           alert("Error - invalid or unknown user");

function verifyButtonHandler(event) {
   event.preventDefault();
   const code = codeInput.value;
   verify(code).then(() => {
       verifyForm.style.display = "none";
       button.innerHTML = 'Leave call';
       button.disabled = false;
   }).catch(() => {
       alert("Error - invalid code");
       button.innerHTML = 'Join call';
       button.disabled = false;
   });
};

function connect(username) {
   var promise = new Promise((resolve, reject) => {
       // start the phone verification process
       fetch('/login', {
           method: 'POST',
           body: JSON.stringify({'username': username})
       }).then(res => res.json()).then(data => {
           count.innerHTML = `Sent code to phone number ${data.phone}. Enter the code to verify.`;
           resolve();
       }).catch(() => {
           reject();
       });
   });
   return promise;
};

function verify(code) {
   var promise = new Promise((resolve, reject) => {
       // get a token from the back end
       fetch('/verify', {
           method: 'POST',
           body: JSON.stringify({'code': code})
       }).then(res => res.json()).then(data => {
           // join video call
           return Twilio.Video.connect(data.token);
       }).then(_room => {
           room = _room;
           room.participants.forEach(participantConnected);
           room.on('participantConnected', participantConnected);
           room.on('participantDisconnected', participantDisconnected);
           connected = true;
           updateParticipantCount();
           resolve();
       }).catch(() => {
           reject();
       });
   });
   return promise;
};

verifyForm.addEventListener('submit', verifyButtonHandler);