+ SSO with nested app authentication
+ This add-in demonstrates how to connect to Microsoft Graph from an add-in.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Samples/auth/Office-Add-in-SSO-NAA/src/taskpane/taskpane.ts b/Samples/auth/Office-Add-in-SSO-NAA/src/taskpane/taskpane.ts
new file mode 100644
index 000000000..92774609c
--- /dev/null
+++ b/Samples/auth/Office-Add-in-SSO-NAA/src/taskpane/taskpane.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
+ * See LICENSE in the project root for license information.
+ */
+
+/* global console, document, Office */
+
+import { AccountManager } from "./authConfig";
+import { makeGraphRequest } from "./msgraph-helper";
+import { writeFileNamesToOfficeDocument } from "./document";
+
+const accountManager = new AccountManager();
+const sideloadMsg = document.getElementById("sideload-msg");
+const appBody = document.getElementById("app-body");
+const getUserDataButton = document.getElementById("getUserData");
+const getUserFilesButton = document.getElementById("getUserFiles");
+const userName = document.getElementById("userName");
+const userEmail = document.getElementById("userEmail");
+
+Office.onReady((info) => {
+ switch (info.host) {
+ case Office.HostType.Excel:
+ case Office.HostType.PowerPoint:
+ case Office.HostType.Word:
+ if (sideloadMsg) {
+ sideloadMsg.style.display = "none";
+ }
+ if (appBody) {
+ appBody.style.display = "flex";
+ }
+ if (getUserDataButton) {
+ getUserDataButton.onclick = getUserData;
+ }
+ if (getUserFilesButton) {
+ getUserFilesButton.onclick = getUserFiles;
+ }
+ accountManager.initialize();
+ break;
+ }
+});
+
+/**
+ * Gets the user data such as name and email and displays it
+ * in the task pane.
+ */
+async function getUserData() {
+ try {
+ const userDataElement = document.getElementById("userData");
+ const userAccount = await accountManager.ssoGetUserIdentity(["user.read"]);
+ const idTokenClaims = userAccount.idTokenClaims as { name?: string; preferred_username?: string };
+
+ console.log(userAccount);
+
+ if (userDataElement) {
+ userDataElement.style.visibility = "visible";
+ }
+ if (userName) {
+ userName.innerText = idTokenClaims.name ?? "";
+ }
+ if (userEmail) {
+ userEmail.innerText = idTokenClaims.preferred_username ?? "";
+ }
+ } catch (error) {
+ console.error(error);
+ }
+}
+
+/**
+ * Gets the first 10 item names (files or folders) from the user's OneDrive.
+ * Inserts the item names into the document.
+ */
+async function getUserFiles() {
+ try {
+ const names = await getFileNames();
+
+ writeFileNamesToOfficeDocument(names);
+ } catch (error) {
+ console.error(error);
+ }
+}
+
+async function getFileNames(count = 10) {
+ const accessToken = await accountManager.ssoGetToken(["Files.Read"]);
+ const response: { value: { name: string }[] } = await makeGraphRequest(
+ accessToken,
+ "/me/drive/root/children",
+ `?$select=name&$top=${count}`
+ );
+
+ const names = response.value.map((item: { name: string }) => item.name);
+ return names;
+}
diff --git a/Samples/auth/Office-Add-in-SSO-NAA/tsconfig.json b/Samples/auth/Office-Add-in-SSO-NAA/tsconfig.json
new file mode 100644
index 000000000..c2fe826ad
--- /dev/null
+++ b/Samples/auth/Office-Add-in-SSO-NAA/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "allowJs": true,
+ "baseUrl": ".",
+ "esModuleInterop": true,
+ "experimentalDecorators": true,
+ "forceConsistentCasingInFileNames": true,
+ "jsx": "react",
+ "noEmitOnError": true,
+ "outDir": "lib",
+ "sourceMap": true,
+ "strict": true,
+ "target": "es5",
+ "lib": [
+ "es2015",
+ "dom"
+ ]
+ },
+ "exclude": [
+ "node_modules",
+ "dist",
+ "lib",
+ "lib-amd"
+ ],
+ "ts-node": {
+ "files": true
+ }
+}
\ No newline at end of file
diff --git a/Samples/auth/Office-Add-in-SSO-NAA/webpack.config.js b/Samples/auth/Office-Add-in-SSO-NAA/webpack.config.js
new file mode 100644
index 000000000..2c0d47144
--- /dev/null
+++ b/Samples/auth/Office-Add-in-SSO-NAA/webpack.config.js
@@ -0,0 +1,94 @@
+/* eslint-disable no-undef */
+
+const devCerts = require("office-addin-dev-certs");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const urlDev = "https://localhost:3000/";
+const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
+
+async function getHttpsOptions() {
+ const httpsOptions = await devCerts.getHttpsServerOptions();
+ return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
+}
+
+module.exports = async (env, options) => {
+ const dev = options.mode === "development";
+ const config = {
+ devtool: "source-map",
+ entry: {
+ polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
+ taskpane: ["./src/taskpane/taskpane.ts", "./src/taskpane/taskpane.html"],
+ },
+ output: {
+ clean: true,
+ },
+ resolve: {
+ extensions: [".ts", ".html", ".js"],
+ },
+ module: {
+ rules: [
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader",
+ options: {
+ presets: ["@babel/preset-typescript"],
+ },
+ },
+ },
+ {
+ test: /\.html$/,
+ exclude: /node_modules/,
+ use: "html-loader",
+ },
+ {
+ test: /\.(png|jpg|jpeg|gif|ico)$/,
+ type: "asset/resource",
+ generator: {
+ filename: "assets/[name][ext][query]",
+ },
+ },
+ ],
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: "taskpane.html",
+ template: "./src/taskpane/taskpane.html",
+ chunks: ["polyfill", "taskpane"],
+ }),
+ new CopyWebpackPlugin({
+ patterns: [
+ {
+ from: "assets/*",
+ to: "assets/[name][ext][query]",
+ },
+ {
+ from: "manifest*.xml",
+ to: "[name]" + "[ext]",
+ transform(content) {
+ if (dev) {
+ return content;
+ } else {
+ return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
+ }
+ },
+ },
+ ],
+ }),
+ ],
+ devServer: {
+ headers: {
+ "Access-Control-Allow-Origin": "*",
+ },
+ server: {
+ type: "https",
+ options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
+ },
+ port: process.env.npm_package_config_dev_server_port || 3000,
+ },
+ };
+
+ return config;
+};
diff --git a/Samples/auth/Outlook-Add-in-SSO-NAA/.eslintrc.json b/Samples/auth/Outlook-Add-in-SSO-NAA/.eslintrc.json
new file mode 100644
index 000000000..e406c09e8
--- /dev/null
+++ b/Samples/auth/Outlook-Add-in-SSO-NAA/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+ "plugins": [
+ "office-addins"
+ ],
+ "extends": [
+ "plugin:office-addins/recommended"
+ ]
+}
diff --git a/Samples/auth/Outlook-Add-in-SSO-NAA/.gitignore b/Samples/auth/Outlook-Add-in-SSO-NAA/.gitignore
new file mode 100644
index 000000000..6c0c9d898
--- /dev/null
+++ b/Samples/auth/Outlook-Add-in-SSO-NAA/.gitignore
@@ -0,0 +1,528 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+[Ll]ogs/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# Visual Studio 2017 auto generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# ASP.NET Scaffolding
+ScaffoldingReadMe.txt
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.log
+*.tlog
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Coverlet is a free, cross platform Code Coverage Tool
+coverage*.json
+coverage*.xml
+coverage*.info
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio 6 auto-generated project file (contains which files were open etc.)
+*.vbp
+
+# Visual Studio 6 workspace and project file (working project files containing files to include in project)
+*.dsw
+*.dsp
+
+# Visual Studio 6 technical files
+*.ncb
+*.aps
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# Visual Studio History (VSHistory) files
+.vshistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/
+
+# Fody - auto-generated XML schema
+FodyWeavers.xsd
+
+# VS Code files for those working on multiple tools
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+# Local History for Visual Studio Code
+.history/
+
+# Windows Installer files from build outputs
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# JetBrains Rider
+*.sln.iml
+
+########################################################################
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/Samples/auth/Outlook-Add-in-SSO-NAA/README.md b/Samples/auth/Outlook-Add-in-SSO-NAA/README.md
new file mode 100644
index 000000000..b66054987
--- /dev/null
+++ b/Samples/auth/Outlook-Add-in-SSO-NAA/README.md
@@ -0,0 +1,135 @@
+---
+page_type: sample
+urlFragment: outlook-add-in-sso-naa
+products:
+- office-outlook
+languages:
+- javascript
+extensions:
+ contentType: samples
+ technologies:
+ - Add-ins
+ createdDate: "03/19/2024 10:00:00 AM"
+description: "This sample shows how to implement SSO in an Outlook add-in by using nested app authentication."
+---
+
+# Outlook add-in with SSO using nested app authentication (preview)
+
+## Summary
+
+This sample shows how to use MSAL.js nested app authentication (NAA) in an Outlook Add-in to access Microsoft Graph APIs for the signed in user. The sample displays the signed in user's name and email. It also inserts the names of files from the user's Microsoft OneDrive account into a new message body.
+
+IMPORTANT: Nested app authentication is currently in preview. To try this feature you need to join the [Microsoft 365 Insider Program](https://insider.microsoft365.com/join) and choose the **Beta Channel**. Don't use NAA in production add-ins. We invite you to try out NAA in test or development environments and welcome feedback on your experience through GitHub (see https://github.com/OfficeDev/office-js/issues).
+
+## Features
+
+- Use MSAL.js NAA to get an access token to call Microsoft Graph APIs.
+- Use MSAL.js NAA to get information about the user signed in to Office.
+
+## Applies to
+
+- Outlook on Windows build 16.0.17531.20000 or later.
+- Outlook on Mac build 16.85.24040319 or later.
+- Outlook in a browser.
+
+## Prerequisites
+
+- Office connected to a Microsoft 365 subscription (including Office on the web).
+- You need to join the [Microsoft 365 Insider Program](https://insider.microsoft365.com/join) to use the NAA preview features. Choose the **Beta Channel** insider level.
+- [Node.js](https://nodejs.org/) version 16 or greater.
+- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) version 8 or greater.
+
+## Build and run the solution
+
+### Create an application registration
+
+1. Go to the [Azure portal - App registrations](https://go.microsoft.com/fwlink/?linkid=2083908) page to register your app.
+1. Sign in with the ***admin*** credentials to your Microsoft 365 tenancy. For example, **MyName@contoso.onmicrosoft.com**.
+1. Select **New registration**. On the **Register an application** page, set the values as follows.
+
+ - Set **Name** to `Outlook-Add-in-SSO-NAA`.
+ - Set **Supported account types** to **Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)**.
+ - In the **Redirect URI** section, ensure that **Single-page application (SPA)** is selected in the drop down and then set the URI to `brk-multihub://localhost:3000`.
+ - Select **Register**.
+
+1. On the **Outlook-Add-in-SSO-NAA** page, copy and save the value for the **Application (client) ID**. You'll use it in the next section.
+1. Select the link to modify redirect URIs which should appear as **0 web, 1 spa, 0 public client**.
+
+ 
+
+1. In the **Single-page application Redirect URIs** section, select **Add URI**.
+
+ 
+
+1. Enter the new URI value `https://localhost:3000/taskpane.html` and select **Save**.
+
+ 
+
+For more information on how to register your application, see [Register an application with the Microsoft Identity Platform](https://learn.microsoft.com/graph/auth-register-app-v2).
+
+### Configure the sample
+
+1. Clone or download this repository.
+1. From the command line, or a terminal window, go to the root folder of this sample at `/samples/auth/Outlook-Add-in-SSO-NAA`.
+1. Open the `src/taskpane/authConfig.ts` file.
+1. Replace the placeholder "Enter_the_Application_Id_Here" with the Application ID that you copied.
+1. Save the file.
+
+## Run the sample
+
+1. Run the following commands.
+
+ `npm install`
+ `npm run start`
+
+ This will start the web server and sideload the add-in to Outlook.
+
+1. In Outlook, compose a new email message.
+1. On the ribbon for the message, look for the **Show task pane** button and select it.
+1. When the task pane opens, there are two buttons: **Get user data** and **Get user files**.
+1. To see the signed in user's name and email, select **Get user data**.
+1. To insert the first 10 filenames from the signed in user's Microsoft OneDrive, select **Get user files**.
+
+You will be prompted to consent to the scopes the sample needs when you select the buttons.
+
+## Debugging steps
+
+You can debug the sample by opening the project in VS Code.
+
+1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut **Ctrl+Shift+D**.
+1. Select the launch configuration you want from the **Configuration dropdown** in the **Run and Debug** view. For example, **Outlook Desktop (Edge Chromium)**.
+1. Start your debug session with **F5**, or **Run > Start Debugging**.
+
+
+
+For more information on debugging with VS Code, see [Debugging](https://code.visualstudio.com/Docs/editor/debugging). For more information on debugging Office Add-ins in VS Code, see [Debug Office Add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 (Chromium-based)](https://learn.microsoft.com/office/dev/add-ins/testing/debug-desktop-using-edge-chromium)
+
+## Key parts of this sample
+
+The `src/taskpane/authConfig.ts` file contains the MSAL code for configuring and using NAA. It contains a class named AccountManager which manages getting user account and token information.
+
+- The `initialize` function is called from Office.onReady to configure and intitialize MSAL to use NAA.
+- The `ssoGetToken` function gets an access token for the signed in user to call Microsoft Graph APIs.
+- The `ssoGetUserIdentity` function gets the account information of the signed in user. This can be used to get user details such as name and email.
+
+The `src/taskpane/taskpane.ts` file contains code that runs when the user chooses buttons in the task pane. They use the AccountManager class to get tokens or user information depending on which button is chosen.
+
+The `src/taskpane/msgraph-helper.ts` file contains code to construct and make a REST call to the Microsoft Graph API.
+
+## Security reporting
+
+If you find a security issue with our libraries or services, report the issue to [secure@microsoft.com](mailto:secure@microsoft.com) with as much detail as you can provide. Your submission may be eligible for a bounty through the [Microsoft Bounty](https://aka.ms/bugbounty) program. Don't post security issues to [GitHub Issues](https://github.com/AzureAD/microsoft-authentication-library-for-android/issues) or any other public site. We'll contact you shortly after receiving your issue report. We encourage you to get new security incident notifications by visiting [Microsoft technical security notifications](https://technet.microsoft.com/security/dd252948) to subscribe to Security Advisory Alerts.
+
+## Questions and feedback
+
+- Did you experience any problems with the sample? [Create an issue](https://github.com/OfficeDev/Office-Add-in-samples/issues/new/choose) and we'll help you out.
+- We'd love to get your feedback about this sample. Go to our [Office samples survey](https://aka.ms/OfficeSamplesSurvey) to give feedback and suggest improvements.
+- For general questions about developing Office Add-ins, go to [Microsoft Q&A](https://learn.microsoft.com/answers/topics/office-js-dev.html) using the office-js-dev tag.
+
+## Copyright
+
+Copyright (c) 2024 Microsoft Corporation. All rights reserved.
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+
+