Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Webauthn support #870

Draft
wants to merge 100 commits into
base: 0.48
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
100 commits
Select commit Hold shift + click to select a range
698eb5f
Add init setup for webauthn recipe
deepjyoti30-st Dec 19, 2024
c4397f2
Define recipe methods to make them override-able
deepjyoti30-st Dec 19, 2024
04a6d99
Add component override definition
deepjyoti30-st Dec 19, 2024
b7baba2
Add definition of prebuiltui
deepjyoti30-st Dec 19, 2024
ebcbc17
Add more changes for supporting feature components
deepjyoti30-st Dec 23, 2024
13e68ad
Add some fixes for webauthn
deepjyoti30-st Dec 23, 2024
3826230
Undo a change for made for testing
deepjyoti30-st Dec 23, 2024
3eb3f40
Add fix for making continue with passkey component show up
deepjyoti30-st Dec 23, 2024
1155318
Update the continue with passwordless button text
deepjyoti30-st Dec 24, 2024
f9331e0
Update the play details for signup with passkey
deepjyoti30-st Dec 24, 2024
ff08dd7
Add some fixes for the webauthn sign up /in functionality
deepjyoti30-st Dec 24, 2024
93023f8
Add support for passing isSignUp as a property in preload checks func…
deepjyoti30-st Dec 24, 2024
0d3b409
Add support for a proper sign up theme component
deepjyoti30-st Dec 24, 2024
b6b7ce3
Add init support for using FormBase for rendering the sign up form
deepjyoti30-st Dec 26, 2024
5065b04
Add more fixes for properly rendering the full page passkey page
deepjyoti30-st Dec 26, 2024
d9f77f7
Add support for reusing auth style components in webauthn full pages
deepjyoti30-st Dec 26, 2024
d51fd35
Add support for recover account button in sign up for webauthn
deepjyoti30-st Dec 26, 2024
2a9f4c3
Add support for continue without passkey link below continue button
deepjyoti30-st Dec 26, 2024
17b43ef
Make continue button uppercase for webauthn signup
deepjyoti30-st Dec 26, 2024
bc37a5b
Make resetFactorList a supported prop for component props
deepjyoti30-st Dec 26, 2024
64da711
Add fixes for making the sign up component buttons work properly
deepjyoti30-st Dec 26, 2024
7f35b15
Make continue without passkey a separate component
deepjyoti30-st Dec 26, 2024
ea1051d
Make the form on submit function re-usable
deepjyoti30-st Dec 27, 2024
436a99c
Add support for rendering the confirmation view in sign up for passkey
deepjyoti30-st Dec 27, 2024
cd4e11d
Add support for showing the continue with part in the intermediate step
deepjyoti30-st Dec 27, 2024
5707a18
Add support for passkey feature blocks
deepjyoti30-st Dec 27, 2024
41a83fe
Finish the UI implementation of the passkey confirmation component
deepjyoti30-st Dec 27, 2024
db6ca4b
Add updated callAPI functions for signup
deepjyoti30-st Dec 27, 2024
a60197d
Add support for handling recoverable errors in the UI
deepjyoti30-st Dec 30, 2024
212bb2a
Add support for handling all scenarios of signup flow
deepjyoti30-st Dec 30, 2024
9a8242a
Add support for sign in functionality
deepjyoti30-st Jan 2, 2025
70ab209
Refactor the code to create SignInTheme
deepjyoti30-st Jan 2, 2025
de98ff4
Add fixes for making sign in work properly for passkey
deepjyoti30-st Jan 2, 2025
ffec16d
Add support for Recover Account form component in webauthn
deepjyoti30-st Jan 2, 2025
52e6685
Fix the width of sub header for account recovery form
deepjyoti30-st Jan 2, 2025
fd8a5d9
Add support for sending recovery email for webauthn
deepjyoti30-st Jan 3, 2025
700809f
Add init support for a recovery using token feature
deepjyoti30-st Jan 7, 2025
e3a6d63
Add support for rendering passkey link form
deepjyoti30-st Jan 7, 2025
0404d22
Add fixes for properly showing the create a passkey form in token rec…
deepjyoti30-st Jan 13, 2025
e591acf
Add support for parsing email to be read from query in recovery flow
deepjyoti30-st Jan 13, 2025
6d2700d
Add support for account recovery success screen
deepjyoti30-st Jan 13, 2025
f61ec69
Add support for redirecting to sign in page on recovery success
deepjyoti30-st Jan 13, 2025
efff4bc
Add support for getting register options on load
deepjyoti30-st Jan 13, 2025
2e35f22
Add support for handling fetch errors while recovery registration opt…
deepjyoti30-st Jan 14, 2025
bb17066
Add support for showing caution on signup page for email
deepjyoti30-st Jan 14, 2025
e6f63ad
Update stories/allrecipes.stories.tsx
deepjyoti30-st Jan 15, 2025
5c317b6
Update lib/ts/recipe/webauthn/components/themes/translations.ts
deepjyoti30-st Jan 15, 2025
53dc48a
Update lib/ts/recipe/webauthn/components/themes/signUp/recoverAccount…
deepjyoti30-st Jan 15, 2025
afc087b
Update lib/ts/recipe/webauthn/components/themes/signUp/recoverAccount…
deepjyoti30-st Jan 15, 2025
c304741
Merge branch 'feat/webauthn/base' of github.com-supertokens:supertoke…
deepjyoti30-st Jan 15, 2025
b983a3e
Add some fixes for requested changes
deepjyoti30-st Jan 15, 2025
01324d4
Add a merge fix
deepjyoti30-st Jan 15, 2025
b418d2c
Refactor formBase functions to use handleCallAPI
deepjyoti30-st Jan 15, 2025
fb7ecc2
Move svg components to assets directory
deepjyoti30-st Jan 15, 2025
ae49de0
Move more svg components to assets
deepjyoti30-st Jan 15, 2025
8c47428
Add more fixes based on requested changes
deepjyoti30-st Jan 15, 2025
4138be6
Use CSS variables for re-usable colors
deepjyoti30-st Jan 15, 2025
e9378b2
Add fixes for passkey feature blocks not rendering
deepjyoti30-st Jan 16, 2025
ce414be
Fix build issues
deepjyoti30-st Jan 17, 2025
5476719
Add init changes to refactor recover account email to be a separate f…
deepjyoti30-st Jan 20, 2025
7ca8eac
Add support for recovery email being a separate route on its own
deepjyoti30-st Jan 20, 2025
0d69bad
Add support for properly redirecting on recover account click
deepjyoti30-st Jan 20, 2025
caddefe
Add support for considering the expiresAt field while recovering account
deepjyoti30-st Jan 21, 2025
e1eab89
Add basic tests, mocks and helpers for webauthn signup
deepjyoti30-st Jan 22, 2025
e9694cc
Add webauthn mock with testContext and more tests
deepjyoti30-st Jan 23, 2025
e83124b
Add more signup tests for webauthn
deepjyoti30-st Jan 24, 2025
099ae3b
Add support for not requiring email for sign in
deepjyoti30-st Jan 27, 2025
f81fa58
Add mocks for webauthn sign in and in react 16 examples
deepjyoti30-st Jan 27, 2025
4fb94f1
Add init tests for sign in for webauthn
deepjyoti30-st Jan 28, 2025
8a149f9
Add test for checking general error on sign in
deepjyoti30-st Jan 28, 2025
3b100bc
Add support for proper e2e testing for the sign in functionality of p…
deepjyoti30-st Jan 30, 2025
59724d5
Add recovery email related helpers and init test
deepjyoti30-st Jan 31, 2025
03608e3
Add tests for various scenarios for email recovery
deepjyoti30-st Feb 3, 2025
a8c67a6
Add more tests for recovery email sending flow
deepjyoti30-st Feb 3, 2025
25d2833
Add proper e2e tests for signup
deepjyoti30-st Feb 5, 2025
4fde11d
Add support for handling recovery token flow
deepjyoti30-st Feb 5, 2025
706a671
Add support for testing sending recovery token properly
deepjyoti30-st Feb 7, 2025
d81b685
Add test for checking recovery with token
deepjyoti30-st Feb 10, 2025
ef0c66b
Add test to test recovery of account using token
deepjyoti30-st Feb 10, 2025
e3eb497
Add test for checking invalid recovery token
deepjyoti30-st Feb 10, 2025
465d7d2
Add support for testing register options throwing error for recovery …
deepjyoti30-st Feb 11, 2025
ffa8a07
Add tests and cleanup for recovery with token
deepjyoti30-st Feb 12, 2025
8812532
Add fix based on updated web-js method types
deepjyoti30-st Feb 17, 2025
e7eedab
Add support for showing error on invalid credentials on signin attempt
deepjyoti30-st Feb 17, 2025
20116d5
Add fix for handling invalid credentials error properly
deepjyoti30-st Feb 17, 2025
7d71500
Add support for handling email already exists in signup
deepjyoti30-st Feb 18, 2025
ec7b7f3
Add test for checking existing user sign up flow
deepjyoti30-st Feb 19, 2025
12006e0
Add support for handling invalid options error
deepjyoti30-st Feb 19, 2025
1f964cc
Add support for showing error indicating passkey is not supported
deepjyoti30-st Feb 20, 2025
7e73653
Add tests for checking passkey not supported in UI
deepjyoti30-st Feb 20, 2025
8fe9623
Add test for invalid options error showing an UI error in signin
deepjyoti30-st Feb 20, 2025
f84c3c0
Add init support for showing passkey not supported in browser
deepjyoti30-st Feb 21, 2025
0d83666
Add support for showing passkey not supported in recover flow
deepjyoti30-st Feb 21, 2025
f3f214e
Add support for not allowing email to be empty in signup
deepjyoti30-st Feb 24, 2025
81fe4d8
Add test for checking whether email exists or not
deepjyoti30-st Feb 24, 2025
b703ef2
Add tests for checking passkey not supported by browser
deepjyoti30-st Feb 25, 2025
735bc6a
Add support for hiding back button if only one recipe is enabled in w…
deepjyoti30-st Feb 25, 2025
48a7aac
Add some component fixes for the original factor IDs being passed
deepjyoti30-st Feb 25, 2025
d29dba7
Add test for checking back button not shown if only one recipe is ena…
deepjyoti30-st Feb 26, 2025
99a3459
Add support for rendering icon in buttons and use it for passkey
deepjyoti30-st Feb 26, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add support for showing caution on signup page for email
  • Loading branch information
deepjyoti30-st committed Jan 14, 2025
commit bb1706617f2d03de6f03a3729de63b755483847b
95 changes: 49 additions & 46 deletions lib/ts/recipe/webauthn/components/themes/signUp/signUpForm.tsx
Original file line number Diff line number Diff line change
@@ -64,52 +64,55 @@ export const SignUpFormInner = withOverride(
);

return (
<FormBase
clearError={props.clearError}
onFetchError={props.onFetchError}
onError={props.onError}
formFields={[
{
id: "email",
label: "",
labelComponent: (
<div data-supertokens="formLabelWithLinkWrapper">
<Label value={"WEBAUTHN_SIGN_UP_LABEL"} data-supertokens="emailInputLabel" />
<a
onClick={() => props.setActiveScreen(SignUpScreen.RecoverAccount)}
data-supertokens="link linkButton formLabelLinkBtn recoverAccountTrigger">
{t("WEBAUTHN_RECOVER_ACCOUNT_LABEL")}
</a>
</div>
),
optional: false,
autofocus: true,
placeholder: "",
autoComplete: "email",
// We are using the default validator that allows any string
validate: defaultEmailValidator,
},
]}
buttonLabel={"WEBAUTHN_EMAIL_CONTINUE_BUTTON"}
onSuccess={onEmailContinueSuccess}
callAPI={async (formFields) => {
const email = formFields.find((field) => field.id === "email")?.value;
if (email === undefined) {
throw new STGeneralError("GENERAL_ERROR_EMAIL_UNDEFINED");
}

// We do not want the form to make the API call since we have
// an intermediary step here so we will just mock an OK status
// to render the next step.
return {
status: "OK",
email,
};
}}
validateOnBlur={false}
showLabels={true}
footer={props.footer || defaultFooter}
/>
<div data-supertokens="signUpFormInnerContainer">
<div data-supertokens="cautionMessage">{t("WEBAUTHN_SIGN_UP_CAUTION_MESSAGE_LABEL")}</div>
<FormBase
clearError={props.clearError}
onFetchError={props.onFetchError}
onError={props.onError}
formFields={[
{
id: "email",
label: "",
labelComponent: (
<div data-supertokens="formLabelWithLinkWrapper">
<Label value={"WEBAUTHN_SIGN_UP_LABEL"} data-supertokens="emailInputLabel" />
<a
onClick={() => props.setActiveScreen(SignUpScreen.RecoverAccount)}
data-supertokens="link linkButton formLabelLinkBtn recoverAccountTrigger">
{t("WEBAUTHN_RECOVER_ACCOUNT_LABEL")}
</a>
</div>
),
optional: false,
autofocus: true,
placeholder: "",
autoComplete: "email",
// We are using the default validator that allows any string
validate: defaultEmailValidator,
},
]}
buttonLabel={"WEBAUTHN_EMAIL_CONTINUE_BUTTON"}
onSuccess={onEmailContinueSuccess}
callAPI={async (formFields) => {
const email = formFields.find((field) => field.id === "email")?.value;
if (email === undefined) {
throw new STGeneralError("GENERAL_ERROR_EMAIL_UNDEFINED");
}

// We do not want the form to make the API call since we have
// an intermediary step here so we will just mock an OK status
// to render the next step.
return {
status: "OK",
email,
};
}}
validateOnBlur={false}
showLabels={true}
footer={props.footer || defaultFooter}
/>
</div>
);
}
);
15 changes: 15 additions & 0 deletions lib/ts/recipe/webauthn/components/themes/styles.css
Original file line number Diff line number Diff line change
@@ -25,6 +25,21 @@
cursor: pointer;
}

[data-supertokens~="signUpFormInnerContainer"] [data-supertokens~="cautionMessage"] {
padding: 14px;
background: #ff95001a;
color: #7c603e;
font-family: Arial;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
border-radius: 6px;
margin-bottom: 14px;
}

[data-supertokens~="passkeyConfirmationContainer"] [data-supertokens~="passkeyConfirmationEmailContainer"] {
padding-bottom: 5px;
}
2 changes: 2 additions & 0 deletions lib/ts/recipe/webauthn/components/themes/translations.ts
Original file line number Diff line number Diff line change
@@ -38,5 +38,7 @@ export const defaultTranslationsWebauthn = {
"The email used is invalid. Please try with a different email ID or reach out to support.",
WEBAUTHN_ACCOUNT_RECOVERY_INVALID_GENERATED_OPTIONS_ERROR: "Failed to recover account, please try again.",
WEBAUTHN_ACCOUNT_RECOVERY_FETCH_ERROR: "Something went wrong, please refresh the page or reach out to support.",
WEBAUTHN_SIGN_UP_CAUTION_MESSAGE_LABEL:
"Make sure your email is correct—we’ll use it to help you recover your account.",
},
};