Aggressively deprecate app.urls.xyz & update docs to avoid it

Closes #1587

docs/code-examples/customization.ts

@@ -66,7 +66,7 @@ export default function CustomCredentialSignIn() {
       setError('Please enter your password');
       return;
     }
-    // This will redirect to app.urls.afterSignIn if successful.
+    // This will redirect to the configured afterSignIn URL if successful.
     // You can customize the redirect URL in the StackServerApp constructor.
     const result = await app.signInWithCredential({ email, password });
     // It's better to handle each error code separately, but for simplicity,
@@ -180,7 +180,7 @@ export default function CustomCredentialSignUp() {
       setError('Please enter your password');
       return;
     }
-    // This will redirect to app.urls.afterSignUp if successful.
+    // This will redirect to the configured afterSignUp URL if successful.
     // You can customize the redirect URL in the StackServerApp constructor.
     const result = await app.signUpWithCredential({ email, password });
     // It's better to handle each error code separately, but for simplicity,

docs/content/docs/(guides)/getting-started/users.mdx

@@ -142,7 +142,7 @@ You can also store custom user data in the `clientMetadata`, `serverMetadata`, o
 
 ## Signing out
 
-You can sign out the user by redirecting them to `/handler/sign-out` or simply by calling `user.signOut()`. They will be redirected to the URL [configured as `afterSignOut` in the `StackServerApp`](../sdk/objects/stack-app).
+You can sign out the user by calling `user.signOut()` or by using the app's redirect helper. They will be redirected to the URL [configured as `afterSignOut` in the `StackServerApp`](../sdk/objects/stack-app).
 
 <Tabs defaultValue="signout">
   <TabsList>
@@ -163,12 +163,13 @@ You can sign out the user by redirecting them to `/handler/sign-out` or simply b
   </TabsContent>
 
   <TabsContent value="redirect">
-    ```tsx title="sign-out-link.tsx"
-    import { stackServerApp } from "@/stack/server";
+    ```tsx title="sign-out-button.tsx"
+    "use client";
+    import { useStackApp } from "@stackframe/stack";
 
-    export default async function SignOutLink() {
-      // stackServerApp.urls.signOut is equal to /handler/sign-out
-      return <a href={stackServerApp.urls.signOut}>Sign Out</a>;
+    export default function SignOutButton() {
+      const app = useStackApp();
+      return <button onClick={async () => await app.redirectToSignOut()}>Sign Out</button>;
     }
     ```
   </TabsContent>
@@ -228,13 +229,12 @@ Stack automatically creates a user profile on sign-up. Let's build a page that d
               <UserButton />
               <p>Welcome, {user.displayName ?? "unnamed user"}</p>
               <p>Your e-mail: {user.primaryEmail}</p>
-              <p><a href={stackServerApp.urls.signOut}>Sign Out</a></p>
+              <UserButton />
             </div>
           ) : (
             <div>
               <p>You are not logged in</p>
-              <p><a href={stackServerApp.urls.signIn}>Sign in</a></p>
-              <p><a href={stackServerApp.urls.signUp}>Sign up</a></p>
+              <p>Render a client component that calls <code>stackApp.redirectToSignIn()</code> or <code>stackApp.redirectToSignUp()</code>.</p>
             </div>
           )}
         </div>

docs/content/docs/(guides)/others/supabase.mdx

@@ -120,7 +120,6 @@ Let's create an example page that fetches data from Supabase and displays it.
 
 import { createSupabaseClient } from "@/utils/supabase-client";
 import { useStackApp, useUser } from "@stackframe/stack";
-import Link from "next/link";
 import { useEffect, useState } from "react";
 
 export default function Page() {
@@ -146,9 +145,9 @@ export default function Page() {
         <>
           <p>You are signed in</p>
           <p>User ID: {user.id}</p>
-          <Link href={app.urls.signOut}>Sign Out</Link>
+          <button onClick={async () => await app.redirectToSignOut()}>Sign Out</button>
         </> : 
-        <Link href={app.urls.signIn}>Sign In</Link>
+        <button onClick={async () => await app.redirectToSignIn()}>Sign In</button>
       }
       <h3>Supabase data</h3>
       <ul>{listContent}</ul>

docs/content/docs/sdk/hooks/use-stack-app.mdx

@@ -11,6 +11,6 @@ import { useStackApp } from "@stackframe/stack";
 
 function MyComponent() {
   const stackApp = useStackApp();
-  return <div>Sign In URL: {stackApp.urls.signIn}</div>;
+  return <button onClick={async () => await stackApp.redirectToSignIn()}>Sign in</button>;
 }
 ```