Merge pull request #799 from supertokens/update_chromatic_links

update storybooks/chromatic links

v2/emailpassword/nextjs/app-directory/setting-up-frontend.mdx

@@ -62,7 +62,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/emailpassword/nextjs/setting-up-frontend.mdx

@@ -59,7 +59,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/mfa/email-sms-otp/otp-for-all-users.mdx

@@ -299,8 +299,8 @@ function App() {
 </FrontendPreBuiltUITabs>
 
 With the above configuration, users will see emailpassword or social login UI when they visit the auth page. After completing that, users will be redirected to `/auth/mfa/otp-email` (assuming that the `websiteBasePath` is `/auth`) where they will be asked to complete the OTP challenge. The UI for this screen looks like:
-- [Factor Setup UI](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/passwordless-mfa--setup-single-next-option) (This is in case the first factor doesn't provide an email for the user. In our example, the first factor does provide an email since it's email password or social login).
-- [Verification UI](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/passwordless-mfa--verification-with-single-next-option).
+- [Factor Setup UI](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/passwordless-mfa--setup-email) (This is in case the first factor doesn't provide an email for the user. In our example, the first factor does provide an email since it's email password or social login).
+- [Verification UI](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/passwordless-mfa--verification).
 
 :::caution
 If you are already using `Passwordless` or `ThirdPartyPasswordless` in your app as a first factor, you do not need to explicitly initialise the Passwordless recipe again. You just have to make sure that the `contactMethod` is set correctly.
@@ -757,8 +757,8 @@ function App() {
 </FrontendPreBuiltUITabs>
 
 With the above configuration, users will see the first and second factor based on the tenant configuration. For the tenant we configured above, users will see email password or social login first. After completing that, users will be redirected to `/auth/mfa/otp-email` (assuming that the `websiteBasePath` is `/auth`) where they will be asked complete the OTP challenge. The UI for this screen looks like:
-- [Factor Setup UI](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/passwordless-mfa--setup-single-next-option) (This is in case the first factor doesn't provide an email for the user. In our example, the first factor does provide an email since it's email password or social login).
-- [Verification UI](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/passwordless-mfa--verification-with-single-next-option).
+- [Factor Setup UI](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/passwordless-mfa--setup-email) (This is in case the first factor doesn't provide an email for the user. In our example, the first factor does provide an email since it's email password or social login).
+- [Verification UI](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/passwordless-mfa--verification).
 
 :::caution
 If you are already using `Passwordless` or `ThirdPartyPasswordless` in your app as a first factor, you do not need to explicitly initialise the Passwordless recipe again. You just have to make sure that the `contactMethod` is set correctly.

v2/mfa/frontend-setup.mdx

@@ -73,7 +73,7 @@ supertokens.init({
 
 In the above snippet, we have configured thirdparty and email password as first factors. The second factor is configured [on the backend](./backend-setup), and is determined based on the boolean value of  [`v` in the MFA claim in the session](./important-concepts#how-are-auth-factors-marked-as-completed). If the `v` is `false` in the session, it means that there are still factors pending before the user has completed login. In this case, the frontend SDK calls the MFAInfo endpoint (see more about this later) on the backend which returns the list of factors (`string[]`) that the user must complete next. For example: 
 - If the next array is `["otp-email"]`, then we will show the user the enter OTP screen for the email associated with the first factor login.
-- If the `n` array has multiple items, we will show the user a [factor chooser screen](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/mfa-chooser--multiple-factors) using which they can decide which factor they want to continue with.
+- If the `n` array has multiple items, we will show the user a [factor chooser screen](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/mfa-chooser--multiple-factors) using which they can decide which factor they want to continue with.
 - If the `next` is empty, it means that:
     - There is a misconfig on the backend. This would show an access denied screen to the user. OR;
     - There is another claim that needs to be finished first (like email verification), before the next MFA challenge can be shown. This can happen if you configure the backend's `checkAllowedToSetupFactorElseThrowInvalidClaimError` function to not allow a factor setup until the email is verified.
@@ -156,7 +156,7 @@ supertokens.init({
 
 The second factor for a tenant is determined based on the [`secondaryFactors` config for the tenant](./backend-setup#multi-tenant-setup-1), or based on any custom implementation for the `getMFARequirementsForAuth` function. If the current user has specific MFA methods enabled for them, those will also be shown as options as well. Overall, the list of secondary factors will be used to build the `next` array returned from the MFAInfo endpoint (see more about this later). For example: 
 - If the next array is `["otp-email"]`, then we will show the user the enter OTP screen for the email associated with the first factor login.
-- If the `n` array has multiple items, we will show the user a [factor chooser screen](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/mfa-chooser--multiple-factors) using which they can decide which factor they want to continue with.
+- If the `n` array has multiple items, we will show the user a [factor chooser screen](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/mfa-chooser--multiple-factors) using which they can decide which factor they want to continue with.
 - If the `next` is empty, it means that:
     - There is a misconfig on the backend. This would show an access denied screen to the user. OR;
     - There is another claim that needs to be finished first (like email verification), before the next MFA challenge can be shown. This can happen if you configure the backend's `checkAllowedToSetupFactorElseThrowInvalidClaimError` function to not allow a factor setup until the email is verified.
@@ -169,7 +169,7 @@ There can be situations of misconfigurations. For example you may have enabled `
 
 ## The access denied screen
 
-Sometimes, users may end up seeing [an access denied screen](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/totp-mfa--device-setup-access-denied) during the login flow. This is shown if there is a 500 (backend sends a 500 status code) error during the MFA flow for API calls that are initiated automatically (without user action). For example:
+Sometimes, users may end up seeing [an access denied screen](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/totp-mfa--device-setup-access-denied-reload) during the login flow. This is shown if there is a 500 (backend sends a 500 status code) error during the MFA flow for API calls that are initiated automatically (without user action). For example:
 - When the user wants to setup a new TOTP device, the pre bult UI calls the `createDevice` function from the totp recipe on page load, and if that fails, users will see the access denied screen asking them to retry.
 - When the user needs to complete an OTP email factor, and if the API call to send an email (which is called on page load) fails, then users will see the access denied screen asking them to retry.
 
@@ -700,7 +700,7 @@ curl --location --request PUT '^{form_apiDomain}^{form_apiBasePath}/mfa/info' \
     - The `factors.next` array determines the list of factors which the user must completed next. For example:
         - If the next array is `["otp-email"]`, then we will show the user the enter OTP screen for the email associated with the first factor login.
         - If the `n` array has multiple items:
-            - For the pre built UI, we will show the user a [factor chooser screen](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/mfa-chooser--multiple-factors) using which they can decide which factor they want to continue with.
+            - For the pre built UI, we will show the user a [factor chooser screen](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/mfa-chooser--multiple-factors) using which they can decide which factor they want to continue with.
             - For custom UI, you would need to make this screen on your own.
         - If the `next` is empty, it means that:
             - There is a misconfig on the backend. This would show an access denied screen to the user. OR;

v2/mfa/step-up-auth.mdx

@@ -546,15 +546,15 @@ async function redirectToTotpSetupScreen() {
 }
 ```
 
-- In the snippet above, we redirect to the [TOTP factor setup screen](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/totp-mfa--device-setup-with-single-next-option). The second argument represents a boolean for `forceSetup` which we set to false since we do not want to ask the user to create a new device. The third arg is also `true` since we want to redirect back to the current page after the user has finished setting up the device.
+- In the snippet above, we redirect to the [TOTP factor setup screen](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/totp-mfa--device-setup). The second argument represents a boolean for `forceSetup` which we set to false since we do not want to ask the user to create a new device. The third arg is also `true` since we want to redirect back to the current page after the user has finished setting up the device.
 - You can also just redirect the user to `/{websiteBasePath}/mfa/totp?redirectToPath={currentPath}` if you don't want to use the above function.
 
 
 </TabItem>
 
 <TabItem value="angular">
 
-In order to add a new device, you can redirect the user to `/{websiteBasePath}/mfa/totp?redirectToPath={currentPath}` from your settings page. This will show the [TOTP factor setup screen](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/totp-mfa--device-setup-with-single-next-option) to the user. The `redirectToPath` query param will also tell our SDK to redirect the user back to the current page after they have finished creating the device.
+In order to add a new device, you can redirect the user to `/{websiteBasePath}/mfa/totp?redirectToPath={currentPath}` from your settings page. This will show the [TOTP factor setup screen](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/totp-mfa--device-setup) to the user. The `redirectToPath` query param will also tell our SDK to redirect the user back to the current page after they have finished creating the device.
 
 </TabItem>
 

v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx

@@ -62,7 +62,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/passwordless/nextjs/setting-up-frontend.mdx

@@ -59,7 +59,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/src/components/appInfoForm/index.tsx

@@ -341,7 +341,7 @@ export default class AppInfoForm extends React.PureComponent<PropsWithChildren<P
 
     getVisitWebsiteBasePathText = () => (
         <span>
-            You can view the login UI by visiting <code>{this.state.websiteBasePath || "/"}</code>. You can also see all designs of our pre built UI, for each page on <a href="https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground" target="_blank">this link</a>.
+            You can view the login UI by visiting <code>{this.state.websiteBasePath || "/"}</code>. You can also see all designs of our pre built UI, for each page on <a href="https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground" target="_blank">this link</a>.
         </span>
     )
 

v2/thirdparty/nextjs/app-directory/setting-up-frontend.mdx

@@ -62,7 +62,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/thirdparty/nextjs/setting-up-frontend.mdx

@@ -59,7 +59,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-frontend.mdx

@@ -62,7 +62,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/thirdpartyemailpassword/nextjs/setting-up-frontend.mdx

@@ -59,7 +59,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/thirdpartypasswordless/nextjs/app-directory/setting-up-frontend.mdx

@@ -62,7 +62,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)
 

v2/thirdpartypasswordless/nextjs/setting-up-frontend.mdx

@@ -59,7 +59,7 @@ export default function Auth() {
 
 ## 3) Visit `/auth` page on your website
 
-If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://6571be2867f75556541fde98-xieqfaxuuo.chromatic.com/?path=/story/auth-page--playground).
+If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre built UI, for each page on [this link](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).
 
 If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)