You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Automatically save passwords in Microsoft Edge WebView2
3
+
description: Learn how to enable WebView2 to save passwords when users sign in using your add-in.
4
+
ms.localizationpriority: medium
5
+
ms.date: 03/10/2025
6
+
---
7
+
8
+
# Enable automatic password saving in Microsoft Edge WebView2
9
+
10
+
Most browsers can automatically save passwords on behalf of the user when they sign in. This helps users manage passwords in a secure environment. Microsoft Edge WebView2 also supports automatic password saving. When your add-in is loaded in Microsoft Office on Windows, Webview2 hosts your add-in. To enable automatic password saving, add HTML input controls for the username and password, as shown in the following HTML.
In the button click event handler for the sign-in button, call the authentication library of your choice to sign in the user. Once the sign-in is complete, redirect to a new web page. When WebView2 sees the redirect, and the username and password, it prompts the user to offer to automatically save the credentials. The following code shows how to handle the sign-in button click event.
25
+
26
+
```javascript
27
+
asyncfunctionbtnSignIn() {
28
+
// Get the username and password credentials entered by the user.
// Sign in the user. This is a placeholder for the actual sign-in logic.
34
+
awaitsignInUser(username, pwd);
35
+
36
+
// Redirect to a success page to trigger the password autosave.
37
+
window.location.href="/home.html";
38
+
}
39
+
catch (error) {
40
+
console.error("Sign in failed: "+ error);
41
+
return;
42
+
}
43
+
}
44
+
```
45
+
46
+
## How the user manages passwords
47
+
48
+
When the user enters a new password in your add-in, and your add-in redirects to a new web page, WebView2 asks the user if they want to save their username and password. The next time your add-in prompts for credentials, WebView2 automatically enters the user's account information.
49
+
50
+
:::image type="content" source="../images/edge-webview2-automatic-save-passwords.png" alt-text="The dialog from WebView2 prompting the user if they want to save their username and password.":::
51
+
52
+
Users remove saved passwords by deleting The WebView2 local cache folder at `%LOCALAPPDATA%\Microsoft\Office\16.0\Wef\webview2\`. If your add-in relies on automatically saving passwords, you should document this folder location so users can remove their passwords.
Copy file name to clipboardExpand all lines: docs/develop/teams-toolkit-overview.md
+11-4Lines changed: 11 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Create Office Add-in projects using Teams Toolkit
3
3
description: Learn how to create Office Add-in projects using Teams Toolkit.
4
-
ms.date: 02/12/2025
4
+
ms.date: 04/10/2025
5
5
ms.localizationpriority: high
6
6
---
7
7
@@ -38,8 +38,6 @@ Install the latest version of Teams Toolkit into Visual Studio Code as described
38
38
39
39
:::image type="content" source="../images/teams-toolkit-create-office-task-pane-capability.png" alt-text="The options in the App Features Using an Office Add-in dropdown menu. The option 'Task pane' is selected.":::
40
40
41
-
1. If you're making an Outlook add-in, the toolkit shows a **Programming Language** dropdown menu. Select either **TypeScript** or **JavaScript**. (For Excel, PowerPoint, and Word add-ins, a TypeScript project is always created.)
42
-
1. If you're making an Outlook add-in, the toolkit shows a **Framework** dropdown menu. Select **Default** or **React**. (For Excel, PowerPoint, and Word add-ins, a default project is always created.)
43
41
1. In the **Workspace Folder** dialog that opens, select the folder where you want to create the project.
44
42
1. Give a name to the project (with no spaces) when prompted. Teams Toolkit will create the project with basic files and scaffolding. It will then open the project *in a second Visual Studio Code window*. Close the original Visual Studio Code window.
45
43
@@ -72,8 +70,14 @@ Install the latest version of Teams Toolkit into Visual Studio Code as described
72
70
73
71
1. To stop debugging and uninstall the add-in, select **Run** | **Stop Debugging** in Visual Studio Code.
74
72
73
+
> [!NOTE]
74
+
> If the preceding step seems to have no effect, uninstall the add-in by opening a **TERMINAL** in Visual Studio Code, and then running the command `npm run stop`. Closing the server window doesn't reliably stop the server and closing the Office application doesn't reliably cause Office to unacquire the add-in.
75
+
75
76
### Sideload in Outlook
76
77
78
+
> [!NOTE]
79
+
> If your development computer is Windows, be sure that your Outlook client is classic Outlook for Windows, not [new Outlook on Windows](https://support.microsoft.com/office/656bb8d9-5a60-49b2-a98b-ba7822bc7627). There is currently a bug that prevents add-ins created with the Teams Toolkit from properly sideloading in new Outlook for Windows or in Outlook on the web.
80
+
77
81
1. Ensure that your account in your Microsoft 365 developer tenancy is also an email account in desktop Outlook. If it isn't, follow the guidance in [Add an email account to Outlook](https://support.microsoft.com/office/e9da47c4-9b89-4b49-b945-a204aeea6726).
78
82
1.**Close Outlook desktop**.
79
83
1. In Visual Studio Code, open Teams Toolkit.
@@ -91,6 +95,9 @@ Install the latest version of Teams Toolkit into Visual Studio Code as described
91
95
92
96
1. To stop debugging and uninstall the add-in, select **Run** | **Stop Debugging** in Visual Studio Code.
93
97
94
-
## Developing your project
98
+
> [!NOTE]
99
+
> If the preceding step seems to have no effect, uninstall the add-in by opening a **TERMINAL** in Visual Studio Code, and then running the command `npm run stop`. Closing the server window doesn't reliably stop the server and closing the Office application doesn't reliably cause Office to unacquire the add-in.
100
+
101
+
## Develop your project
95
102
96
103
Now you can change and develop the project. In places where the guidance in the Office Add-ins documentation branches depending on what type of manifest is being used, be sure to follow the guidance for the unified manifest.
0 commit comments