fix(clerk-js): Respect props passed to `buildSignInUrl` and `buildSignUpUrl` #3361

nikosdouvlis · 2024-05-10T12:46:26Z

Description

This PR updates the buildSignInUrl and buildSignUpUrl methods to correctly propagate the redirect props via URL search params. This allows the SignInButton and SignUpButton components to be configurable via their props as well.

Additionally, this PR:

simplifies the RedirectUrl class by dropping the concern of appending params to the URL. This is now handled by the low-level buildUrl util
it fixes an issues when serializing initial values in the buildSignInUrl and buildSignUpUrl helpers. Search params need to be snake_cased in order to be respected
buildUrl now accepts a new hashSearchParams prop and it snake_cases all search params by default

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-05-10T12:46:30Z

🦋 Changeset detected

Latest commit: a4ef2c6

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

This PR includes changesets to release 7 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/clerk-react	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/elements	Patch
@clerk/nextjs	Patch
@clerk/remix	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

nikosdouvlis · 2024-05-10T12:47:15Z

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

@@ -180,25 +203,6 @@ export const stripSameOrigin = (url: URL, baseUrl: URL): string => {
  return sameOrigin ? stripOrigin(url) : `${url}`;
 };

-export const appendAsQueryParams = (


Killed this as we no longer need it

nikosdouvlis · 2024-05-10T12:48:02Z

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

      dummyUrlForHash.searchParams.append(key, val as string);
    }

-    // Keep just the pathname and the search
+    // Merge search params from the hashSearchParams object


All search params appended by clerk-js are snake_cased. Moved the logic here to make sure that the caller has to remember/think about this detail

nikosdouvlis · 2024-05-10T12:49:15Z

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

-    // Keep just the pathname and the search
+    // Merge search params from the hashSearchParams object
+    if (hashSearchParams) {
+      const paramsArr = Array.isArray(hashSearchParams) ? hashSearchParams : [hashSearchParams];


Previously, the util supported passing hash params as a string only but the best way here is to simply pass a URLSearchParams object instead. I added the new functionality but kept the old one, will refactor all usages to the new format in a new PR

nikosdouvlis · 2024-05-10T12:50:00Z

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

    return Object.fromEntries(
      Object.entries({ ...this.fromSearchParams }).filter(([key]) => RedirectUrls.preserved.includes(key)),
    );
  }

+  #flattenAll() {


I decided to stick with a more verbose approach here instead of a a more complex loop of some sort, let me know if you this is is too much

brkalow

👏

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

packages/clerk-js/src/ui/router/RouteContext.tsx

packages/clerk-js/src/utils/__tests__/url.test.ts

packages/react/src/components/__tests__/SignInButton.test.tsx

packages/react/src/components/__tests__/SignUpButton.test.tsx

.changeset/wet-peaches-grow.md

desiprisg · 2024-05-13T09:04:48Z

!preview

clerk-cookie · 2024-05-13T09:09:37Z

Hey @desiprisg, your preview is available.

Status	Preview	Updated (UTC)
🍪 Deployed	Visit preview	May 13, 2024 09:09 AM

desiprisg · 2024-05-13T09:10:56Z

!snapshot

clerk-cookie · 2024-05-13T09:14:44Z

Hey @desiprisg - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	1.0.8-snapshot.v99372db
@clerk/clerk-js	5.2.4-snapshot.v99372db
@clerk/elements	0.3.4-snapshot.v99372db
@clerk/clerk-expo	1.0.8-snapshot.v99372db
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/nextjs	5.0.8-snapshot.v99372db
@clerk/clerk-react	5.0.5-snapshot.v99372db
@clerk/remix	4.0.6-snapshot.v99372db

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/chrome-extension

npm i @clerk/chrome-extension@1.0.8-snapshot.v99372db --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.2.4-snapshot.v99372db --save-exact

@clerk/elements

npm i @clerk/elements@0.3.4-snapshot.v99372db --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.0.8-snapshot.v99372db --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.0.8-snapshot.v99372db --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.0.5-snapshot.v99372db --save-exact

@clerk/remix

npm i @clerk/remix@4.0.6-snapshot.v99372db --save-exact

…Url across navigations

desiprisg

LGTM but let's state that this won't work with core-2 app and core-1 account portal.

dimkl · 2024-05-13T13:20:46Z

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

+  #buildUrl = (
+    key: 'signInUrl' | 'signUpUrl',
+    options: RedirectOptions,
+    _initValues?: Record<string, string>,


🙃 The _ prefix in parameters is used to mark unused parameters of a function. Are we sure about this naming?

fix(clerk-react): Correctly map redirect prop names

d0f85b1

nikosdouvlis marked this pull request as draft May 10, 2024 12:46

clerk-cookie added clerk-js react labels May 10, 2024

nikosdouvlis commented May 10, 2024

View reviewed changes

nikosdouvlis requested a review from desiprisg May 10, 2024 13:15

nikosdouvlis force-pushed the nikos/sdk-1720-forceredirecturl-is-not-working-when-using-signinbutton branch from 7697adb to e607864 Compare May 10, 2024 14:07

nikosdouvlis marked this pull request as ready for review May 10, 2024 14:07

nikosdouvlis force-pushed the nikos/sdk-1720-forceredirecturl-is-not-working-when-using-signinbutton branch 2 times, most recently from 03ee073 to 7cd88d6 Compare May 10, 2024 14:23

brkalow approved these changes May 10, 2024

View reviewed changes

nikosdouvlis force-pushed the nikos/sdk-1720-forceredirecturl-is-not-working-when-using-signinbutton branch 2 times, most recently from a73f777 to b73c18e Compare May 10, 2024 22:16

LekoArts changed the title ~~Respect props passed to buildSignInUrl and buildSignUpUrl~~ fix(clerk-js): Respect props passed to buildSignInUrl and buildSignUpUrl May 13, 2024

LekoArts requested changes May 13, 2024

View reviewed changes

nikosdouvlis force-pushed the nikos/sdk-1720-forceredirecturl-is-not-working-when-using-signinbutton branch from b73c18e to 99372db Compare May 13, 2024 08:50

nikosdouvlis requested a review from LekoArts May 13, 2024 08:51

desiprisg assigned nikosdouvlis May 13, 2024

fix(clerk-js): Respect props passed to buildSignInUrl and buildSignUp…

a4ef2c6

…Url across navigations

nikosdouvlis force-pushed the nikos/sdk-1720-forceredirecturl-is-not-working-when-using-signinbutton branch from 99372db to a4ef2c6 Compare May 13, 2024 09:18

LekoArts approved these changes May 13, 2024

View reviewed changes

desiprisg approved these changes May 13, 2024

View reviewed changes

nikosdouvlis merged commit bcbb2c9 into main May 13, 2024
10 checks passed

nikosdouvlis deleted the nikos/sdk-1720-forceredirecturl-is-not-working-when-using-signinbutton branch May 13, 2024 13:12

clerk-cookie mentioned this pull request May 13, 2024

Version Packages #3370

Merged

dimkl reviewed May 13, 2024

View reviewed changes

LekoArts mentioned this pull request May 15, 2024

forceRedirectUrl is not working when using SignInButton #3325

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(clerk-js): Respect props passed to `buildSignInUrl` and `buildSignUpUrl` #3361

fix(clerk-js): Respect props passed to `buildSignInUrl` and `buildSignUpUrl` #3361

nikosdouvlis commented May 10, 2024 •

edited

Loading

changeset-bot bot commented May 10, 2024 •

edited

Loading

nikosdouvlis May 10, 2024

nikosdouvlis May 10, 2024

nikosdouvlis May 10, 2024

nikosdouvlis May 10, 2024

desiprisg May 13, 2024

brkalow left a comment

desiprisg commented May 13, 2024

clerk-cookie commented May 13, 2024 •

edited

Loading

desiprisg commented May 13, 2024

clerk-cookie commented May 13, 2024

desiprisg left a comment

dimkl May 13, 2024

fix(clerk-js): Respect props passed to buildSignInUrl and buildSignUpUrl #3361

fix(clerk-js): Respect props passed to buildSignInUrl and buildSignUpUrl #3361

Conversation

nikosdouvlis commented May 10, 2024 • edited Loading

Description

Checklist

Type of change

changeset-bot bot commented May 10, 2024 • edited Loading

🦋 Changeset detected

nikosdouvlis May 10, 2024

Choose a reason for hiding this comment

nikosdouvlis May 10, 2024

Choose a reason for hiding this comment

nikosdouvlis May 10, 2024

Choose a reason for hiding this comment

nikosdouvlis May 10, 2024

Choose a reason for hiding this comment

desiprisg May 13, 2024

Choose a reason for hiding this comment

brkalow left a comment

Choose a reason for hiding this comment

desiprisg commented May 13, 2024

clerk-cookie commented May 13, 2024 • edited Loading

desiprisg commented May 13, 2024

clerk-cookie commented May 13, 2024

desiprisg left a comment

Choose a reason for hiding this comment

dimkl May 13, 2024

Choose a reason for hiding this comment

fix(clerk-js): Respect props passed to `buildSignInUrl` and `buildSignUpUrl` #3361

fix(clerk-js): Respect props passed to `buildSignInUrl` and `buildSignUpUrl` #3361

nikosdouvlis commented May 10, 2024 •

edited

Loading

changeset-bot bot commented May 10, 2024 •

edited

Loading

clerk-cookie commented May 13, 2024 •

edited

Loading