From 1aa472cad88a37f7beee2b14700b443efcddfb32 Mon Sep 17 00:00:00 2001
From: Matt Davidson <matt.davidson@workos.com>
Date: Thu, 7 May 2026 13:43:51 -0700
Subject: [PATCH] chore: drop Link legacyBehavior

Removes the deprecated <Link legacyBehavior> + <a> wrapper pattern
in favour of Next.js's current API (<Link className=... href=...>).
5 sites: 3 in Layout.js (logo, mobile menu, profile dropdown), and
1 each in LoginWithEmail.js and LoginWithSSO.js (footer cross-links).

No UX change. Removes the deprecation warning in dev console.
---
 components/Layout.js         | 33 ++++++++++++++++-----------------
 components/LoginWithEmail.js |  6 ++----
 components/LoginWithSSO.js   |  6 ++----
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/components/Layout.js b/components/Layout.js
index 6bcab1f..53e5f5c 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -37,10 +37,8 @@ export default function Layout(props) {
               <>
                 <div className="flex px-2 lg:px-0">
                   <div className="flex-shrink-0 flex items-center">
-                    <Link legacyBehavior href="/app">
-                      <a>
-                        <img className="h-8 w-auto" src="/SuperApp.svg" alt="SuperApp Logo" />
-                      </a>
+                    <Link href="/app">
+                      <img className="h-8 w-auto" src="/SuperApp.svg" alt="SuperApp Logo" />
                     </Link>
                   </div>
                   <nav
@@ -169,10 +167,12 @@ export default function Layout(props) {
                             </div>
                             <div className="mt-3 px-2 space-y-1">
                               {userNavigation.map((item) => (
-                                <Link legacyBehavior key={item.name} href={item.href}>
-                                  <a className="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800">
-                                    {item.name}
-                                  </a>
+                                <Link
+                                  key={item.name}
+                                  href={item.href}
+                                  className="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
+                                >
+                                  {item.name}
                                 </Link>
                               ))}
                             </div>
@@ -218,15 +218,14 @@ export default function Layout(props) {
                             {userNavigation.map((item) => (
                               <Menu.Item key={item.name}>
                                 {({ active }) => (
-                                  <Link legacyBehavior href={item.href}>
-                                    <a
-                                      className={classNames(
-                                        active ? 'bg-gray-100' : '',
-                                        'block px-4 py-2 text-sm text-gray-700',
-                                      )}
-                                    >
-                                      {item.name}
-                                    </a>
+                                  <Link
+                                    href={item.href}
+                                    className={classNames(
+                                      active ? 'bg-gray-100' : '',
+                                      'block px-4 py-2 text-sm text-gray-700',
+                                    )}
+                                  >
+                                    {item.name}
                                   </Link>
                                 )}
                               </Menu.Item>
diff --git a/components/LoginWithEmail.js b/components/LoginWithEmail.js
index ce1c1dc..c73f576 100644
--- a/components/LoginWithEmail.js
+++ b/components/LoginWithEmail.js
@@ -49,10 +49,8 @@ export default class LoginWithEmail extends React.Component {
           </div>
           <p className="mt-4 text-center text-sm text-gray-600">
             Or{' '}
-            <Link legacyBehavior href="/app/sso">
-              <a className="font-medium text-blue-600 hover:text-blue-500">
-                continue with SAML SSO
-              </a>
+            <Link href="/app/sso" className="font-medium text-blue-600 hover:text-blue-500">
+              continue with SAML SSO
             </Link>
           </p>
         </div>
diff --git a/components/LoginWithSSO.js b/components/LoginWithSSO.js
index 413e259..792b6d3 100644
--- a/components/LoginWithSSO.js
+++ b/components/LoginWithSSO.js
@@ -48,10 +48,8 @@ export default class LoginWithSSO extends React.Component {
           </div>
           <p className="mt-4 text-center text-sm text-gray-600">
             Or{' '}
-            <Link legacyBehavior href="/app/login">
-              <a className="font-medium text-blue-600 hover:text-blue-500">
-                continue with Magic Link
-              </a>
+            <Link href="/app/login" className="font-medium text-blue-600 hover:text-blue-500">
+              continue with Magic Link
             </Link>
           </p>
         </div>