chore(*): updated shad example app deps and home page

Author: dackers86

examples/shadcn/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@invertase/firebaseui-core": "0.0.4",
+    "@invertase/firebaseui-core": "0.0.5",
     "@invertase/firebaseui-react": "workspace:*",
     "@invertase/firebaseui-styles": "0.0.9",
     "@invertase/firebaseui-translations": "0.0.4",

examples/shadcn/src/App.tsx

@@ -14,75 +14,104 @@
  * limitations under the License.
  */
 
-import { NavLink } from "react-router";
+import { Link, useNavigate } from "react-router";
+import { routes } from "./routes";
 import { useUser } from "./firebase/hooks";
+import { auth } from "./firebase/firebase";
+import { multiFactor, sendEmailVerification, signOut } from "firebase/auth";
 
 function App() {
   const user = useUser();
 
+  if (user) {
+    return <AuthenticatedApp />;
+  }
+
+  return <UnauthenticatedApp />;
+}
+
+function UnauthenticatedApp() {
+  return (
+    <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">
+      <div className="text-center space-y-4">
+        <img src="/firebase-logo-inverted.png" alt="Firebase UI" className="hidden dark:block h-36 mx-auto" />
+        <img src="/firebase-logo.png" alt="Firebase UI" className="block dark:hidden h-36 mx-auto" />
+        <p className="text-sm text-gray-700 dark:text-gray-300">
+          Welcome to Firebase UI, choose an example screen below to get started!
+        </p>
+      </div>
+      <div className="border border-neutral-800 rounded divide-y divide-neutral-800 overflow-hidden">
+        {routes.map((route) => (
+          <Link
+            key={route.path}
+            to={route.path}
+            className="flex items-center justify-between hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 p-4"
+          >
+            <div className="space-y-1">
+              <h2 className="font-medium text-sm">{route.name}</h2>
+              <p className="text-xs text-gray-400 dark:text-gray-300">{route.description}</p>
+            </div>
+            <div>
+              <span className="text-xl">&rarr;</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function AuthenticatedApp() {
+  const user = useUser()!;
+  const mfa = multiFactor(user);
+  const navigate = useNavigate();
+
   return (
-    <div className="p-8 ">
-      <h1 className="text-3xl font-bold mb-6">Firebase UI Demo</h1>
-      <div className="mb-6">{user && <div>Welcome: {user.email || user.phoneNumber}</div>}</div>
-      <div>
-        <h2 className="text-2xl font-bold mb-4">Auth Screens</h2>
-        <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-          <li>
-            <NavLink to="/screens/sign-in-auth-screen" className="text-blue-500 hover:underline">
-              Sign In Auth Screen
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/sign-in-auth-screen-w-handlers" className="text-blue-500 hover:underline">
-              Sign In Auth Screen with Handlers
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/sign-in-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Sign In Auth Screen with OAuth
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/email-link-auth-screen" className="text-blue-500 hover:underline">
-              Email Link Auth Screen
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/email-link-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Email Link Auth Screen with OAuth
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/phone-auth-screen" className="text-blue-500 hover:underline">
-              Phone Auth Screen
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/phone-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Phone Auth Screen with OAuth
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/sign-up-auth-screen" className="text-blue-500 hover:underline">
-              Sign Up Auth Screen
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/sign-up-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Sign Up Auth Screen with OAuth
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/oauth-screen" className="text-blue-500 hover:underline">
-              OAuth Screen
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/screens/password-reset-screen" className="text-blue-500 hover:underline">
-              Password Reset Screen
-            </NavLink>
-          </li>
-        </ul>
+    <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">
+      <div className="border border-neutral-800 rounded p-4 space-y-4">
+        <h1 className="text-md font-medium">Welcome, {user.displayName || user.email || user.phoneNumber}</h1>
+        {user.emailVerified ? (
+          <div className="text-green-500">Email verified</div>
+        ) : (
+          <button
+            className="bg-red-500 text-white px-3 py-1.5 rounded text-sm"
+            onClick={async () => {
+              try {
+                await sendEmailVerification(user);
+                alert("Email verification sent, please check your email");
+              } catch (error) {
+                console.error(error);
+                alert("Error sending email verification, check console");
+              }
+            }}
+          >
+            Verify Email &rarr;
+          </button>
+        )}
+        <hr className="opacity-20" />
+        <h2 className="text-sm font-medium">Multi-factor Authentication</h2>
+        {mfa.enrolledFactors.map((factor) => {
+          return (
+            <div key={factor.factorId}>
+              {factor.factorId} - {factor.displayName}
+            </div>
+          );
+        })}
+        <button
+          className="bg-blue-500 text-white px-3 py-1.5 rounded text-sm"
+          onClick={() => {
+            navigate("/screens/mfa-enrollment-screen");
+          }}
+        >
+          Add MFA Factor &rarr;
+        </button>
+        <hr className="opacity-20" />
+        <button
+          className="bg-blue-500 text-white px-3 py-1.5 rounded text-sm"
+          onClick={async () => await signOut(auth)}
+        >
+          Sign Out &rarr;
+        </button>
       </div>
     </div>
   );