How to add customer authentication to Twilio Flex
Time to read: 4 minutes
Call center security is a known weak spot for many companies. That's because most call centers only identify and do not actually authenticate users when they call.
Identity information is usually static data like a phone number or date of birth -- things that a lot of people know about me and you. Identity information is often easy to find or purchase and probably doesn't change. With a little bit of research, hackers can use social engineering to bypass common knowledge-based "verification" based on a user's identity. Authentication is how to prove identity with a factor that could be something you know like a password, something you have like a key, or something you are like a fingerprint.
Options for actually authenticating users contacting your support system include sending one-time passcodes (OTPs) to a user via SMS or email, callbacks, security PINs, verbal passcodes, voice recognition, and more. For more ideas and check out this blog post on contact center security best practices.
This post will walk through how to add a Twilio Flex plugin that can send SMS OTPs to authenticate users with the Twilio Verify API.
To code along with this post you'll need:
- A Twilio account. Get $10 credit if you upgrade using this link.
- A Flex project. Create a new Flex project in the console.
- A Verify service. Create a new Verify service in the console.
- The Twilio CLI. Install the CLI for your operating system and login with your Flex account credentials using
- The Twilio serverless plugin. Install from the command line with
twilio plugins:install @twilio-labs/plugin-serverless. More details in the docs.
- The Twilio Flex plugin. Install from the command line with
twilio plugins:install @twilio-labs/plugin-flex. More details on GitHub.
- NPM version 5.0.0 or later installed (type
npm -vin your terminal to check)
- Node version 10.19.0 or later installed (type
node -vin your terminal to check). I recommend using
nvmto manage your Node versions.
Learn more about developing Flex plugins in the quickstart.
git clone https://github.com/twilio-labs/plugin-verify.git && cd plugin-verify
Install all of the dependencies for the project with:
This plugin uses two Verify API endpoints - one to start the verification and one to check the verification. We've wrapped those API calls in serverless functions found in the serverless folder. You can learn more about these functions in the serverless phone verification blog post.
Copy the serverless config example
.env.serverless.example file to
cp serverless/.env.serverless.example serverless/.env
Open up your new
.env file and fill in the variables:
# Find in: twilio.com/console
# Create in: twilio.com/console/verify/services
Save the function URLs that display with the deployment details shown above. You can also find your functions in the console.
.env.example in the project root to
# in the project root
cp .env.example .env
REACT_APP_SERVICE_BASE_URL to be your new function url.
Your URL will be slightly different.
From the project root, start the plugin locally:
This will open a new browser window. Hit Login with Twilio to authenticate yourself as an agent. Once you're redirected back to the Flex app, make sure your agent is set to
This will call the
start-verify function we deployed earlier to send a one-time passcode (OTP) to the customer's phone number. The plugin sends the passcode to the phone number the customer is calling or texting from which helps verify that the caller is not spoofing their phone number. You could also do a lookup in your CRM with other user information or even send the OTP via email.
The agent can then input the OTP provided by the customer. Two things happen when the customer is verified:
- Flex displays a banner saying the customer is Verified
- Flex displays data in the "INFO" tab
The latter is an example of how to limit caller information available to the agent until they are properly authenticated. This can help limit social engineering attacks by building guardrails for the agents.
We can deploy this plugin using the CLI. Note this does not deploy the serverless functions, that is done in a separate step described above.
You should see a note that
🚀 Your plugin has been successfully deployed to your Flex project and can test it out by launching your hosted Flex instance. You can find more details about deploying Flex plugins in the docs.
This is a great option for manual verification, but there are other options for call center authentication. You could also:
- Build a pin code system for users with an authenticated web session
- Send and verify the OTP before the agent and user are connected
- Call back the user at the phone number on file
Other questions about contact center security? Find me on twitter @kelleyrobinson.
From APIs to SDKs to sample apps
API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
The latest ebooks, industry reports, and webinars
Learn from customer engagement experts to improve your own communication.
Twilio's developer community hub
Best practices, code samples, and inspiration to build communications and digital engagement experiences.