Manage application state with cookies

Due to the ephemeral nature of Functions, application state for purely serverless apps has previously been difficult to manage, or required storing such information in a remote database. Luckily, with access to cookies with Runtime Handler version 1.2.1 and later, you can now maintain limited state in your apps through cookies!

Let's create a Function named state that leverages per-phone number cookies to store some application state, just like you would with a more traditional, server-based solution! Use the following directions to create a Service and your state Function:

Create and host a Function

Before you run any of the examples on this page, create a Function and paste the example code into it. You can create a Function in the Twilio Console or by using the Serverless Toolkit.

ConsoleServerless Toolkit

If you prefer a UI-driven approach, complete these steps in the Twilio Console:

Log in to the Twilio Console and navigate to Develop > Functions & Assets. If you're using the legacy Console, open the Functions tab.
Functions are contained within Services. Click Create Service to create a new Service.
Click Add + and select Add Function from the dropdown.
The Console creates a new protected Function that you can rename. The filename becomes the URL path of the Function.
Copy one of the example code snippets from this page and paste the code into your newly created Function. You can switch examples by using the dropdown menu in the code rail.
Click Save.
Click Deploy All to build and deploy the Function. After deployment, you can access your Function at https://<service-name>-<random-characters>-<optional-domain-suffix>.twil.io/<function-path>
For example: test-function-3548.twil.io/hello-world.

You can now invoke your Function with HTTP requests, configure it as the webhook for a Twilio phone number, call it from a Twilio Studio Run Function Widget, and more.

Add counter state to an SMS response

1exports.handler = (context, event, callback) => {
2  // Initialize a new Response and some TwiML
3  const response = new Twilio.Response();
4  const twiml = new Twilio.twiml.MessagingResponse();
5
6  // Cookies are accessed by name from the event.request.cookies object
7  // If the user doesn't have a count yet, initialize it to zero. Cookies are
8  // always strings, so you'll need to convert the count to a number
9  const count = Number(event.request.cookies.count) || 0;
10
11  // Return a dynamic message based on if this is the first message or not
12  const message =
13    count > 0
14      ? `Your current count is ${count}`
15      : 'Hello, thanks for the new message!';
16
17  twiml.message(message);
18
19  response
20    // Add the stringified TwiML to the response body
21    .setBody(twiml.toString())
22    // Since we're returning TwiML, the content type must be XML
23    .appendHeader('Content-Type', 'text/xml')
24    // You can increment the count state for the next message, or any other
25    // operation that makes sense for your application's needs. Remember
26    // that cookies are always stored as strings
27    .setCookie('count', (count + 1).toString());
28
29  return callback(null, response);
30};

For Twilio SMS, cookies are scoped to the "conversation" between two parties — you can have a unique cookie for each To/From phone number pair. For example, you can store a unique cookie for any messages sent between 415-555-2222 (your number, for example) and 415-555-1111 (the phone number your Function is a webhook for), which will be different from the cookie used between 415-555-3333 and 415-555-1111.

The code here is accepting an incoming Message webhook request, and checking for an incoming cookie named count. If that cookie is not present, count is initialized to 0, the user message is formatted to indicate the start of a conversation, and the count is incremented then set as a cookie along with the response to the sender. If count is already present, its value is included in the message, incremented, and set so that subsequent messages can continue to store the ever-increasing value of count.

To test this and observe your stateless Function managing to track state with cookies, you'll need to set your deployed state Function as the webhook for your Twilio phone number, as shown next.

(warning)

Warning

Cookies created in this specific scenario (Twilio forwarding SMS messages to your Function or server) are limited to a maximum lifetime of four hours, so if a conversation remains idle for more than four hours, it will be automatically cleared. If you require longer-lasting state, you will need to store it in an external source such as a database.

In any other scenario, cookies set by your Function are only subject to the usual limitations.

Set a Function as a webhook

For your Function to react to incoming SMS or voice calls, it must be set as a webhook for your Twilio number. There are a variety of methods to set a Function as a webhook:

Twilio ConsoleLegacy Twilio ConsoleTwilio CLITwilio server-side SDKs

Use the Twilio Console UI to connect your Function as a webhook:

Go to Products & Services > Numbers & Senders > Phone Numbers.
Select the phone number you'd like to connect to your Function.
Go to the Configuration Details tab.

To configure Messaging, choose Edit details in the Messaging section.
To configure Voice calls, choose Edit details in the Voice and emergency calling section.

Select the webhook method and provide your webhook URL. Select an HTTP method to handle responses.
Optional: Configure a secondary webhook in case the primary webhook fails.
Click the Save button.

In the legacy Twilio Console, connect your Function as a webhook:

Log in to the Twilio Console's Phone Numbers page.
Click on the phone number you'd like to have connected to your Function.
If you want the Function to respond to incoming SMS, find the A Message Comes In option under Messaging. If you want the Function to respond to Voice, find the A Call Comes In option under Voice & Fax.
Select Function from the A Message Comes In or A Call Comes In dropdown.
Select the Service that you are using, then the Environment (this will default to ui unless you have created custom domains ), and finally Function Path of your Function from the respective dropdown menus.

Alternatively, you could select Webhook instead of Function, and directly paste in the full URL of the Function.

Click the Save button.

You can also use the Twilio CLI to assign the Function as the webhook of your phone number.

Prerequisites

Twilio CLI installed and executable from your terminal.
Either the E.164 formatted value of your Twilio phone number (+1234567890), or its SID (PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX).
The full URL of your Function (https://test-1337.twil.io/my-test-function)

Once you have the CLI installed and the necessary information, run the following to connect the Function to respond to incoming SMS:

1twilio phone-numbers:update +1234567890 \
2  --sms-url https://test-1337.twil.io/my-test-function

If you prefer to have the Function respond to incoming calls instead, run:

1twilio phone-numbers:update +1234567890 \
2  --voice-url https://test-1337.twil.io/my-test-function

You may also use the SID of your Twilio phone number instead of the E.164 formatted phone number:

1twilio phone-numbers:update PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
2  --sms-url https://test-1337.twil.io/my-test-function

You can also use any of the available Twilio SDKs to assign the Function as the webhook of your phone number.

Prerequisites

A local development environment for your language of choice and the associated Twilio SDK installed.
The SID (PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX) of your Twilio phone number.
The full URL of your Function (https://test-1337.twil.io/my-test-function).

In JavaScript for example, you could execute the following code to assign the SMS webhook of your Twilio phone number. The same logic would apply for assigning to a voice webhook, except that the modified property instead would be voiceUrl:

1// Download the SDK from https://www.twilio.com/docs/node/install
2// Find your Account SID and Auth Token at twilio.com/console
3// and set the environment variables. See https://twil.io/secure
4const accountSid = process.env.TWILIO_ACCOUNT_SID;
5const authToken = process.env.TWILIO_AUTH_TOKEN;
6const client = require('twilio')(accountSid, authToken);
7
8client
9  .incomingPhoneNumbers('PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
10  .update({ smsUrl: 'https://test-1337.twil.io/my-test-function' })
11  .then((phoneNumber) => console.log(phoneNumber.smsUrl));
12

Validate that it works

Now that your Twilio phone number is directing incoming SMS messages to your Function, try sending a short message to your Twilio phone number.

You will receive an initial response of Hello, thanks for the new message!, and any subsequent messages you send will then receive a response of Your current count is 1, Your current count is 2, and so on.

Set state attributes

Cookies support several attributes, which allow you to define aspects such as duration, security, and more. You can set these using the third parameter to setCookie. For example, given the existing call:

response.setCookie('count', (count + 1).toString());

You could modify the count cookie to last for a maximum of 30 minutes (1800 seconds) by setting the Max-Age attribute like so:

response.setCookie('count', (count + 1).toString(), ['Max-Age=1800']);

Remove or reset state

By default, session cookies persisted by Twilio SMS only last for four hours at most, and you cannot exceed this limit. However, it's perfectly valid to remove a cookie at any time to fit your application's needs.

For example, you could clear the count from the previous example once a condition is met, as shown in this sample:

Clear counter state from an SMS conversation

1exports.handler = (context, event, callback) => {
2  // Initialize a new Response and some TwiML
3  const response = new Twilio.Response();
4  const twiml = new Twilio.twiml.MessagingResponse();
5
6  // Since we're returning TwiML, the content type must be XML
7  response.appendHeader('Content-Type', 'text/xml');
8
9  // Cookies are accessed by name from the event.request.cookies object
10  // If the user doesn't have a count yet, initialize it to zero. Cookies are
11  // always strings, so you'll need to convert the count to a number
12  const count = Number(event.request.cookies.count) || 0;
13
14  if (count > 5) {
15    twiml.message("You've reached the end of the count!");
16    // In this case we want to remove the count and let the user begin
17    // a new conversation
18    response.setBody(twiml.toString()).removeCookie('count');
19    // Use an early return to respond to the user and avoid other logic paths
20    return callback(null, response);
21  }
22
23  // Return a dynamic message based on if this is the first message or not
24  const message =
25    count > 0
26      ? `Your current count is ${count}`
27      : 'Hello, thanks for the new message! Message again to see your count update.';
28
29  twiml.message(message);
30
31  response.setBody(twiml.toString()).setCookie('count', (count + 1).toString());
32
33  return callback(null, response);
34};

Validate state reset

If you save and deploy this new code instead, you should have a very similar interaction with your Twilio phone number. After sending a message, you will receive an initial response, and any subsequent messages you send will then receive a response of Your current count is 1, Your current count is 2, and so on.

The difference is that after reaching a count of five and sending another message, you'll receive You've reached the end of the count!. If you try to message again, you'll find yourself in a completely new conversation. This is a handy way to end interactions, such as if your application has successfully helped a customer, or if your application is a game that the user has won or lost.

(warning)

Warning

These examples demonstrate adding a single state value as a cookie, but you are free to add more to support your application needs!

Keep in mind, there are limitations on how many cookies can be set, how large they can be, and how long they can persist until expiring.

(information)

Info

Curious about what else you can build by using cookies to add statefulness to your Functions? Check out this blog article to see how you can build your own Wordle clone purely with Functions and Assets!

Manage application state with cookies

Create and host a Function

Run your Function in local development

Deploy your Function

Add counter state to an SMS response

Warning

Set a Function as a webhook

Validate that it works

Set state attributes

Remove or reset state

Clear counter state from an SMS conversation

Validate state reset

Warning

Info

Manage application state with cookies

Create and host a Function

Run your Function in local development

Deploy your Function

Store application state in a cookie

Add counter state to an SMS response

Warning

Set a Function as a webhook

Validate that it works

Set state attributes

Remove or reset state

Clear counter state from an SMS conversation

Validate state reset

Warning

Info