feat(KNO-7528): add MsTeamsAuthButton #339

mattmikolay · 2025-01-06T15:38:00Z

This PR adds MsTeamsAuthButton, the first React component of our new TeamsKit library. Microsoft Teams admins can use this button to initiate the Microsoft OAuth flow. When authorization is successfully granted, the Knock tenant will be associated with the admin user’s Microsoft tenant.

The example app shown in the Loom video will be added in a future PR.

Video

https://www.loom.com/share/f09240c1cf5148908d7a49cda4d38977?sid=aee718a2-ce0a-4a6f-a74a-1ba22c28c088

vercel · 2025-01-06T15:38:03Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
in-app-messages-example	❌ Failed (Inspect)			Jan 10, 2025 6:48pm
javascript-nextjs-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 6:48pm
javascript-slack-connect-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 6:48pm
javascript-slack-kit-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 6:48pm

linear · 2025-01-06T15:38:03Z

KNO-7528 [React SDK]: Add MSTeamsAuthButton

changeset-bot · 2025-01-06T15:38:04Z

🦋 Changeset detected

Latest commit: c661d85

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@knocklabs/react-core	Minor
@knocklabs/client	Minor
@knocklabs/react	Minor
@knocklabs/expo	Patch
@knocklabs/react-native	Patch
client-example	Patch
nextjs-example	Patch
@knocklabs/expo-example	Patch
@knocklabs/react-native-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

mattmikolay · 2025-01-06T15:38:16Z

feat(KNO-7600): add example app for MS Teams components #340
feat(KNO-7528): add MsTeamsAuthButton #339 👈 (View in Graphite)
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

mattmikolay · 2025-01-06T15:49:55Z

package.json

@@ -9,6 +9,7 @@
    "build:packages": "turbo build --filter=\"./packages/*\"",
    "dev": "turbo dev",
    "dev:next-example": "turbo dev --filter=\"./packages/*\" --filter=nextjs-example",
+    "dev:packages": "turbo dev --filter=\"./packages/*\"",


Personally, I find this yarn run dev:packages command useful, but I’m happy to remove it if others don’t find it useful.

packages/client/src/clients/ms-teams/index.ts

mattmikolay · 2025-01-06T16:06:43Z

packages/react-core/src/modules/ms-teams/context/KnockMSTeamsProvider.tsx

+
+export interface KnockMSTeamsProviderProps {
+  knockMSTeamsChannelId: string;
+  tenantId: string;


The corresponding prop in SlackKit is named tenant rather than tenantId:

javascript/packages/react-core/src/modules/slack/context/KnockSlackProvider.tsx

Lines 23 to 26 in 6d27a00

export interface KnockSlackProviderProps {

knockSlackChannelId: string;

tenant: string;

}

tenantId feels more descriptive to me, but I’m okay with keeping the naming consistent.

The reason is legacy, we also use tenant (sans Id) elsewhere to describe a tenant id, like the data we pass to a workflow trigger, because originally tenants as a concept were a simple string rather than an object under the hood. I don't have a sense for what's less confusing for users - consistency, or more specific naming. I imagine if you're implementing both SlackKit and MsTeams it will be slightly confusing to use different params for the same argument, but I don't feel strongly about keeping it as tenant because I do think tenantId is more clear. @cjbell might have a stronger opinion one way or another.

mattmikolay · 2025-01-06T16:26:14Z

packages/react/src/modules/ms-teams/components/MSTeamsAuthButton/styles.css

+  --rtk-error-red: rgba(205, 123, 46, 1);
+}
+
+.rtk-connect__button {


This stylesheet is identical to the one we use with SlackAuthButton, but class names are prefixed with rtk- (for “React TeamsKit”) instead of rsk- (for “React SlackKit”).

packages/react-core/src/modules/ms-teams/hooks/useMSTeamsAuth.ts

mattmikolay · 2025-01-10T18:43:32Z

Merge activity

Jan 10, 1:43 PM EST: A user started a stack merge that includes this pull request via Graphite.
Jan 10, 1:44 PM EST: Graphite rebased this pull request as part of a merge.
Jan 10, 1:48 PM EST: A user merged this pull request with Graphite.

vercel bot had a problem deploying to Preview – in-app-messages-example January 6, 2025 15:38 Failure

mattmikolay changed the title ~~Add MSTeamsAuthButton~~ feat(KNO-7528): add MSTeamsAuthButton Jan 6, 2025

vercel bot deployed to Preview – javascript-slack-kit-example January 6, 2025 15:40 View deployment

vercel bot deployed to Preview – javascript-nextjs-example January 6, 2025 15:40 View deployment

vercel bot deployed to Preview – javascript-slack-connect-example January 6, 2025 15:42 View deployment

mattmikolay commented Jan 6, 2025

View reviewed changes

packages/client/src/clients/ms-teams/index.ts Outdated Show resolved Hide resolved

mattmikolay commented Jan 6, 2025

View reviewed changes

vercel bot had a problem deploying to Preview – in-app-messages-example January 6, 2025 16:11 Failure

vercel bot deployed to Preview – javascript-slack-connect-example January 6, 2025 16:12 View deployment

vercel bot deployed to Preview – javascript-nextjs-example January 6, 2025 16:13 View deployment

vercel bot deployed to Preview – javascript-slack-kit-example January 6, 2025 16:14 View deployment

mattmikolay commented Jan 6, 2025

View reviewed changes

vercel bot had a problem deploying to Preview – in-app-messages-example January 6, 2025 17:13 Failure

vercel bot deployed to Preview – javascript-slack-kit-example January 6, 2025 17:15 View deployment

vercel bot deployed to Preview – javascript-nextjs-example January 6, 2025 17:15 View deployment

vercel bot deployed to Preview – javascript-slack-connect-example January 6, 2025 17:17 View deployment

vercel bot had a problem deploying to Preview – in-app-messages-example January 6, 2025 21:43 Failure

graphite-app bot reviewed Jan 6, 2025

View reviewed changes

packages/react-core/src/modules/ms-teams/hooks/useMSTeamsAuth.ts Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview – in-app-messages-example January 6, 2025 21:46 Failure

vercel bot deployed to Preview – javascript-nextjs-example January 6, 2025 21:48 View deployment

vercel bot deployed to Preview – javascript-slack-kit-example January 6, 2025 21:48 View deployment

vercel bot deployed to Preview – javascript-slack-connect-example January 6, 2025 21:50 View deployment

vercel bot had a problem deploying to Preview – in-app-messages-example January 7, 2025 18:26 Failure

vercel bot deployed to Preview – javascript-slack-kit-example January 7, 2025 18:28 View deployment

vercel bot deployed to Preview – javascript-nextjs-example January 7, 2025 18:28 View deployment

vercel bot had a problem deploying to Preview – in-app-messages-example January 8, 2025 23:39 Failure

vercel bot deployed to Preview – javascript-slack-kit-example January 8, 2025 23:41 View deployment

vercel bot deployed to Preview – javascript-nextjs-example January 8, 2025 23:41 View deployment

mattmikolay changed the title ~~feat(KNO-7528): add MSTeamsAuthButton~~ feat(KNO-7528): add MsTeamsAuthButton Jan 8, 2025

vercel bot deployed to Preview – javascript-slack-connect-example January 8, 2025 23:43 View deployment

mattmikolay added 17 commits January 10, 2025 18:44

Add MSTeamsAuthButton

110ae58

Revert yarn.lock changes

d6307e1

Rename msTeams directory to ms-teams

31860d9

Use stopColor not stop-color

2fb7237

Add missing theme import

4db1c17

Use existing TENANT_OBJECT_COLLECTION constant

1fc1dc8

Update comment

6a66f81

Rename /disconnect endpoint to /revoke_access

d5f9ddb

Use conditional invocation

6c66cfd

Use ternary operator

e5a0658

Consolidate types

15909a7

Fix use of revokeAccessToken

3748edd

Update call to authCheck

94f189a

Fix error handling in useMSTeamsConnectionStatus

ccc2794

Remove env var for redirect uri

964d2b0

Add changeset

dc5b72a

Rename MSTeams to MsTeams

c661d85

mattmikolay force-pushed the mattmik-kno-7528-react-sdk-add-msteamsauthbutton branch from 8db9f4a to c661d85 Compare January 10, 2025 18:44

vercel bot had a problem deploying to Preview – in-app-messages-example January 10, 2025 18:44 Failure

vercel bot deployed to Preview – javascript-slack-connect-example January 10, 2025 18:46 View deployment

vercel bot deployed to Preview – javascript-nextjs-example January 10, 2025 18:46 View deployment

vercel bot deployed to Preview – javascript-slack-kit-example January 10, 2025 18:48 View deployment

mattmikolay merged commit 013ad8d into main Jan 10, 2025
6 of 7 checks passed

mattmikolay deleted the mattmik-kno-7528-react-sdk-add-msteamsauthbutton branch January 10, 2025 18:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(KNO-7528): add MsTeamsAuthButton #339

feat(KNO-7528): add MsTeamsAuthButton #339

mattmikolay commented Jan 6, 2025 •

edited

Loading

vercel bot commented Jan 6, 2025 •

edited

Loading

linear bot commented Jan 6, 2025

changeset-bot bot commented Jan 6, 2025 •

edited

Loading

mattmikolay commented Jan 6, 2025 •

edited

Loading

mattmikolay Jan 6, 2025

mattmikolay Jan 6, 2025

meryldakin Jan 7, 2025

mattmikolay Jan 6, 2025

mattmikolay commented Jan 10, 2025 •

edited

Loading

	export interface KnockSlackProviderProps {
	knockSlackChannelId: string;
	tenant: string;
	}

feat(KNO-7528): add MsTeamsAuthButton #339

feat(KNO-7528): add MsTeamsAuthButton #339

Conversation

mattmikolay commented Jan 6, 2025 • edited Loading

Video

vercel bot commented Jan 6, 2025 • edited Loading

linear bot commented Jan 6, 2025

changeset-bot bot commented Jan 6, 2025 • edited Loading

🦋 Changeset detected

mattmikolay commented Jan 6, 2025 • edited Loading

mattmikolay Jan 6, 2025

Choose a reason for hiding this comment

mattmikolay Jan 6, 2025

Choose a reason for hiding this comment

meryldakin Jan 7, 2025

Choose a reason for hiding this comment

mattmikolay Jan 6, 2025

Choose a reason for hiding this comment

mattmikolay commented Jan 10, 2025 • edited Loading

Merge activity

mattmikolay commented Jan 6, 2025 •

edited

Loading

vercel bot commented Jan 6, 2025 •

edited

Loading

changeset-bot bot commented Jan 6, 2025 •

edited

Loading

mattmikolay commented Jan 6, 2025 •

edited

Loading

mattmikolay commented Jan 10, 2025 •

edited

Loading