feat(clerk-js): Add ability to set active organization by slug #3825

wobsoriano · 2024-07-25T20:57:01Z

Description

This PR introduces ability to set an active organization by slug and updates existing org tests to use a proper Org ID format (org_*).

setActive({ organization: 'some-cool-slug' })

Fixes ORGS-17

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-07-25T20:57:04Z

🦋 Changeset detected

Latest commit: 3483068

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

This PR includes changesets to release 18 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/astro	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch
@clerk/themes	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

packages/clerk-js/src/core/clerk.ts

izaaklauer

Looking good I think!

I wonder if there are any tests we could add for passing a slug into setActive.

packages/clerk-js/src/core/clerk.ts

chore(clerk-js): Remove deprecated test text chore(clerk-js): Simplify organization slug or id checking chore(clerk-js): Clean up org id condition chore(clerk-js): Use updated or current session when checking for org id test(clerk-js): Update org IDs in tests to use correct format chore(clerk-js): Use organization id instead of org membership id test(clerk-js): Add organization id checker test test(clerk-js): Test setting active organization by slug test(clerk-js): Move new test to last of setActive

izaaklauer

Overall this looks good to me!

🔧 As a part of this PR, I think we should also update the docs for SetActiveParams to clarify that it can take a slug.

packages/clerk-js/src/utils/organization.ts

izaaklauer · 2024-07-29T18:31:17Z

packages/clerk-js/src/core/clerk.ts

+      if (isOrganizationId(organizationIdOrSlug!)) {
+        newSession.lastActiveOrganizationId = organizationIdOrSlug || null;
+      } else {
+        const matchingOrganization = newSession.user.organizationMemberships.find(


I have two concerns here, borne of my own experience:

1: 🤔 How confident are we that newSession.user.organizationMemberships will always present and populated in this case? I don't think you need to await anything to get access to setActive and call it, so I could imagine a scenario where we haven't yet completed the backend call to /tokens. But I may be missing something!

2: 🤔 Even if we can depend on newSession being populated, this smells to me like it's being fed via client piggybacking, and i've heard that we'd rather make API calls for the data that we need explicitly rather than rely on client piggybacking. But again, I maybe misunderstanding something!

I'd be happy to pair and trace to find those answers with you @wobsoriano . And I think it's likely that someone with more experience may know the answer to these off-hand - they strike me as foundational-sdk-philosophy questions 😄

I happened to chat with @BRKalow , and I got my answers!

1: The magic here is that, when someone calls useClerk, they're getting IsomorphicClerk, who'se implementation of setActive is here:

javascript/packages/react/src/isomorphicClerk.ts

Lines 602 to 608 in 427fcde

setActive = ({ session, organization, beforeEmit }: SetActiveParams): Promise<void> => {

if (this.clerkjs) {

return this.clerkjs.setActive({ session, organization, beforeEmit });

} else {

return Promise.reject();

}

};

If clerk hasn't loaded the client by the time the user calls setActive, it'll return return Promise.reject();. And if clerk has loaded, we'll have that session data. So this is safe?

2: This isn't client piggybacking supplying this data. Client piggybacking is us returning the latest client data on api calls other than the explicit call to load the client, but it's the explicit call that we're making when clerk loads.

This is a good client piggybacking intro. Thanks izaak!

Co-authored-by: Izaak Lauer <[email protected]>

…when setting active org

LekoArts · 2024-07-30T13:17:51Z

packages/clerk-js/src/core/clerk.ts

-      newSession.lastActiveOrganizationId = organizationId || null;
+      const organizationIdOrSlug = typeof organization === 'string' ? organization : organization?.id;
+
+      if (isOrganizationId(organizationIdOrSlug!)) {


I'd probably opt for removing the ! and add falsy handling to isOrganizationId + add tests for passing in undefined

Co-authored-by: Izaak Lauer <[email protected]>

wobsoriano requested a review from izaaklauer July 25, 2024 20:57

clerk-cookie added the clerk-js label Jul 25, 2024

wobsoriano commented Jul 25, 2024

View reviewed changes

packages/clerk-js/src/core/clerk.ts Outdated Show resolved Hide resolved

wobsoriano commented Jul 25, 2024

View reviewed changes

packages/clerk-js/src/core/clerk.ts Show resolved Hide resolved

izaaklauer reviewed Jul 25, 2024

View reviewed changes

packages/clerk-js/src/core/clerk.ts Outdated Show resolved Hide resolved

packages/clerk-js/src/core/clerk.ts Show resolved Hide resolved

wobsoriano changed the title ~~Add ability to set active organization by slug~~ feat(core): Add ability to set active organization by slug Jul 26, 2024

wobsoriano changed the title ~~feat(core): Add ability to set active organization by slug~~ feat(clerk-js): Add ability to set active organization by slug Jul 26, 2024

wobsoriano force-pushed the rob/brand-218-accept-slug-from-setactive branch from 3cba27b to ea72bc2 Compare July 26, 2024 16:12

wobsoriano added 2 commits July 26, 2024 09:22

chore(clerk-js): Add changeset

7c61adf

wobsoriano force-pushed the rob/brand-218-accept-slug-from-setactive branch from 5c86472 to 7c61adf Compare July 26, 2024 16:23

wobsoriano marked this pull request as ready for review July 26, 2024 17:12

izaaklauer reviewed Jul 29, 2024

View reviewed changes

chore(clerk-js): Update organization ID utility function description

3414e6f

Co-authored-by: Izaak Lauer <[email protected]>

clerk-cookie added the types label Jul 29, 2024

chore(clerk-js,types): Document SetActiveParams type to include slug …

3aae4eb

…when setting active org

wobsoriano force-pushed the rob/brand-218-accept-slug-from-setactive branch from 2dd0d19 to 3aae4eb Compare July 29, 2024 19:43

chore: Update changeset

fdb2c08

izaaklauer approved these changes Jul 29, 2024

View reviewed changes

wobsoriano requested review from panteliselef and LekoArts July 30, 2024 03:29

LekoArts reviewed Jul 30, 2024

View reviewed changes

wobsoriano added 2 commits July 30, 2024 06:31

chore(clerk-js): Handle falsy values when checking organization ID

a9c1051

chore(clerk-js): Format function definition

3483068

LekoArts approved these changes Jul 31, 2024

View reviewed changes

LekoArts merged commit 80e6477 into main Jul 31, 2024
18 checks passed

LekoArts deleted the rob/brand-218-accept-slug-from-setactive branch July 31, 2024 07:18

clerk-cookie mentioned this pull request Jul 31, 2024

ci(repo): Version packages #3830

Merged

BRKalow pushed a commit that referenced this pull request Aug 1, 2024

feat(clerk-js): Add ability to set active organization by slug (#3825)

cfac5e8

Co-authored-by: Izaak Lauer <[email protected]>

wobsoriano added a commit that referenced this pull request Aug 1, 2024

feat(clerk-js): Add ability to set active organization by slug (#3825)

282ba80

Co-authored-by: Izaak Lauer <[email protected]>

wobsoriano mentioned this pull request Aug 1, 2024

Update setActive occurrences to state that org slug is accepted clerk/clerk-docs#1328

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(clerk-js): Add ability to set active organization by slug #3825

feat(clerk-js): Add ability to set active organization by slug #3825

wobsoriano commented Jul 25, 2024 •

edited

Loading

changeset-bot bot commented Jul 25, 2024 •

edited

Loading

izaaklauer left a comment

izaaklauer left a comment

izaaklauer Jul 29, 2024 •

edited

Loading

izaaklauer Jul 29, 2024 •

edited

Loading

izaaklauer Jul 29, 2024

wobsoriano Jul 29, 2024

LekoArts Jul 30, 2024

wobsoriano Jul 30, 2024

	setActive = ({ session, organization, beforeEmit }: SetActiveParams): Promise<void> => {
	if (this.clerkjs) {
	return this.clerkjs.setActive({ session, organization, beforeEmit });
	} else {
	return Promise.reject();
	}
	};

feat(clerk-js): Add ability to set active organization by slug #3825

feat(clerk-js): Add ability to set active organization by slug #3825

Conversation

wobsoriano commented Jul 25, 2024 • edited Loading

Description

Checklist

Type of change

changeset-bot bot commented Jul 25, 2024 • edited Loading

🦋 Changeset detected

izaaklauer left a comment

Choose a reason for hiding this comment

izaaklauer left a comment

Choose a reason for hiding this comment

izaaklauer Jul 29, 2024 • edited Loading

Choose a reason for hiding this comment

izaaklauer Jul 29, 2024 • edited Loading

Choose a reason for hiding this comment

izaaklauer Jul 29, 2024

Choose a reason for hiding this comment

wobsoriano Jul 29, 2024

Choose a reason for hiding this comment

LekoArts Jul 30, 2024

Choose a reason for hiding this comment

wobsoriano Jul 30, 2024

Choose a reason for hiding this comment

wobsoriano commented Jul 25, 2024 •

edited

Loading

changeset-bot bot commented Jul 25, 2024 •

edited

Loading

izaaklauer Jul 29, 2024 •

edited

Loading

izaaklauer Jul 29, 2024 •

edited

Loading