supertokens-auth-react

# Changelog All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) ## [unreleased] ## [0.49.1] - 2025-03-27 - Fixed a type issue making the WebauthnPreBuitlUI not produce a type error when added to the prebuiltUIList ## [0.49.0] - 2025-03-20 - Added the `Webauthn` recipe and prebuilt UI with passkey, webauthn-platform, and webauthn-resident support - Adds new colors to the palette - `--palette-caution`: Used for showing cautionary messages - `--palette-errorDark`: Used for showing error messages with a darker shade - `--palette-buttonGreyedOut`: Used in some disabled buttons - Updated User type to include webauthn as a possible login method. - Added `webauthn` as a possible factorid - Added support for FDI 4.1 ## [0.48.0] - 2024-10-07 ### Fixes - Fixed an issue where the `AuthPage` was using full-page redirects to navigate to the password reset page if both emailpassword and passwordless were enabled. ### Changes - Added the `OAuth2Provider` recipe - Changed the input types and default implementation of `AuthPageHeader` to show the client information in OAuth2 flows - Expanded an error message in `AuthPage` to help with common errors ### Breaking changes - Now only supporting FDI 3.1 and 4.0 (Node >= 21.0.0) - All `getRedirectionURL` functions now also get a new `tenantIdFromQueryParams` prop - This is used in OAuth2 + Multi-tenant flows. - This should be safe to ignore if: - You are not using those recipes - You have a custom `getTenantId` implementation - You are not customizing paths of the pages handled by SuperTokens. - This is used to keep the `tenantId` query param during internal redirections between pages handled by the SDK. - If you have custom paths, you should set the tenantId queryparam based on this. (See migrations below for more details) - Added a new `shouldTryLinkingToSessionUser` flag to sign in/up related function inputs: - No action is needed if you are not using MFA/session based account linking. - If you are implementing MFA: - Plase set this flag to `false` (or leave as undefined) during first factor sign-ins - Please set this flag to `true` for secondary factors. - Please forward this flag to the original implementation in any of your overrides. - Changed functions: - `EmailPassword`: - `signIn`, `signUp`: both override and callable functions - `ThirdParty`: - `getAuthorisationURLWithQueryParamsAndSetState`: both override and callable function - `redirectToThirdPartyLogin`: callable function takes this flag as an optional input (it defaults to false on the backend) - `Passwordless`: - Functions overrides: `consumeCode`, `resendCode`, `createCode`, `setLoginAttemptInfo`, `getLoginAttemptInfo` - Calling `createCode` and `setLoginAttemptInfo` take this flag as an optional input (it defaults to false on the backend) - Changed the default implementation of `getTenantId` to default to the `tenantId` query parameter (if present) then falling back to the public tenant instead of always defaulting to the public tenant - We now disable session based account linking in the magic link based flow in passwordless by default - This is to make it function more consistently instead of only working if the link was opened on the same device - You can override by overriding the `consumeCode` function in the Passwordless Recipe ### Migration #### tenantIdFromQueryParams in getRedirectionURL Before: ```ts EmailPassword.init({ async getRedirectionURL(context) { if (context.action === "RESET_PASSWORD") { return `/reset-password`; } return ""; }, }); ``` After: ```ts EmailPassword.init({ async getRedirectionURL(context) { return `/reset-password?tenantId=${context.tenantIdFromQueryParams}`; }, }); ``` #### Session based account linking for magic link based flows You can re-enable linking by overriding the `consumeCode` function in the passwordless recipe and setting `shouldTryLinkingToSessionUser` to `true`. ```ts Passwordless.init({ override: { functions: (original) => { return { ...original, consumeCode: async (input) => { // Please note that this is means that the session is required and will cause an error if it is not present return original.consumeCode({ ...input, shouldTryLinkingWithSessionUser: true }); }, }; }, }, }); ``` ## [0.47.1] - 2024-09-18 ### Fixes - Fixed an issue where we showed the "continue with passwordless" button during sign-in even if email-based passwordless was disabled by the tenant configuration. ## [0.47.0] - 2024-09-02 ### Breaking changes Redesigned the pre-built UI with a modern monochrome aesthetic, creating a cleaner and more unified visual experience. Please double check any custom styles you added still looks good with the new UI. ### Details - Changed a lot of the default styles to fit the new UI - `--palette-textTitle` changed from `rgb(34, 34, 34)` to `rgb(0, 0, 0)` - `--palette-textLabel` changed from rgb`(34, 34, 34)` to `rgb(0, 0, 0)` - `--palette-textInput` changed from `rgb(34, 34, 34)` to `rgb(0, 0, 0)` - `--palette-textPrimary` changed from `rgb(101, 101, 101)` to `rgb(128, 128, 128)` - `--palette-textLink` changed from `rgb(0, 118, 255)` to `rgb(0, 122, 255)` - `--palette-textGray` changed from `rgb(128, 128, 128)` to `rgb(54, 54, 54)` - Adjusted the layout of the provider buttons. Now: - The logo is aligned to the left, and the text is centered within the entire button, enhancing visual balance and consistency across different button text lengths. - The button now has a fixed height of 40px. - We add an animation to the button when hovering over it if the text is too long. - Changed the Email Icon used in the "Verify Email" UI - Changed the SMS Icon used in the "Link sent to phone" UI - Changed the button arrow icons - Updated some translation strings to fit the new UI - `EMAIL_VERIFICATION_SEND_TITLE` - `PWLESS_LINK_SENT_RESEND_DESC_END_EMAIL` ## [0.46.0] - 2024-08-26 ### Breaking changes - The prebuilt UI now clears the login attempt info if the stored data doesn't contain all the required properties. This should help migration from a custom UI to the prebuilt UI. - Changed `redirectToFactor` to accept an object instead of multiple arguments. - Changed `redirectToFactorChooser` to accept an object instead of multiple arguments. - Made MFA related screens do a success redirection if MFA is already completed and the `stepUp` query param is not set to `true`. - `redirectToFactorChooser` now accepts a `stepUp` option to set the `stepUp` query param. - `redirectToFactor` now accepts a `stepUp` option to set the `stepUp` query param. ### Fixes - Fixed an issue where the `Session` recipe was not allowed in the pre-built UI list (it's still a no-op, but it shouldn't be a type issue) ## [0.45.1] - 2024-08-09 ### Changes - Now we only update the session context if the object changes by value. This optimization should help reduce unnecessary re-renders. ## [0.45.0] - 2024-07-31 ### Breaking changes - Updated the font and font-weights in the default styles - We no longer load the Rubik font by default ### Fixes - Now the error prop should be updated in override components. ## [0.44.0] - 2024-07-15 - Removes the default `maxAgeInSeconds` value (previously 300 seconds) in EmailVerification Claim. If the claim value is true and `maxAgeInSeconds` is not provided, it will not be refreshed. ## [0.43.1] - 2024-07-15 - Fixes to e2e test ## [0.43.0] - 2024-06-25 ### Changes - Updated SAML third-party provider to use logo based on the provider name ## [0.42.3] - 2024-06-24 ### Changes - Now we only update the session context if the object changes by value. This optimization should help reduce unnecessary re-renders. ## [0.42.2] - 2024-05-29 ### Changes - Updating publish script to update to the lib on chromatic ## [0.42.1] - 2024-05-29 ### Changes - Re-built docs folder ## [0.42.0] - 2024-05-24 ### Breaking changes - Removed `ThirdPartyEmailPassword` and `ThirdPartyPasswordless` recipes. - `EmailPassword` recipe: - Removed embeddable components: `SignInUp`, `SignInAndUpTheme` - Removed overridable components: `EmailPasswordSignIn`, `EmailPasswordSignInFooter`, `EmailPasswordSignInHeader`, `EmailPasswordSignUp`, `EmailPasswordSignUpFooter`, `EmailPasswordSignUpHeader` - Moved `useShadowDom`, `defaultToSignUp`, `privacyPolicyLink`, `termsOfServiceLink` from the config to the root configuration passed to `SuperTokens.init`. - `Passwordless` recipe: - Removed embeddable components: `SignInUp` - Removed overrideable components: `PasswordlessSignInUpHeader_Override`, `PasswordlessSignInUpFooter_Override` - Removed the `guessInternationPhoneNumberFromInputPhoneNumber` configurable callback, since now the user sets if they are entering email or a phone number explicitly - Moved `useShadowDom`, `privacyPolicyLink`, `termsOfServiceLink` from the config to the root configuration passed to `SuperTokens.init`. - Changed the UX of the contactinfo entry form for `EMAIL_OR_PHONE` - Added `defaultToEmail` configuration option, which decides if the contact info input form starts in the email or phone state if the `contactMethod` is set to `EMAIL_OR_PHONE` - `ThirdParty` recipe: - Removed embeddable components: `SignInAndUp` - Removed overridable components: `ThirdPartySignInAndUpHeader`, `ThirdPartySignUpFooter` - Moved `useShadowDom`, `privacyPolicyLink`, `termsOfServiceLink` from the config to the root configuration passed to `SuperTokens.init`. - Removed `SESSION_ALREADY_EXISTS` event from auth recipes and moved it into the `Session` recipe - Added new keys to `data-supertokens` props of several elements - Updated some styles to work with the updated UI structure - Renamed translation strings to reflect the new component/UI structure: - `EMAIL_PASSWORD_SIGN_IN_FORGOT_PW_LINK` instead of `EMAIL_PASSWORD_SIGN_IN_FOOTER_FORGOT_PW_LINK` - `AUTH_PAGE_HEADER_TITLE_SIGN_IN_AND_UP` instead of `PWLESS_SIGN_IN_UP_HEADER_TITLE` and `THIRD_PARTY_SIGN_IN_AND_UP_HEADER_TITLE` - `AUTH_PAGE_HEADER_TITLE_SIGN_IN` instead of `EMAIL_PASSWORD_SIGN_IN_HEADER_TITLE` - `AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_START` instead of `EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_START` - `AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_SIGN_IN_LINK` instead of `EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_SIGN_UP_LINK` - `AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_END` instead of `EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_END` - `AUTH_PAGE_HEADER_TITLE_SIGN_UP` instead of `EMAIL_PASSWORD_SIGN_UP_HEADER_TITLE` - `AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_START` instead of `EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_START` - `AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_SIGN_UP_LINK` instead of `EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_SIGN_IN_LINK` - `AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_END` instead of `EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_END` - `AUTH_PAGE_FOOTER_START` instead of `EMAIL_PASSWORD_SIGN_UP_FOOTER_START`, `PWLESS_SIGN_IN_UP_FOOTER_START` and `THIRD_PARTY_SIGN_IN_UP_FOOTER_START` - `AUTH_PAGE_FOOTER_TOS` instead of: `EMAIL_PASSWORD_SIGN_UP_FOOTER_TOS`, `PWLESS_SIGN_IN_UP_FOOTER_TOS` and `THIRD_PARTY_SIGN_IN_UP_FOOTER_TOS` - `AUTH_PAGE_FOOTER_AND` instead of `EMAIL_PASSWORD_SIGN_UP_FOOTER_AND`, `PWLESS_SIGN_IN_UP_FOOTER_AND` and `THIRD_PARTY_SIGN_IN_UP_FOOTER_AND` - `AUTH_PAGE_FOOTER_PP` instead of `EMAIL_PASSWORD_SIGN_UP_FOOTER_PP`, `PWLESS_SIGN_IN_UP_FOOTER_PP` and `THIRD_PARTY_SIGN_IN_UP_FOOTER_PP` - `AUTH_PAGE_FOOTER_END` instead of `EMAIL_PASSWORD_SIGN_UP_FOOTER_END`, `PWLESS_SIGN_IN_UP_FOOTER_END` and `THIRD_PARTY_SIGN_IN_UP_FOOTER_END` ### Changes - Added overrideable components: - General: `AuthPageComponentList`, `AuthPageHeader`, `AuthPageFooter`. - These can be overridden by using `AuthRecipeComponentsOverrideContextProvider` - `Passwordless`: `PasswordlessContinueWithPasswordless_Override` - Added new embeddable components: - General: `AuthPage` and `AuthPageTheme` - `EmailPassword`: `SignInTheme`, `SignUpTheme` - Added a new `style` prop to the root level config ### Migration guide #### Removed recipes - If you were using `ThirdPartyEmailPassword`, you should now init `ThirdParty` and `EmailPassword` recipes separately. The config for the individual recipes are mostly the same, except the syntax may be different. Check our recipe guides for [ThirdParty](https://supertokens.com/docs/thirdparty/introduction) and [EmailPassword](https://supertokens.com/docs/emailpassword/introduction) for more information. - If you were using `ThirdPartyPasswordless`, you should now init `ThirdParty` and `Passwordless` recipes separately. The config for the individual recipes are mostly the same, except the syntax may be different. Check our recipe guides for [ThirdParty](https://supertokens.com/docs/thirdparty/introduction) and [Passwordless](https://supertokens.com/docs/passwordless/introduction) for more information. #### Moved configuration options Several configuration options (`useShadowDom`, `defaultToSignUp`, `privacyPolicyLink`, `termsOfServiceLink`) were moved to the root configuration (the one passed directly to `SuperTokens.init`) out of recipe specific configs. The function of these props remain identical, the only necessary migration is moving them: Before: ```tsx SuperTokens.init({ appInfo: { // appInfo }, recipeList: [ EmailPassword.init({ useShadowDom: false, signInAndUpFeature: { defaultToSignUp: true, signUpForm: { privacyPolicyLink: "http://example.com", termsOfServiceLink: "http://example.com", }, }, }), Session.init(), ], }); ``` After: ```tsx SuperTokens.init({ appInfo: { // appInfo }, useShadowDom: false, defaultToSignUp: true, privacyPolicyLink: "http://example.com", termsOfServiceLink: "http://example.com", recipeList: [EmailPassword.init(), Session.init()], }); ``` #### Removed embeddable components The auth page related embeddable components (`SignInAndUp`, `SignInUp`) and the related theme components were removed. We instead recommend you to use the new `AuthPage` component with the appropriate pre-built UI objects and factorsIds set. For more information check the following [guide](https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form) Before: ```tsx import { SignInAndUp } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui"; const Component = () => { const navigate = useNavigate(); return <SignInAndUp navigate={navigate} />; }; ``` After: ```tsx import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui"; import { AuthPage } from "supertokens-auth-react/ui"; const Component = () => { const navigate = useNavigate(); return <AuthPage preBuiltUIList={[PasswordlessPreBuiltUI]} factors={["otp-phone"]} navigate={navigate} />; }; ``` #### Updated styles Some parts of our default styles have been changed, including some changes to the `data-supertokens` props added to elements. Since customizations can take many forms we cannot give you exact guidance on how/what needs to change. In almost all cases, no updates should be required, but please check that your custom styles still work as you expect. ## [0.41.1] - 2024-05-13 ### Fixes - Custom `inputComponents` (in sign in/up form fields) now get reference-stable callbacks. ## [0.41.0] - 2024-05-09 ### Breaking changes The `shouldDoInterceptionBasedOnUrl` function now returns true: - If sessionTokenBackendDomain is a valid subdomain of the URL's domain. This aligns with the behavior of browsers when sending cookies to subdomains. - Even if the ports of the URL you are querying are different compared to the apiDomain's port ot the sessionTokenBackendDomain port (as long as the hostname is the same, or a subdomain of the sessionTokenBackendDomain): #217 ## [0.40.1] - 2024-04-29 ### CI changes - Changed an internal test script to fix a dependency issue in CI ## [0.40.0] - 2024-04-15 ### Breaking Changes - `onFailureRedirection` is no longer allowed to return relative paths. - We now throw an error if `onFailureRedirection` returns the current URL or path when: - redirecting away from the auth page (`websiteBasePath`, usually `/auth`) when a session already exists, - redirecting after sign in/up, - redirecting after successful email verification, - redirecting after a successful MFA factor completion. ### Changes - We now redirect to the factor chooser screen if the MFA claim validator fails even if there is no available next factor. This will always show an access denied screen, which should help debugging. - `clearOnSubmit` now only clears the field value if the request returned an error. This is because the form navigates on success, making clearing the field unnecessary (which can lead to confusing UX if the navigation takes too long). - Fixed an issue where `SessionAuth` contents popped in before navigating away if a claim validator failed: - Now we ony set the context if `onFailureRedirection` returned the current URL. - Now we ony call the navigation function if `onFailureRedirection` returned something different than the current URL. - Made the `name` property optional in custom provider configs for usage with `usesDynamicLoginMethods`, where the tenant configuration is expected to set the name dynamically. - Note, that not setting the name will make the UI crash if the `usesDynamicLoginMethods` is set to `false` or if the tenant configuration doesn't include a provider list. ## [0.39.1] - 2024-03-27 - Fixes how we fetch the component to render based on the current path to take into account non auth recipes correctly. - Adds Remix example reference. ## [0.39.0] - 2024-03-07 ### Overview #### Introducing MFA With this release, we are introducing MultiFactorAuth and TOTP, this will let you: - require (2FA or MFA) during sign in - make use of TOTP (e.g.: Google authenticator) as an MFA challenge Check our [guide](https://supertokens.com/docs/mfa/introduction) for more information. ### Breaking changes - `SUCCESS` redirections are now handled by the `getRedirectionURL` callback passed to the `SuperTokens.init` config, instead of the recipe level callbacks - `isNewPrimaryUser` is renamed to `createdNewUser` - Refactored/renamed some styling options (`resetPasswordHeaderTitle` -> `headerTitle withBackButton`) - Some default styling has changed related to how fonts/font-weights are applied - Changed how `headerSubtitle` is styled in components: `EmailPasswordResetPasswordEmail`, `EmailPasswordSubmitNewPassword`, `EmailPasswordSignInHeader`, `EmailPasswordSignUpHeader` - Removed an `ErrorBoundary` wrapping all our feature components to make sure all errors are properly catchable by the app - In `supertokens-web-js` (which you may also be using), we added `firstFactors` into the return type of `getLoginMethods` and removed the enabled flags of different login methods. - For older FDI versions, the firstFactors array will be calculated based on those enabled flags. - Renamed `validatorId` in claim validation errors to `id` to match the backend SDKs #### Migration guide ##### Success redirections & isNewPrimaryUser rename Before: ```tsx import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react"; import Passwordless from "supertokens-auth-react/recipe/passwordless"; SuperTokens.init({ appInfo: { // appInfo }, recipeList: [ Passwordless.init({ contactMethod: "EMAIL_OR_PHONE", async getRedirectionURL(context) { if (context.action === "SUCCESS") { if (context.isNewRecipeUser) { // new primary user } else { // only a recipe user was created } } return undefined; }, }), Session.init(), ], }); ``` After: ```tsx import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react"; import Passwordless from "supertokens-auth-react/recipe/passwordless"; SuperTokens.init({ appInfo: { // appInfo }, async getRedirectionURL(context, userContext) { if (context.action === "SUCCESS" && context.newSessionCreated) { if (context.createdNewUser && context.recipeId === "passwordless") { // custom logic } } // Returning undefined means we use the default redirection return undefined; }, recipeList: [ Passwordless.init({ contactMethod: "EMAIL_OR_PHONE", }), Session.init(), ], }); ``` #### Styling changes There are 2 types of style changes in this release: 1. Refactored/renamed some styling options. If you didn't add custom styles for the following classes there is no action needed - `resetPasswordHeaderTitle`: should now be styled using `withBackButton` - `headerSubtitle`: now directly includes the text instead of a `div`, your styles may require an update to match this change 2. Some default styling has changed related to how fonts/font-weights are applied. This may interact with your own font/sizing settings, if you didn't add font, font-size/weight and size changes to your custom styles, no action should be needed. Both of the above changes could have subtle interactions with custom styles, so we recommend a quick manual (visual) test to make sure everything still looks right. #### getLoginMethods interface change in supertokens-web-js If you used to use the enabled flags in getLoginMethods: Before: ```ts async function checkLoginMethods() { const loginMethods = await Multitenancy.getLoginMethods(); if (loginMethods.thirdParty.enabled) { // custom logic } if (loginMethods.emailPassword.enabled) { // custom logic } if (loginMethods.passwordless.enabled) { // custom logic } } ``` After: ```ts async function checkLoginMethods() { const loginMethods = await Multitenancy.getLoginMethods(); if (loginMethods.firstFactors.includes("thirdparty")) { // custom logic } if (loginMethods.firstFactors.includes("emailpassword")) { // custom logic } if ( loginMethods.firstFactors.includes("otp-email") || loginMethods.firstFactors.includes("otp-phone") || loginMethods.firstFactors.includes("link-email") || loginMethods.firstFactors.includes("link-phone") ) { // custom logic } } ``` #### Event handler changes Before: ```tsx import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react"; import Passwordless from "supertokens-auth-react/recipe/passwordless"; SuperTokens.init({ appInfo: { // appInfo }, recipeList: [ Passwordless.init({ contactMethod: "EMAIL_OR_PHONE", onHandleEvent(context) { if (context.action === "SUCCESS") { let user = context.user; if (context.isNewRecipeUser && context.user.loginMethods.length === 1) { // sign up success } else { // sign in success } } }, }), Session.init(), ], }); ``` After: ```tsx import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react"; import Passwordless from "supertokens-auth-react/recipe/passwordless"; SuperTokens.init({ appInfo: { // appInfo }, recipeList: [ Passwordless.init({ contactMethod: "EMAIL_OR_PHONE", onHandleEvent(context) { if (context.action === "SUCCESS" && context.createdNewSession) { let user = context.user; let rid = context.rid; if (context.isNewRecipeUser && context.user.loginMethods.length === 1) { // sign up success } else { // sign in success } } }, }), Session.init(), ], }); ``` #### Renamed validatorId If you used to use the `validatorId` prop of validationErrors, you should now use `id` instead. Before: ```ts async function checkValidators() { const validationErrors = await Session.validateClaims(); for (const error of validationErrors) { console.log(error.validatorId, error.reason); } } ``` After: ```ts async function checkValidators() { const validationErrors = await Session.validateClaims(); for (const error of validationErrors) { console.log(error.id, error.reason); } } ``` ### Changes - Added support for FDI 1.19 (Node SDK>= 17.0.0), but keeping support FDI version 1.17 and 1.18 (node >= 15.0.0, golang>=0.13, python>=0.15.0) - Added the `MultiFactorAuth` and `TOTP` recipes. To start using them you'll need compatible versions: - Core>=8.0.0 - supertokens-node>=17.0.0 - supertokens-website>=18.0.0 - supertokens-web-js>=0.10.0 - supertokens-auth-react>=0.39.0 - Added new MFA related components to Passwordless - Added new prop `mfaFeature` to recipe config - `disableDefaultUI`: can be used to disable paths: `${websiteBasePath}/mfa/otp-phone`, `${websiteBasePath}/mfa/otp-email` - `style`: is applied on top of normal sign in/up styles on the MFA paths - New embeddable components: - `MfaOtpPhone` (by default handling path `${websiteBasePath}/mfa/otp-phone`) - `MfaOtpEmail` (by default handling path `${websiteBasePath}/mfa/otp-email`) - New overrideable components: - `PasswordlessMFAHeader_Override` - `PasswordlessMFAFooter_Override` - `PasswordlessMFAOTPHeader_Override` - `PasswordlessMFAOTPFooter_Override` - Please note, that during MFA we re-use the existing overrideable comps for the form section: - `PasswordlessEmailForm_Override` - `PasswordlessPhoneForm_Override` - `PasswordlessEmailOrPhoneForm_Override` - Added a `useShadowDom` prop to the `AccessDeniedScreen` - Added an `error` prop to the `AccessDeniedScreen` that can be used to describe the reason access is denied. - Added a `footer` prop to `EmailOrPhoneForm`, `EmailForm` and `PhoneForm` which is used to override the default sign in/up footers in case the component is for MFA - Sign in/up functions can now return new (MFA related) error codes. - New (MFA related) error codes have been added to the default translation files. - Updated how we select which login UI to show to take the `firstFactors` config value into account (defined in the `MultiFactorAuth` recipe or in the tenant information) - The passwordless and thirdpartypasswordless sign in/up screens now respect the firstFactors configuration (defined in the `MultiFactorAuth` recipe or in the tenant information) when selecting the available contact methods. - Added TOTP recipe. For more details please check our guide MFA guide. - Fixed a font loading issue, that caused apps using the default (Rubik) font to appear with the incorrect font weights - Added `rid` and `createdNewSession` to events with `action: "SUCCESS"` ## [0.38.0] - 2024-02-29 ## Breaking Changes - Previously, when calling `redirectToAuth` with the `redirectBack` option, url fragments(hash) were stripped when redirecting back to the previous page after authentication. This issue has been fixed, and url fragments are preserved along with the query params. For users who employed the workaround of overriding the `windowHandler.location.getSearch` function to include fragments, it is essential to remove that override before upgrading to this version. ## [0.37.1] - 2024-02-26 - Fixes types argument in override functions to make `builder` non optional. ## [0.37.0] - 2024-01-15 ## Breaking Changes - The default `DateProvider` implementation relies on `localStorage`. If your environment lacks support for `localStorage`, you must provide custom implementations for either the `DateProvider` or `localStorage`. ### Changes - Exporting the `DateProvider` from supertokens-web-js, that both built-in and custom validators can use instead of `Date.now` to get an estimate of the server clock. - Added the `dateProvider` prop to the configuration that can be used to customize the built-in `DateProvider`. - Added `calculateClockSkewInMillis` as an overrideable function to the Session recipe that estimates the time difference between the backend and the client. ## [0.36.1] - 2023-12-20 ### Fixes - Previously, when calling `redirectToAuth` with the `redirectBack` option, query parameters were stripped when redirecting back to the previous page after authentication. This issue has been fixed, and now query parameters are preserved as intended. ## [0.36.0] - 2023-12-07 ### Changes - `getRedirectionURL` now supports returning `null` to prevent automatic redirection, useful for customizing the behavior after successful sign-in or sign-up. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login. Here's an example of how to use this: ```tsx EmailPassword.init({ getRedirectionURL: async (context, userContext) => { if (context.action === "SUCCESS") { return null; } // Returning undefined falls back to the default redirection strategy return undefined; }, }); ``` - `getRedirectionURL` now receives `userContext` as the second argument. - `isNewPrimaryUser` boolean property has been added to `GetRedirectionURLContext`. It can be used to check if a new primary user was created particularly in scenarios involving account linking. - `UserContext` type has been changed to `Record<string, unknown>` from `any`. - The `PreBuiltUI` components now accept a `navigate` prop, internally utilized by SuperTokens for redirection. This becomes handy when manually rendering the component and desiring client-side navigation instead of a full-page refresh for any redirection. Here's an example using `react-router-dom@v6`: ```tsx import { SignInUp } from "supertokens-auth-react/recipe/passwordless/prebuiltui"; import { useNavigate } from "react-router-dom"; function CustomSignInUp() { const navigate = useNavigate(); return <SignInUp navigate={navigate} />; } ``` ### Breaking changes - `user` property has been removed from `GetRedirectionURLContext`.To get the `user` object from backend, you can follow hte instructions [here](https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/get-user-info). - The `CloseTabScreen` [component](https://supertokens.com/img/otp-magic-link-same-time.png), previously featured in the passwordless recipe visible when a user signs in from another tab using a magic link, has been removed. Users will continue to see the 'Enter OTP' screen until they refresh. If you were [overriding](https://supertokens.com/docs/passwordless/advanced-customizations/react-component-override/usage) this component using `PasswordlessCloseTabScreen_Override`, you no longer need to do so. - If your workflow involves custom validation, such as Phone Number verification, after signing in, ensure your code aligns with the updated examples found in [with-phone-password](https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-phone-password) or [with-thirdpartyemailpassword-passwordless](https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-thirdpartyemailpassword-passwordless). Changes: - The need to manually set `props.featureState.successInAnotherTab` to `false` to avoid displaying the `CloseTabScreen` component has been eliminated. ## [0.35.9] - 2023-12-06 - Fixes ThirdPartyEmailPassword rendering sign in/up switcher even with disabled email password. Instead it'll now render `SignInAndUpHeader_Override` in this case (overrideable as `ThirdPartySignInAndUpHeader`). Overriding `ThirdPartyEmailPasswordHeader_Override` should still cover all cases. - Added a new prop to `ThirdPartyEmailPasswordHeader_Override` you can use to check if email password is enabled. ## [0.35.8] - 2023-11-26 - Fixes `inputComponent` props to make them non optional. This is in the context of customizing the sign up form to add custom react components. ## [0.35.7] - 2023-11-24 ### Added - EmailPassword and ThirdPartyEmailPassword recipe enhancements: - Introduced the capability to utilize custom components by exposing `inputComponent` types. - Allow setting default values in signup/signin form fields. - Made the `onChange` prop in `inputComponent` simpler by removing the need for an `id` attribute. - Added a feature to customize the "Field is not optional" error message for each form field with the `nonOptionalErrorMsg` prop. Following is an example of how to use above features. ```tsx EmailPassword.init({ signInAndUpFeature: { signUpForm: { formFields: [ { id: "select-dropdown", label: "Select Option", getDefaultValue: () => "option 2", nonOptionalErrorMsg: "Select dropdown is required", inputComponent: ({ value, name, onChange }) => ( <select value={value} name={name} onChange={(e) => onChange(e.target.value)} placeholder="Select Option"> <option value="" disabled hidden> Select an option </option> <option value="option 1">Option 1</option> <option value="option 2">Option 2</option> <option value="option 3">Option 3</option> </select> ), }, ], }, }, }); ThirdPartyEmailPassword.init({ signInAndUpFeature: { signUpForm: { formFields: [ { id: "terms", label: "", optional: false, getDefaultValue: () => "true", nonOptionalErrorMsg: "You must accept the terms and conditions", inputComponent: ({ name, onChange, value }) => ( <div style={{ display: "flex", alignItems: "center", justifyContent: "left", }}> <input value={value} checked={value === "true"} name={name} type="checkbox" onChange={(e) => onChange(e.target.checked.toString())}></input> <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span> </div> ), }, ], }, }, }); ``` ## [0.35.6] - 2023-10-16 ### Test changes - Updated test expectations to match fix in the node behaviour of the emailVerifyGET endpoint ## [0.35.5] - 2023-10-06 ### Changes - Setting `autocomplete` in passwordless forms for email, phone and OTP ### Fixes - Fixed shadow dom issue in nextjs dev mode by checking if a shadow root is already attached to the div before creating one. ### Example changes - Updated dev/start script in netlify example ## [0.35.4] - 2023-09-28 ### Fixes - fixed using `twitter` as id by default in twitter provider. ## [0.35.3] - 2023-09-26 ### Added - Added new social provider `twitter` - Introduced a new option `logo` for thirdparty custom providers to set a custom logo, just like the `name` property. Following is an example of how to use this new `logo` property. ```tsx ThirdPartyPasswordless.init({ signInUpFeature: { providers: [ ThirdPartyPasswordless.Google.init(), ThirdPartyPasswordless.Apple.init(), { id: "discord", name: "Discord", logo: <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" > <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" /> </svg>, ... ``` ## [0.35.2] - 2023-09-24 ### Test changes - Split some test suites into multiple files to help with test parallelization ## [0.35.1] - 2023-09-21 ### Test changes - Test fixes for backend SDK CI ## [0.35.0] - 2023-09-21 ### Overview #### Introducing account-linking With this release, we are introducing AccountLinking, this will let you: - link accounts automatically, - implement manual account linking flows. Check our [guide](https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/account-linking/overview) for more information. To use this you'll need compatible versions: - Core>=7.0.0 - supertokens-node>=16.0.0 (support is pending in other backend SDKs) - supertokens-website>=17.0.3 - supertokens-web-js>=0.8.0 - supertokens-auth-react>=0.35.0 ### Breaking changes - Added support for FDI 1.18 (Node SDK>= 16.0.0), but keeping support FDI version1.17 (node >= 15.0.0, golang>=0.13, python>=0.15.0) - User type has changed across recipes and functions: recipe specific user types have been removed and replaced by a generic one that contains more information - `createdNewUser` has been renamed to `createdNewRecipeUser` - `createCode`, `consumeCode`, `createPasswordlessCode` and `consumePasswordlessCode` can now return status: `SIGN_IN_UP_NOT_ALLOWED` - `signInAndUp` and `thirdPartySignInAndUp` can now return new status: `SIGN_IN_UP_NOT_ALLOWED` - `sendPasswordResetEmail` can now return `status: "PASSWORD_RESET_NOT_ALLOWED"` - `signIn` and `emailPasswordSignIn` can now return `SIGN_IN_NOT_ALLOWED` - `signUp` and `emailPasswordSignUp` can now return `SIGN_UP_NOT_ALLOWED` - The context param of `getRedirectionURL` gets an optional `user` prop (it's always defined if `createdNewRecipeUser` is set to true) - Added new language translation keys - We've added error messages for all of the above error statuses. Please see the new UI [here](https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/account-linking/automatic-account-linking#support-status-codes). You can change the text using the language translation feature ### Migration #### New User structure We've added a generic `User` type instead of the old recipe specific ones. The mapping of old props to new in case you are not using account-linking: - `user.id` stays `user.id` - `user.email` becomes `user.emails[0]` - `user.phoneNumber` becomes `user.phoneNumbers[0]` - `user.thirdParty` becomes `user.thirdParty[0]` - `user.timeJoined` is still `user.timeJoined` - `user.tenantIds` is still `user.tenantIds` #### Checking if a user signed up or signed in - When calling passwordless consumeCode / social login signinup APIs, you can check if a user signed up by: ``` // Here res refers to the result the function/api functions mentioned above. const isNewUser = res.createdNewRecipeUser && res.user.loginMethods.length === 1; ``` - When calling the emailpassword sign up API, you can check if a user signed up by: ``` const isNewUser = res.user.loginMethods.length === 1; ``` - In `getRedirectionURL` ``` EmailPassword.init({ // This looks the same for other recipes // Other config options. async getRedirectionURL(context) { if (context.action === "SUCCESS") { if (context.isNewRecipeUser && context.user.loginMethods.length === 1) { // new primary user } else { // only a recipe user was created } } return undefined; } }) ``` - In `onHandleEvent`: ``` EmailPassword.init({ // This looks the same for other recipes // Other config options. onHandleEvent(context: EmailPasswordOnHandleEventContext) { if (context.action === "SUCCESS") { if (context.isNewRecipeUser && context.user.loginMethods.length === 1) { // new primary user } else { // only a recipe user was created } } }, }) ``` ## [0.34.2] - 2023-08-27 ### Fixes - Fixed the SDK trying to merge the providers from the tenant config if the third party login method is disabled. ## [0.34.1] - 2023-07-31 ### Changes - Delaying the initial `getDynamicLoginMethods` until the first feature/routing component renders - Added a spinner that shows up if `usesDynamicLoginMethods` is true and `getDynamicLoginMethods` takes longer than 200ms - Updated with-one-login-many-subdomains example to match the create-supertokens-app-example ## [0.34.0] - 2023-07-18 ### Changes - Added a new optional parameter to `getSuperTokensRoutesForReactRouterDom` to support embedded routes - Added Active Directory, Okta, Linked In, Boxy SAML, Google Workspaces providers - Added name prop to buttonComponent - Added thirdparty login with popup window - Added Multitenancy recipe - Improved typing of `getClaimValue` - Optional `clientType` config in the input for `SuperTokens.init` function, that is used by thirdparty and multitenancy recipes. - Optional `usesDynamicLoginMethods` config in the input for `SuperTokens.init` function, which makes the SDK check the backend to see which recipes should be enabled - Added an overrideable `getTenantIdFromURL` to multiple recipes ### Breaking Changes - Only supporting FDI 1.17 - Backend SDKs have to be updated first to a version that supports multi-tenancy for thirdparty - supertokens-node: >= 15.0.0 - supertokens-golang: >= 0.13.0 - supertokens-python: >= 0.15.0 - In ThirdParty recipe, - Changed signatures of the functions `getAuthorisationURLWithQueryParamsAndSetState` ```diff import { getAuthorisationURLWithQueryParamsAndSetState } from 'supertokens-auth-react/recipe/thirdparty'; getAuthorisationURLWithQueryParamsAndSetState({ - providerId: "google", + thirdPartyId: "google", - authorisationURL: "http://localhost/auth/callback/google", + frontendRedirectURI: "http://localhost/auth/callback/google", }); ``` - Removed functions - `setStateAndOtherInfoToStorage`, `getAuthorisationURLFromBackend`, `generateStateToSendToOAuthProvider`, `verifyAndGetStateOrThrowError`, `getAuthCodeFromURL`, `getAuthErrorFromURL`, `getAuthStateFromURL` - In ThirdPartyEmailpassword recipe, - Changed signatures of the functions `getAuthorisationURLWithQueryParamsAndSetState` ```diff import { getAuthorisationURLWithQueryParamsAndSetState } from 'supertokens-auth-react/recipe/thirdpartyemailpassword'; getAuthorisationURLWithQueryParamsAndSetState({ - providerId: "google", + thirdPartyId: "google", - authorisationURL: "http://localhost/auth/callback/google", + frontendRedirectURI: "http://localhost/auth/callback/google", }); ``` - Removed functions - `setStateAndOtherInfoToStorage`, `getAuthorisationURLFromBackend`, `generateStateToSendToOAuthProvider`, `verifyAndGetStateOrThrowError`, `getAuthCodeFromURL`, `getAuthErrorFromURL`, `getAuthStateFromURL` - In ThirdPartyPasswordless recipe, - Changed signatures of the functions `getThirdPartyAuthorisationURLWithQueryParamsAndSetState` ```diff import { getAuthorisationURLWithQueryParamsAndSetState } from 'supertokens-auth-react/recipe/thirdpartypasswordless'; getAuthorisationURLWithQueryParamsAndSetState({ - providerId: "google", + thirdPartyId: "google", - authorisationURL: "http://localhost/auth/callback/google", + frontendRedirectURI: "http://localhost/auth/callback/google", }); ``` - Removed functions - `setThirdPartyStateAndOtherInfoToStorage`, `getAuthorisationURLFromBackend`, `generateThirdPartyStateToSendToOAuthProvider`, `verifyAndGetThirdPartyStateOrThrowError`, `getThirdPartyAuthCodeFromURL`, `getThirdPartyAuthErrorFromURL`, `getThirdPartyAuthStateFromURL` ## [0.33.1] - 2023-06-08 ### Fixes - CSS change to fix the responsiveness of the default `AccessDenied` screen ## [0.33.0] - 2023-06-06 ### Added - Introduce `onFailureRedirection` and `showAccessDeniedOnFailure` on claims and validators to make handling session claim validation failures easier - Added an `accessDeniedScreen` prop to `SessionAuth`. The component passed as this prop is rendered if a claim validator (with `showAccessDeniedOnFailure` set to true) fails. - Added a styleable `AccessDeniedScreen` to provide a useful default for the above `accessDeniedScreen` prop. - Update to web-js interface version - Updated supertokens-web-js dependency, which made SessionClaimValidator a type instead of an abstract class - Added `textGray` to the palette variables (used in the default access denied screen) - Now the email verification feature component will never render `SendVerifyEmail` without a session ## [0.32.4] - 2023-05-31 - Fixed the types for EmailVerification.init to not require a config to be passed. ## [0.32.3] - 2023-05-10 - Changed email verification index.tsx to use index.ts instead so that auto generated docs add it. ## [0.32.2] - 2023-05-10 - Fixed with-thirdpartyemailpassword-passwordless apps overwritten button's width - Fixed supertokens-auth-react/ui import referencing .js file instead of .d.ts causing ts issue ## [0.32.1] - 2023-05-03 ### Changes - Made Session.validateClaims argument optional ## [0.32.0] - 2023-05-02 ### Changes - Eliminated the need for duplicate `init` call for non-react applications that use pre-built UI. [See the issue](https://github.com/supertokens/supertokens-auth-react/issues/616) - Split/separate pre-built UI components from its recipe to reduce bundle sizes for apps that do not use pre-built UI - Added thirdparty login with popup window example ### Migration #### Initializing web-js This version also initializes the web-js SDK. If you previously did that manually, you can remove/replace it with the auth-react init call. From this version forward, the recommended way to use this SDK, even with Angular and Vue, is to initialize auth-react in the root component. Importing `supertokens-auth-react` will not pull React into your main bundle; only importing the `prebuiltui` modules will. For more details, check out our quick setup guides for angular and vue. #### Adding the pre-built UI route for apps with react-router-dom ```tsx import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react"; import Passwordless from "supertokens-auth-react/recipe/passwordless"; // .... other imports SuperTokens.init({ appInfo: