feat: replace login route with auth modal

- Add AuthModal to root layout driven by ?modal=auth search param
- Update multiplayer and play beforeLoad redirects to use modal
- Update NavAuth and Hero links to use modal
- Delete login route and NavLogin component

apps/web/src/components/auth/AuthModal.tsx

@@ -4,7 +4,7 @@ import { authClient } from "../../lib/auth-client";
 
 type Tab = "login" | "register";
 
-type AuthModalProps = { onClose: () => void };
+type AuthModalProps = { onClose: () => void; onSuccess: () => void };
 
 type LoginFormProps = { onSuccess: () => void };
 
@@ -142,11 +142,14 @@ const RegisterForm = ({ onSuccess }: RegisterFormProps) => {
   );
 };
 
-const SocialButtons = () => {
+type SocialButtonsProps = { onSuccess: () => void };
+
+const SocialButtons = ({ onSuccess }: SocialButtonsProps) => {
   const handleSocial = (provider: "google" | "github") => {
     void authClient.signIn.social(
       { provider, callbackURL: window.location.origin },
       {
+        onSuccess,
         onError: (ctx) => {
           toast.error(ctx.error.message ?? "Something went wrong.");
         },
@@ -179,7 +182,7 @@ const SocialButtons = () => {
   );
 };
 
-export const AuthModal = ({ onClose }: AuthModalProps) => {
+export const AuthModal = ({ onClose, onSuccess }: AuthModalProps) => {
   const [tab, setTab] = useState<Tab>("login");
 
   useEffect(() => {
@@ -233,13 +236,13 @@ export const AuthModal = ({ onClose }: AuthModalProps) => {
         </div>
 
         {tab === "login" ? (
-          <LoginForm onSuccess={onClose} />
+          <LoginForm onSuccess={onSuccess} />
         ) : (
           <RegisterForm onSuccess={onClose} />
         )}
 
         {/* Social */}
-        <SocialButtons />
+        <SocialButtons onSuccess={onSuccess} />
       </div>
     </div>
   );

apps/web/src/components/landing/Hero.tsx

@@ -66,13 +66,15 @@ const Hero = () => {
             ) : (
               <>
                 <Link
-                  to="/login"
+                  to="/"
+                  search={{ modal: "auth" }}
                   className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
                 >
                   Get started
                 </Link>
                 <Link
-                  to="/login"
+                  to="/"
+                  search={{ modal: "auth" }}
                   className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
                 >
                   Log in

apps/web/src/components/navbar/NavAuth.tsx

@@ -24,13 +24,14 @@ const NavAuth = () => {
         </button>
       ) : (
         <Link
-          to="/login"
+          to="/"
+          search={{ modal: "auth" }}
           className="text-sm font-medium px-4 py-1.5 rounded-full
             text-white bg-(--color-primary)
             hover:bg-(--color-primary-dark)
             transition-colors duration-200"
         >
-          Sign in
+          Login
         </Link>
       )}
     </div>