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

@desiprisg desiprisg commented Sep 11, 2023 •
edited
Loading

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-bot Bot commented Sep 11, 2023 •
edited
Loading

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
Name Type
@clerk/clerk-js Minor
@clerk/clerk-react Minor
@clerk/types Minor
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch
gatsby-plugin-clerk Patch
@clerk/nextjs Patch
@clerk/remix Patch
@clerk/backend Patch
@clerk/fastify Patch
@clerk/localizations Patch
@clerk/clerk-sdk-node 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

@panteliselef
panteliselef self-requested a review September 11, 2023 15:14
@desiprisg
desiprisg marked this pull request as ready for review September 12, 2023 08:51
@desiprisg desiprisg self-assigned this Sep 12, 2023
panteliselef
panteliselef reviewed Sep 12, 2023
View reviewed changes
Comment thread packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment thread packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment thread packages/react/src/components/uiComponents.tsx Outdated
SokratisVidros
SokratisVidros reviewed Sep 12, 2023
View reviewed changes
Comment thread packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
Comment thread packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx Outdated
@desiprisg
desiprisg requested a review from a team as a code owner September 18, 2023 12:23
@desiprisg

desiprisg commented Sep 18, 2023

Copy link
Copy Markdown
Contributor Author

!snapshot

@clerk-cookie

clerk-cookie commented Sep 18, 2023

Copy link
Copy Markdown
Collaborator

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

Package Version
@clerk/backend 0.29.1-snapshot.10bf647
@clerk/chrome-extension 0.4.0-snapshot.10bf647
@clerk/clerk-js 4.58.0-snapshot.10bf647
@clerk/clerk-expo 0.19.2-snapshot.10bf647
@clerk/fastify 0.6.7-snapshot.10bf647
gatsby-plugin-clerk 4.4.8-snapshot.10bf647
@clerk/localizations 1.26.0-snapshot.10bf647
@clerk/nextjs 4.24.0-snapshot.10bf647
@clerk/clerk-react 4.25.0-snapshot.10bf647
@clerk/remix 2.10.3-snapshot.10bf647
@clerk/clerk-sdk-node 4.12.6-snapshot.10bf647
@clerk/shared 0.22.1-snapshot.10bf647
@clerk/types 3.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

panteliselef
panteliselef approved these changes Sep 19, 2023
View reviewed changes
Comment thread packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment thread packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx Outdated
Comment thread packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
panteliselef
panteliselef approved these changes Sep 22, 2023
View reviewed changes

@panteliselef panteliselef 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 thread packages/types/src/clerk.ts
Comment thread packages/react/src/types.ts Outdated
Comment thread packages/clerk-js/src/utils/url.ts
Comment thread packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
SokratisVidros
SokratisVidros suggested changes Sep 22, 2023
View reviewed changes
Comment thread packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
Comment thread packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment thread packages/clerk-js/src/utils/url.ts
anagstef
anagstef reviewed Sep 22, 2023
View reviewed changes

@anagstef anagstef 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 thread packages/clerk-js/src/core/clerk.ts
Comment thread packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment thread packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
@desiprisg
desiprisg force-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 4f7d454 to 7be7a29 Compare September 22, 2023 11:33
anagstef
anagstef approved these changes Sep 22, 2023
View reviewed changes

@anagstef anagstef 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.

💯

SokratisVidros
SokratisVidros approved these changes Sep 25, 2023
View reviewed changes

@SokratisVidros SokratisVidros 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 thread packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx Outdated
Comment thread packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@desiprisg
desiprisg force-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 6f4e7ec to 203e007 Compare September 25, 2023 16:25
SokratisVidros
SokratisVidros approved these changes Sep 25, 2023
View reviewed changes

@SokratisVidros SokratisVidros 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
desiprisg force-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from 64bea6c to abe1e07 Compare September 28, 2023 14:46
@desiprisg
feat(clerk-js): Prefill SignIn/Up components with initial values
144ce0e 
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
test(clerk-js): Add tests for the initialValues prop
c7f0305
@desiprisg
chore(clerk-js): Update changeset
775100b
@desiprisg
desiprisg force-pushed the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch from abe1e07 to 775100b Compare September 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 14825b9 Sep 28, 2023
@SokratisVidros
SokratisVidros deleted the george/usr-271-clerkjs-pre-fill-form-fields-in-signupsignin-forms branch September 28, 2023 21:17
@clerk-cookie clerk-cookie mentioned this pull request Sep 28, 2023
Merged
@clerk-cookie

clerk-cookie commented Sep 28, 2024

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.

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

Reviewers

@nikosdouvlis nikosdouvlis Awaiting requested review from nikosdouvlis
@alex-ntousias alex-ntousias Awaiting requested review from alex-ntousias
3 more reviewers
@panteliselef panteliselef panteliselef approved these changes
@SokratisVidros SokratisVidros SokratisVidros approved these changes
@anagstef anagstef anagstef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@desiprisg desiprisg

Labels

clerk-js react types

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

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