Fix redirect URLs for remembered device flow and update tabs styling

README.md

@@ -50,7 +50,7 @@ Next we'll configure the appropriate redirect URLs for your project, you'll set
 * If you'd like to try our SMS OTP example integration, add `http://localhost:3000/recipes/api-sms-mfa/magic-link-authenticate` as a login and sign-up redirect URL.
 
 * If you'd like to try our Remember Device example integration:
-  * Add `http://localhost:3000/recipes/api-sms-remembered-device/magic-link-authenticate` as a login and sign-up redirect URL.
+  * Add `http://localhost:3000/recipes/api-sms-remembered-device/magic-link-authenticate` and `http://localhost:3000/recipes/api-sms-remembered-device-integrated/magic-link-authenticate` as a login and sign-up redirect URL.
   * [Request access](https://offers.stytch.com/dfp-30-day-trial) to [our Device Fingerprinting product](https://stytch.com/docs/fraud/guides) if you don't have it already!
 
 ## Running the example app

components/LoginDetails.tsx

@@ -12,7 +12,7 @@ const LoginDetails = ({ recipe }: Props) => {
   return (
     <>
       { recipe.tabs && (
-        <>
+        <div style={styles.tabsAndDescriptionContainer}>
           <div style={styles.tabsContainer}>
             {recipe.tabs.map((tab) => {
               const isActive = tab.recipeId === recipe.id;
@@ -24,9 +24,9 @@ const LoginDetails = ({ recipe }: Props) => {
             })}
           </div>
           <div key='description' style={styles.descriptionContainer}>
-            {recipe.description}
+            {recipe.tabDescription}
           </div>
-        </>
+        </div>
       )}
       <div style={styles.container}>
         <div style={styles.details}>
@@ -44,22 +44,26 @@ const LoginDetails = ({ recipe }: Props) => {
 };
 
 const styles: Record<string, React.CSSProperties> = {
-  tabsContainer: {
+  tabsAndDescriptionContainer: {
     backgroundColor: '#FFF',
-    display: 'flex',
     margin: '48px auto 0',
-    padding: '12px',
+    width: 'calc(100% - 48px)',
+  },
+  tabsContainer: {
+    display: 'flex',
+    padding: '24px 24px 12px 24px',
     flexWrap: 'wrap-reverse',
     justifyContent: 'center',
-    gap: '48px',
-    width: 'calc(100% - 48px)',
+    gap: '32px',
   },
   descriptionContainer: {
-    backgroundColor: '#FFF',
-    padding: '24px',
-    margin: '0 auto',
-    width: 'calc(100% - 48px)',
+    padding: '12px 24px 24px 24px',
     textAlign: 'center',
+    fontFamily: "'Booton Regular', 'sans-serif'",
+    fontSize: '16px',
+    lineHeight: '25px',
+    color: '#19303d',
+    fontWeight: 400,
   },
   container: {
     display: 'flex',

lib/recipeData.tsx

@@ -91,6 +91,7 @@ await stytchClient.magicLinks.authenticate(token as string);`,
     title: 'Remembered Device',
     details: 'Build a remembered device authentication flow using Stytch DFP.',
     description: 'In this example we use a backend Stytch auth flow and DFP to build a remembered device authentication flow. A login attempt from the same device (determined by visitor ID) is considered a known device.',
+    tabDescription: 'The standalone flow calls magic links authenticate and DFP fingerprint lookup separately. You can switch to the Integrated tab to see these combined into a single call to the Stytch API.',
     instructions: 'To the right you\'ll see a login form that uses Stytch telemetry to remember your device. Enter your email to receive a magic link. The first time you login, you will be prompted to register SMS OTP as a second factor. On subsequent logins, you will only be prompted to authenticate with SMS OTP if you are attempting to authenticate from a new device.',
     component: <LoginWithEmailRememberedDevice />,
     tabs: [
@@ -106,8 +107,8 @@ await stytchClient.magicLinks.authenticate(token as string);`,
     code: `// Send Email Magic Link.
 await stytchClient.magicLinks.email.loginOrCreate({
   email: email,
-  login_magic_link_url: REDIRECT_URL_BASE + '/recipes/api-sms-remembered-device-integrated/magic-link-authenticate',
-  signup_magic_link_url: REDIRECT_URL_BASE + '/recipes/api-sms-remembered-device-integrated/magic-link-authenticate',
+  login_magic_link_url: REDIRECT_URL_BASE + '/recipes/api-sms-remembered-device/magic-link-authenticate',
+  signup_magic_link_url: REDIRECT_URL_BASE + '/recipes/api-sms-remembered-device/magic-link-authenticate',
 });
 
 // Function to safely return telemetry ID
@@ -151,7 +152,8 @@ await stytchClient.users.update({
     cardTitle: 'Remembered Device',
     details: 'Build a remembered device authentication flow using Stytch Auth, integrated with our DFP product.',
     description: 'In this example we use a backend Stytch auth flow and DFP to build a remembered device authentication flow. A login attempt from the same device (determined by visitor ID) is considered a known device. This recipe includes two examples: one that uses the standalone DFP product, and one that uses the built-in DFP integration in Stytch auth.',
-    instructions: 'To the right you\'ll see a login form that uses Stytch Auth Flow to remember your device. Enter your email to receive a magic link. The first time you login, you will be prompted to register SMS OTP as a second factor. On subsequent logins, you will only be prompted to authenticate with SMS OTP if you are attempting to authenticate from a new device.',
+    tabDescription: 'The integrated flow combines magic links authenticate and DFP fingerprint lookup into a single call to the Stytch API. You can switch to the Standalone tab if you want to call DFP fingerprint lookup separately.',
+    instructions: 'To the right you\'ll see a login form that uses Stytch\'s integrated Auth + Fraud product to remember your device. Enter your email to receive a magic link. The first time you login, you will be prompted to register SMS OTP as a second factor. On subsequent logins, you will only be prompted to authenticate with SMS OTP if you are attempting to authenticate from a new device.',
     component: <RememberedDeviceIntegrated />,
     tabs: [
       {
@@ -184,7 +186,7 @@ export const getTelemetryId = async () => {
   }
 };
 
-// Call our authenticate API
+// Call our authenticate API with the telemetry ID
 const authenticateResponse = await stytchClient.magicLinks.authenticate({
   token: token,
   session_duration_minutes: 60,

lib/types.ts

@@ -18,6 +18,7 @@ export type LoginType = {
   component: JSX.Element;
   code: string;
   tabs?: RecipeTab[];
+  tabDescription?: string;
   products?: LoginProduct[];
   entryButton?: {
     text: string;