Add UI for Convex Auth

Author: sshader

src/App.tsx

@@ -1,22 +1,116 @@
 "use client";
 
-import { useMutation, useQuery } from "convex/react";
+import {
+  Authenticated,
+  Unauthenticated,
+  useConvexAuth,
+  useMutation,
+  useQuery,
+} from "convex/react";
 import { api } from "../convex/_generated/api";
+import { useAuthActions } from "@convex-dev/auth/react";
+import { useState } from "react";
 
 export default function App() {
   return (
     <>
       <header className="sticky top-0 z-10 bg-light dark:bg-dark p-4 border-b-2 border-slate-200 dark:border-slate-800">
-        Convex + React
+        Convex + React + Convex Auth
+        <SignOutButton />
       </header>
       <main className="p-8 flex flex-col gap-16">
-        <h1 className="text-4xl font-bold text-center">Convex + React</h1>
-        <Content />
+        <h1 className="text-4xl font-bold text-center">
+          Convex + React + Convex Auth
+        </h1>
+        <Authenticated>
+          <Content />
+        </Authenticated>
+        <Unauthenticated>
+          <SignInForm />
+        </Unauthenticated>
       </main>
     </>
   );
 }
 
+function SignOutButton() {
+  const { isAuthenticated } = useConvexAuth();
+  const { signOut } = useAuthActions();
+  return (
+    <>
+      {isAuthenticated && (
+        <button
+          className="bg-slate-200 dark:bg-slate-800 text-dark dark:text-light rounded-md px-2 py-1"
+          onClick={() => void signOut()}
+        >
+          Sign out
+        </button>
+      )}
+    </>
+  );
+}
+
+function SignInForm() {
+  const { signIn } = useAuthActions();
+  const [flow, setFlow] = useState<"signIn" | "signUp">("signIn");
+  const [error, setError] = useState<string | null>(null);
+  return (
+    <div className="flex flex-col gap-8 w-96 mx-auto">
+      <p>Log in to see the numbers</p>
+      <form
+        className="flex flex-col gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const formData = new FormData(e.target as HTMLFormElement);
+          formData.set("flow", flow);
+          void signIn("password", formData).catch((error) => {
+            setError(error.message);
+          });
+        }}
+      >
+        <input
+          className="bg-light dark:bg-dark text-dark dark:text-light rounded-md p-2 border-2 border-slate-200 dark:border-slate-800"
+          type="email"
+          name="email"
+          placeholder="Email"
+        />
+        <input
+          className="bg-light dark:bg-dark text-dark dark:text-light rounded-md p-2 border-2 border-slate-200 dark:border-slate-800"
+          type="password"
+          name="password"
+          placeholder="Password"
+        />
+        <button
+          className="bg-dark dark:bg-light text-light dark:text-dark rounded-md"
+          type="submit"
+        >
+          {flow === "signIn" ? "Sign in" : "Sign up"}
+        </button>
+        <div className="flex flex-row gap-2">
+          <span>
+            {flow === "signIn"
+              ? "Don't have an account?"
+              : "Already have an account?"}
+          </span>
+          <span
+            className="text-dark dark:text-light underline hover:no-underline cursor-pointer"
+            onClick={() => setFlow(flow === "signIn" ? "signUp" : "signIn")}
+          >
+            {flow === "signIn" ? "Sign up instead" : "Sign in instead"}
+          </span>
+        </div>
+        {error && (
+          <div className="bg-red-500/20 border-2 border-red-500/50 rounded-md p-2">
+            <p className="text-dark dark:text-light font-mono text-xs">
+              Error signing in: {error}
+            </p>
+          </div>
+        )}
+      </form>
+    </div>
+  );
+}
+
 function Content() {
   const { viewer, numbers } =
     useQuery(api.myFunctions.listNumbers, {