Add example of client component auth

Author: PaulAsjes

src/app/actions/getSignInUrl.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { getSignInUrl } from "@workos-inc/authkit-nextjs";
+
+export const getSignInUrlAction = async () => {
+  return await getSignInUrl();
+};

src/app/actions/signOut.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { signOut } from "@workos-inc/authkit-nextjs";
+
+export const handleSignOutAction = async () => {
+  await signOut();
+};

src/app/components/sign-in-button.tsx

@@ -1,19 +1,31 @@
-import { getSignInUrl, withAuth, signOut } from "@workos-inc/authkit-nextjs";
+"use client";
+
+/**
+ * Example of a client component using the useAuth hook to get the current user session.
+ */
+
 import { Button, Flex } from "@radix-ui/themes";
+import { useAuth } from "@workos-inc/authkit-nextjs/components";
+import { useEffect, useState } from "react";
+import { getSignInUrlAction } from "../actions/getSignInUrl";
+import { handleSignOutAction } from "../actions/signOut";
+
+export function SignInButton({ large }: { large?: boolean }) {
+  const { user, loading } = useAuth();
+  const [signInUrl, setSignInUrl] = useState<string | undefined>(undefined);
 
-export async function SignInButton({ large }: { large?: boolean }) {
-  const { user } = await withAuth();
-  const authorizationUrl = await getSignInUrl();
+  useEffect(() => {
+    getSignInUrlAction().then(setSignInUrl);
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
 
   if (user) {
     return (
       <Flex gap="3">
-        <form
-          action={async () => {
-            "use server";
-            await signOut();
-          }}
-        >
+        <form action={handleSignOutAction}>
           <Button type="submit" size={large ? "3" : "2"}>
             Sign Out
           </Button>
@@ -24,7 +36,7 @@ export async function SignInButton({ large }: { large?: boolean }) {
 
   return (
     <Button asChild size={large ? "3" : "2"}>
-      <a href={authorizationUrl}>Sign In {large && "with AuthKit"}</a>
+      <a href={signInUrl}>Sign In {large && "with AuthKit"}</a>
     </Button>
   );
 }