Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Pre fill form fields in <SignIn/> and <SignUp/> by desiprisg · Pull Request #1701 · clerk/javascript · GitHub
Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Pre fill form fields in <SignIn/> and <SignUp/> by desiprisg · Pull Request #1701 · clerk/javascript · GitHub
Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Pre fill form fields in <SignIn/> and <SignUp/> by desiprisg · Pull Request #1701 · clerk/javascript · GitHub
Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Pre fill form fields in <SignIn/> and <SignUp/> by desiprisg · Pull Request #1701 · clerk/javascript · GitHub
Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Pre fill form fields in <SignIn/> and <SignUp/> by desiprisg · Pull Request #1701 · clerk/javascript · GitHub
Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Pre fill form fields in <SignIn/> and <SignUp/> by desiprisg · Pull Request #1701 · clerk/javascript · GitHub
Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Pre fill form fields in <SignIn/> and <SignUp/> by desiprisg · Pull Request #1701 · clerk/javascript · GitHub
Skip to content

Pre fill form fields in <SignIn/> and <SignUp/> - #1701

Merged
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms
Sep 28, 2023
Merged

Pre fill form fields in <SignIn/> and <SignUp/>#1701
SokratisVidros merged 4 commits into
mainfrom
george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms

Conversation

@desiprisg

@desiprisgdesiprisg commented Sep 11, 2023

Copy link
Copy Markdown
Contributor

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR implements the functionality of prefilling specific input fields of <SignIn/> and <SignUp/> with the initialValues prop.
The switching mechanism in <SignIn/> is smart, meaning that if you switch from email to phone, the phone number will be prefilled with the initialValues.phoneNumber value initially.

Screen.Recording.2023-09-12.at.12.09.18.mov
Screen.Recording.2023-09-12.at.12.08.36.mov
Screen.Recording.2023-09-12.at.12.07.48.mov

@changeset-bot

changeset-botBot commented Sep 11, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 775100b

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

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsMinor
@clerk/clerk-reactMinor
@clerk/typesMinor
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
gatsby-plugin-clerkPatch
@clerk/nextjsPatch
@clerk/remixPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/clerk-sdk-nodePatch

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

Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/react/src/components/uiComponents.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code ownerSeptember 18, 2023 12:23
@desiprisg

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

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

PackageVersion
@clerk/backend0.29.1-snapshot.10bf647
@clerk/chrome-extension0.4.0-snapshot.10bf647
@clerk/clerk-js4.58.0-snapshot.10bf647
@clerk/clerk-expo0.19.2-snapshot.10bf647
@clerk/fastify0.6.7-snapshot.10bf647
gatsby-plugin-clerk4.4.8-snapshot.10bf647
@clerk/localizations1.26.0-snapshot.10bf647
@clerk/nextjs4.24.0-snapshot.10bf647
@clerk/clerk-react4.25.0-snapshot.10bf647
@clerk/remix2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node4.12.6-snapshot.10bf647
@clerk/shared0.22.1-snapshot.10bf647
@clerk/types3.52.0-snapshot.10bf647

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.29.1-snapshot.10bf647
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.0-snapshot.10bf647
# @clerk/clerk-js
npm i @clerk/clerk-js@4.58.0-snapshot.10bf647
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.2-snapshot.10bf647
# @clerk/fastify
npm i @clerk/fastify@0.6.7-snapshot.10bf647
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.8-snapshot.10bf647
# @clerk/localizations
npm i @clerk/localizations@1.26.0-snapshot.10bf647
# @clerk/nextjs
npm i @clerk/nextjs@4.24.0-snapshot.10bf647
# @clerk/clerk-react
npm i @clerk/clerk-react@4.25.0-snapshot.10bf647
# @clerk/remix
npm i @clerk/remix@2.10.3-snapshot.10bf647
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.6-snapshot.10bf647
# @clerk/shared
npm i @clerk/shared@0.22.1-snapshot.10bf647
# @clerk/types
npm i @clerk/types@3.52.0-snapshot.10bf647

Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments, but looks good 🎉

Comment threadpackages/types/src/clerk.ts
Comment threadpackages/react/src/types.ts Outdated
Comment threadpackages/clerk-js/src/utils/url.ts
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/utils/url.ts

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! Added some questions!

Comment threadpackages/clerk-js/src/core/clerk.ts
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29CompareSeptember 22, 2023 11:33

@anagstefanagstef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007CompareSeptember 25, 2023 16:25

@SokratisVidrosSokratisVidros left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@desiprisg looking good.

Could you please add unit tests for SignInStart and SignUpStart new behavior?

@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07CompareSeptember 28, 2023 14:46
feat(types): Remove web3WalletAddress from SignUpInitialValues
chore(repo): Changeset
feat(clerk-js): Add initial values to SignUpContinue
chore(clerk-js): Address PR comments
chore(clerk-js): Avoid initialValues optional chaining
feat(clerk-js): Include initialValues from query params in sign in/up context
feat(clerk-js,clerk-react,types): Add initialValues support to redirectToSignIn/Up methods
feat(clerk-react): Add initialValues to <RedirectToSignIn/> and <RedirectToSignUp/>
fix(clerk-js): Use router queryString for initialValues
chore(types): Remove unused RedirectToProps type
refactor(clerk-js): Extract and reuse query param initial value logic
fix(clerk-js): Prioritize initial values from query params
fix(clerk-react): Fix initialValues type for <RedirectToSignUp/>
@desiprisg
desiprisgforce-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100bCompareSeptember 28, 2023 16:38
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
@SokratisVidros
SokratisVidros removed this pull request from the merge queue due to a manual request Sep 28, 2023
@SokratisVidros
SokratisVidros added this pull request to the merge queue Sep 28, 2023
Merged via the queue into main with commit 14825b9Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookieclerk-cookie mentioned this pull request Sep 28, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerkclerk locked as resolved and limited conversation to collaborators Sep 28, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@desiprisg@clerk-cookie@SokratisVidros@anagstef@panteliselef