js

page_type	description	products	languages	extensions	urlFragment
sample	This sample application demonstrates key web storage features, including managing cookies, SameSite cookies, and partitioned cookies. It also covers local storage and IndexedDB for data persistence in modern web applications.	office-teams office office-365	javascript	contentType createdDate samples 11/22/2024 12:30:00 PM	officedev-microsoft-teams-samples-tab-app-cookie-js

Microsoft Teams Cookie App

This sample application provides an interactive demonstration of cookie management, including setting, clearing, and customizing attributes such as SameSite and Secure flags. It also explores advanced web storage solutions like local storage and IndexedDB, offering a practical guide to modern client-side data handling.

Included Features

• Cookies
• SameSite Cookies
• Partitioned Cookies
• LocalStorage
• IndexDB

Interaction with app

Try it yourself - experience the App in your Microsoft Teams client

Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app package (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, see steps here).

Microsoft Teams Cookie App Demo Manifest: Manifest

Prerequisites

• To test locally, NodeJS must be installed on your development machine (version 16.14.2 or higher).

• dev tunnel or ngrok latest version or equivalent tunnelling solution

Setup

2. Setup NGROK

• Run ngrok - point to port 3000

  ngrok http 3000 --host-header="localhost:3000"

  Alternatively, you can also use the dev tunnels. Please follow Create and host a dev tunnel and host the tunnel with anonymous user access command as shown below:

  devtunnel host -p 3000 --allow-anonymous

3. Setup for code

• Clone the repository

  git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

• Install node modules

  Inside js folder, navigate to samples/tab-app-cookie/js open your local terminal and run the below command to install node modules. You can do the same in Visual
  Studio code terminal by opening the project in Visual Studio code.

  npm install

• Navigate to ./cookies.js and go to line 23. Replace {{DOMAIN-NAME}} with your domain. E.g. if you are using ngrok it would be https://1234.ngrok-free.app then your DOMAIN-NAME will be 1234.ngrok-free.app

    function popOutApp() {
      window.open("https://{{DOMAIN-NAME}}/partitioned-cookies.html");
  }

• Run the sample by following command:

  npm start
  

4. Setup Manifest for Teams

• This step is specific to Teams.

  • Edit the manifest.json file located in the ./appPackage folder and replace the placeholder {{ANY-GUID-ID}} with the corresponding GUID.
  • Edit the manifest.json for validDomains and replace {{DOMAIN-NAME}} with base Url of your domain. E.g. if you are using ngrok it would be https://1234.ngrok-free.app then your DOMAIN-NAME will be 1234.ngrok-free.app and if you are using dev tunnels then your domain will be like: 12345.devtunnels.ms.
  • Zip the contents of the appPackage folder to create a manifest.zip (Make sure the zip file does not contain any subfolders, as this will result in an error when uploading your .zip package).

• Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")

  • Go to Microsoft Teams. From the lower left corner, select Apps
  • From the lower left corner, choose Upload a custom App
  • Go to your project directory, the ./appPackage folder, select the zip folder, and choose Open.
  • Select Add in the pop-up dialog box. Your app is uploaded to Teams.

Running the sample

Install App

Index Page:

Page Cookie

SameSite Cookie

Partitioned Cookie:

Local Storage Cookie:

Index DB:

Further reading

• Will update once the document is confirmed