feat: mark Teams, TeamsMsal2 and Msal providers as deprecated in v2.x…

….x (#2232) * Mark MgtMsalProvider as deprecated. * Update MSAL2 in packages * Add MSAL 2 in samples * Update in root files * Storybook sign in to use MSAL 2 * Mark TeamsProvider as deprecated * Update usage of Teams to TeamsFx * Mark TeamsMsal2Provider as deprecated * Update TeamsMsal2 to TeamsFx
microsoftgraph · May 8, 2023 · 7b701d0 · 7b701d0
1 parent cea0986
commit 7b701d0
Show file tree

Hide file tree

Showing 21 changed files with 50 additions and 75 deletions.
diff --git a/.storybook/addons/signInAddon/signInAddon.js b/.storybook/addons/signInAddon/signInAddon.js
@@ -1,7 +1,7 @@
 import addons, { makeDecorator } from '@storybook/addons';
 import { Providers } from '../../../packages/mgt-element/dist/es6/providers/Providers';
 import { ProviderState } from '../../../packages/mgt-element/dist/es6/providers/IProvider';
-import { MsalProvider } from '../../../packages/providers/mgt-msal-provider/dist/es6/MsalProvider';
+import { Msal2Provider } from '../../../packages/providers/mgt-msal2-provider/dist/es6/Msal2Provider';
 import { MockProvider } from '../../../packages/mgt-element/dist/es6/mock/MockProvider';
 import { CLIENTID, SETPROVIDER_EVENT, GETPROVIDER_EVENT } from '../../env';
 
@@ -22,7 +22,7 @@ export const withSignIn = makeDecorator({
       if (_allow_signin) {
         const currentProvider = Providers.globalProvider;
         if (params.state === ProviderState.SignedIn && (!currentProvider || currentProvider === mockProvider)) {
-          Providers.globalProvider = new MsalProvider({
+          Providers.globalProvider = new Msal2Provider({
             clientId: CLIENTID
           });
         } else if (params.state !== ProviderState.SignedIn && currentProvider !== mockProvider) {

diff --git a/artifacts/install.ps1 b/artifacts/install.ps1
@@ -20,6 +20,6 @@ function Get-Packages {
   Write-Output $output
 }
 
-$packages = Get-Packages mgt-element mgt-msal-provider mgt-proxy-provider mgt-sharepoint-provider mgt-teams-provider mgt-components mgt mgt-react
+$packages = Get-Packages mgt-element mgt-msal2-provider mgt-proxy-provider mgt-sharepoint-provider mgt-teamsfx-provider mgt-components mgt mgt-react
 
 npm i $packages
diff --git a/auth.html b/auth.html
@@ -1,16 +1,9 @@
 <html>
   <head>
     <script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
-    <!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script>
-    <script>
-      mgt.TeamsProvider.handleAuth();
-    </script> -->
     <script type="module">
-      // import { TeamsProvider } from './packages/providers/mgt-teams-provider/dist/es6/TeamsProvider.js';
-      // TeamsProvider.handleAuth();
-
-      import { TeamsMsal2Provider } from './packages/providers/mgt-teams-msal2-provider/dist/es6/TeamsMsal2Provider.js';
-      TeamsMsal2Provider.handleAuth();
+      import { TeamsFxProvider } from './packages/providers/mgt-teamsfx-provider/dist/es6/TeamsFxProvider.js';
+      // TODO: show how to use TeamsFx in auth.
     </script>
   </head>
   <body>

diff --git a/index.html b/index.html
@@ -17,33 +17,6 @@
   </head>
 
   <body>
-    <!-- <mgt-teams-provider
-      client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
-      auth-popup-url="auth.html"
-    ></mgt-teams-provider> -->
-
-    <!-- <mgt-teams-msal2-provider
-      client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
-      scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
-      auth-popup-url="auth.html"
-    ></mgt-teams-msal2-provider> -->
-
-    <!-- Teams Msal2 provider in SSO mode (see "teams-sso-node" sample) -->
-    <!-- <mgt-teams-msal2-provider
-      client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
-      scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
-      auth-popup-url="auth.html"
-      sso-url="http://localhost:5000/api/token"
-      http-method="POST"
-    ></mgt-teams-msal2-provider> -->
-
-    <!-- <mgt-msal-provider
-      client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
-      scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
-      redirect-uri="http://localhost:3000"
-      depends-on="mgt-teams-provider"
-    ></mgt-msal-provider> -->
-
     <!-- <mgt-msal2-provider
       client-id="2dfea037-938a-4ed8-9b35-c05708a1b241"
       redirect-uri="http://localhost:3000"

diff --git a/packages/mgt-components/README.md b/packages/mgt-components/README.md
@@ -33,21 +33,21 @@ The components can be used on their own, but they are at their best when they ar
 1. Install the packages
 
     ```bash
-    npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal-provider
+    npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider
     ```
 
 1. Use components in your code
 
     ```html
     <script type="module">
       import {Providers} from '@microsoft/mgt-element';
-      import {MsalProvider} from '@microsoft/mgt-msal-provider';
+      import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
 
       // import the components
       import '@microsoft/mgt-components';
 
       // initialize the auth provider globally
-      Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
+      Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
     </script>
 
     <mgt-login></mgt-login>

diff --git a/packages/mgt-element/README.md b/packages/mgt-element/README.md
@@ -2,32 +2,32 @@
 
 [![npm](https://img.shields.io/npm/v/@microsoft/mgt-element?style=for-the-badge)](https://www.npmjs.com/package/@microsoft/mgt-element)
 
-The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph. 
+The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
 
 The `@microsoft/mgt-element` package contains all base classes that enable the providers and components to work together. Use this package to set the global provider, or to create your own providers and/or components that work with Microsoft Graph.
 
 [See docs for full documentation](https://aka.ms/mgt-docs)
 
 ## Set and use the global provider
 
-The `@microsoft/mgt-element` package exposes the `Providers` namespace that enables global usage of the authentication providers across your entire app. 
+The `@microsoft/mgt-element` package exposes the `Providers` namespace that enables global usage of the authentication providers across your entire app.
 
 This example illustrates how to instantiate a new provider (MsalProvider in this case) and use it across your app:
 
-1. Install the packages 
+1. Install the packages
 
     ```bash
-    npm install @microsoft/mgt-element @microsoft/mgt-msal-provider
+    npm install @microsoft/mgt-element @microsoft/mgt-msal2-provider
     ```
 
 1. Create the provider
 
     ```ts
     import {Providers} from '@microsoft/mgt-element';
-    import {MsalProvider} from '@microsoft/mgt-msal-provider';
+    import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
 
     // initialize the auth provider globally
-    Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
+    Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
     ```
 
 1. Use the provider to sign in and call the graph:

diff --git a/packages/mgt/README.md b/packages/mgt/README.md
@@ -51,12 +51,12 @@ You can use the components by referencing the loader directly (via unpkg), or in
 
 > NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 2.0.0 < 3.0.0`, omitting the `@2` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
 
-You can then start using the components in your html page. Here is a full working example with the Msal provider:
+You can then start using the components in your html page. Here is a full working example with the Msal2 provider:
 
 ```html
 <script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
 
-<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
+<mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
 
 <mgt-login></mgt-login>
 <mgt-agenda></mgt-agenda>
@@ -77,7 +77,7 @@ Now you can reference all components and providers at the page you are using:
 ```html
 <script type="module" src="node_modules/@microsoft/mgt/dist/es6/index.js"></script>
 
-<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
+<mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
 
 <mgt-login></mgt-login>
 <mgt-agenda></mgt-agenda>

diff --git a/packages/providers/mgt-msal-provider/src/MsalProvider.ts b/packages/providers/mgt-msal-provider/src/MsalProvider.ts
@@ -111,6 +111,7 @@ export interface MsalConfig extends MsalConfigBase {
 /**
  * Msal Provider using MSAL.js to aquire tokens for authentication
  *
+ * @deprecated in favor of Msal2Provider.
  * @export
  * @class MsalProvider
  * @extends {IProvider}

diff --git a/packages/providers/mgt-msal-provider/src/mgt-msal-provider.ts b/packages/providers/mgt-msal-provider/src/mgt-msal-provider.ts
@@ -11,6 +11,7 @@ import { MsalConfig, MsalProvider } from './MsalProvider';
 /**
  * Authentication Library Provider for Microsoft personal accounts
  *
+ * @deprecated in favor of MgtMsal2Provider.
  * @export
  * @class MgtMsalProvider
  * @extends {MgtBaseProvider}

diff --git a/packages/providers/mgt-teams-msal2-provider/README.md b/packages/providers/mgt-teams-msal2-provider/README.md
@@ -2,11 +2,14 @@
 
 [![npm](https://img.shields.io/npm/v/@microsoft/mgt-teams-msal2-provider?style=for-the-badge)](https://www.npmjs.com/package/@microsoft/mgt-teams-msal2-provider)
 
+
+⚠️⚠️⚠️ This package is no longer receiving new features and will only receive critical bug and security fixes. All new applications should use [`@microsoft/mgt-teamsfx-provider`](https://learn.microsoft.com/graph/toolkit/providers/teamsfx) instead. ⚠️⚠️⚠️
+
 The `@microsoft/mgt-teams-msal2-provider` package exposes the `TeamsMsal2Provider` class to be used inside your Microsoft Teams tab applications to authenticate users, to call Microsoft Graph, and to power the Microsoft Graph Toolkit components. The provider is built on top of [msal-browser](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser) and supports both the interactive sign in flow on the client and Single Sign-On (SSO) flow via your own backend. SSO mode is enabled by setting `ssoUrl` \ `sso-url` and requires a backend service to handle the on-behalf-of flow.
 
 [See the full documentation of the TeamsMsal2Provider](https://learn.microsoft.com/graph/toolkit/providers/teams-msal2)
 
-The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph. 
+The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
 
 ## Usage
 
@@ -51,15 +54,16 @@ The TeamsMsal2Provider requires the usage of the Microsoft Teams SDK which is no
 3. Alternatively, initialize the provider in html (only `client-id` and `auth-popup-url` is required):
 
     ```html
-    <script type="module" src="../node_modules/@microsoft/mgt-teams-provider/dist/es6/index.js" />
-
-    <mgt-teams-msal2-provider client-id="<YOUR_CLIENT_ID>"
-                        auth-popup-url="/AUTH-PATH"
-                        scopes="user.read,people.read..." 
-                        authority=""
-                        sso-url="/api/token" 
-                        http-method="POST">
-                        ></mgt-teams-provider>
+    <script type="module" src="../node_modules/@microsoft/mgt-teamsfx-provider/dist/es6/index.js" />
+
+    <mgt-teamsfx-provider
+        client-id="<YOUR_CLIENT_ID>"
+        auth-popup-url="/AUTH-PATH"
+        scopes="user.read,people.read..."
+        authority=""
+        sso-url="/api/token"
+        http-method="POST">
+    ></mgt-teamsfx-provider>
     ```
 
 See [provider usage documentation](https://learn.microsoft.com/graph/toolkit/providers) to learn about how to use the providers with the mgt components, to sign in/sign out, get access tokens, call Microsoft Graph, and more.

diff --git a/packages/providers/mgt-teams-msal2-provider/src/TeamsMsal2Provider.ts b/packages/providers/mgt-teams-msal2-provider/src/TeamsMsal2Provider.ts
@@ -147,6 +147,7 @@ export interface TeamsMsal2Config {
 /**
  * Enables authentication of Single page apps inside of a Microsoft Teams tab
  *
+ * @deprecated in favor of TeamsFxProvider.
  * @export
  * @class TeamsMsal2Provider
  * @extends {Msal2Provider}

diff --git a/packages/providers/mgt-teams-msal2-provider/src/mgt-teams-msal2-provider.ts b/packages/providers/mgt-teams-msal2-provider/src/mgt-teams-msal2-provider.ts
@@ -13,6 +13,7 @@ import { HttpMethod, TeamsMsal2Config, TeamsMsal2Provider } from './TeamsMsal2Pr
 /**
  * Authentication Library Provider for Microsoft Teams accounts
  *
+ * @deprecated in favor of MgtTeamsFxProvider.
  * @export
  * @class MgtTeamsMsal2Provider
  * @extends {MgtBaseProvider}

diff --git a/packages/providers/mgt-teams-provider/README.md b/packages/providers/mgt-teams-provider/README.md
@@ -2,13 +2,13 @@
 
 [![npm](https://img.shields.io/npm/v/@microsoft/mgt-teams-provider?style=for-the-badge)](https://www.npmjs.com/package/@microsoft/mgt-teams-provider)
 
-⚠️⚠️⚠️ This package is no longer receiving new features and will only receive critical bug and security fixes. All new applications should use [`@microsoft/mgt-teams-msal2-provider`](https://learn.microsoft.com/graph/toolkit/providers/teams-msal2) instead. ⚠️⚠️⚠️
+⚠️⚠️⚠️ This package is no longer receiving new features and will only receive critical bug and security fixes. All new applications should use [`@microsoft/mgt-teamsfx-provider`](https://learn.microsoft.com/graph/toolkit/providers/teamsfx) instead. ⚠️⚠️⚠️
 
 The `@microsoft/mgt-teams-provider` package exposes the `TeamsProvider` class to be used inside your Microsoft Teams tab applications to authenticate users, to call Microsoft Graph, and to power the mgt components. The provider is built on top of [msal.js](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core) and supports interactive authentication on the client via the Implicit Grant flow.
 
 For Single Sing-On (SSO) support or interactive authentication based on the more secure OAuth 2.0 Authorization Code Flow with PKCE, please use the [`@microsoft/mgt-teams-msal2-provider`](https://learn.microsoft.com/graph/toolkit/providers/teams-msal2) instead.
 
-The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph. 
+The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
 
 [See docs for full documentation of the TeamsProvider](https://learn.microsoft.com/graph/toolkit/providers/teams)
 
@@ -56,7 +56,7 @@ The TeamsProvider requires the usage of the Microsoft Teams SDK which is not aut
 
     <mgt-teams-provider client-id="<YOUR_CLIENT_ID>"
                         auth-popup-url="/AUTH-PATH"
-                        scopes="user.read,people.read..." 
+                        scopes="user.read,people.read..."
                         authority=""></mgt-teams-provider>
     ```
 

diff --git a/packages/providers/mgt-teams-provider/src/TeamsProvider.ts b/packages/providers/mgt-teams-provider/src/TeamsProvider.ts
@@ -102,6 +102,7 @@ export interface TeamsConfig {
 /**
  * Enables authentication of Single page apps inside of a Microsoft Teams tab
  *
+ * @deprecated in favor of TeamsFxProvider.
  * @export
  * @class TeamsProvider
  * @extends {MsalProvider}

diff --git a/packages/providers/mgt-teams-provider/src/mgt-teams-provider.ts b/packages/providers/mgt-teams-provider/src/mgt-teams-provider.ts
@@ -13,6 +13,7 @@ import { TeamsConfig, TeamsProvider } from './TeamsProvider';
 /**
  * Authentication Library Provider for Microsoft Teams accounts
  *
+ * @deprecated in favor of MgtTeamsFxProvider.
  * @export
  * @class MgtTeamsProvider
  * @extends {MgtBaseProvider}

diff --git a/samples/examples/login-redirect-nopopup.html b/samples/examples/login-redirect-nopopup.html
@@ -6,7 +6,7 @@
 </head>
 
 <body>
-	<mgt-msal-provider client-id="af4ad92c-e141-49ac-9d86-23af45007101"></mgt-msal-provider>
+	<mgt-msal2-provider client-id="af4ad92c-e141-49ac-9d86-23af45007101"></mgt-msal2-provider>
 
 	<mgt-login></mgt-login>
 

diff --git a/samples/examples/onboarding/index.html b/samples/examples/onboarding/index.html
@@ -7,7 +7,7 @@
     <script type="module" src="../../../packages/mgt/dist/es6/index.js"></script>
   </head>
   <body>
-    <mgt-msal-provider client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"></mgt-msal-provider>
+    <mgt-msal2-provider client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"></mgt-msal2-provider>
 
     <header>
       <img class="menu" src="./assets/header_menu.svg" />

diff --git a/samples/react-app/package.json b/samples/react-app/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@microsoft/mgt-element": "*",
     "@microsoft/mgt-react": "*",
-    "@microsoft/mgt-msal-provider": "*",
+    "@microsoft/mgt-msal2-provider": "*",
     "@webcomponents/webcomponentsjs": "2.2.10",
     "react": "^17.0.1",
     "react-app-polyfill": "1.0.1",

diff --git a/samples/react-app/src/index.tsx b/samples/react-app/src/index.tsx
@@ -5,7 +5,6 @@ import App from './App';
 import { Providers, MockProvider } from '@microsoft/mgt-element';
 
 // uncomment to use MSAL provider with your own ClientID (also comment out mock provider below)
-// import { MsalProvider } from '@microsoft/mgt-msal-provider';
 // Providers.globalProvider = new MsalProvider({ clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a' });
 
 Providers.globalProvider = new MockProvider(true);

diff --git a/samples/teams-tab/index.html b/samples/teams-tab/index.html
@@ -4,7 +4,7 @@
     <script src="../../packages/mgt/dist/es6/index.js"></script>
   </head>
   <body>
-    <mgt-teams-provider client-id="<CLIENT-ID>" auth-popup-url="auth.html"></mgt-teams-provider>
+    <mgt-teamsfx-provider client-id="<CLIENT-ID>" auth-popup-url="auth.html"></mgt-teamsfx-provider>
     <mgt-login></mgt-login>
     <mgt-agenda group-by-day></mgt-agenda>
   </body>