@xouteiro/auth_npm 1.0.6 → 1.0.7

package/README.md

@@ -0,0 +1,2 @@
+# SupabaseAuth-Npm-Package
+Npm package that handles supabase authentication

package/dist/index.js

@@ -1361,7 +1361,7 @@ var require_react_development = __commonJS({
           }
           return dispatcher.useContext(Context);
         }
-        function useState3(initialState) {
+        function useState6(initialState) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useState(initialState);
         }
@@ -1373,7 +1373,7 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
-        function useEffect3(create, deps) {
+        function useEffect2(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useEffect(create, deps);
         }
@@ -2156,7 +2156,7 @@ var require_react_development = __commonJS({
         exports2.useContext = useContext;
         exports2.useDebugValue = useDebugValue;
         exports2.useDeferredValue = useDeferredValue;
-        exports2.useEffect = useEffect3;
+        exports2.useEffect = useEffect2;
         exports2.useId = useId;
         exports2.useImperativeHandle = useImperativeHandle;
         exports2.useInsertionEffect = useInsertionEffect;
@@ -2164,7 +2164,7 @@ var require_react_development = __commonJS({
         exports2.useMemo = useMemo;
         exports2.useReducer = useReducer;
         exports2.useRef = useRef;
-        exports2.useState = useState3;
+        exports2.useState = useState6;
         exports2.useSyncExternalStore = useSyncExternalStore;
         exports2.useTransition = useTransition;
         exports2.version = ReactVersion;
@@ -2191,8 +2191,10 @@ var require_react = __commonJS({
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
-  AuthWrapper: () => AuthWrapper,
+  LoginOnly: () => LoginOnly,
+  LoginRegisterFlow: () => LoginRegisterFlow,
   LogoutButton: () => LogoutButton,
+  RegisterOnly: () => RegisterOnly,
   initializeSupabase: () => initializeSupabase,
   isAdmin: () => isAdmin,
   logout: () => logout,
@@ -2203,57 +2205,11 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/AuthWrapper.jsx
+// src/useAuth.js
 var import_react = __toESM(require_react());
-var import_auth_ui_react = require("@supabase/auth-ui-react");
-var import_auth_ui_shared = require("@supabase/auth-ui-shared");
-
-// src/supabaseClient.js
-var import_supabase_js = require("@supabase/supabase-js");
-var supabase = null;
-function initializeSupabase(url, anonKey) {
-  if (!url || !anonKey) {
-    throw new Error("Supabase URL and Anon Key are required to initialize the client.");
-  }
-  supabase = (0, import_supabase_js.createClient)(url, anonKey);
-}
-
-// src/AuthWrapper.jsx
-function AuthWrapper({ onAuth, providers = ["google", "github"], theme = "dark" }) {
-  if (!supabase) {
-    throw new Error("Supabase client is not initialized. Call initializeSupabase() before using AuthWrapper.");
-  }
+function useAuth(supabaseClient) {
   const [session, setSession] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
-    supabase.auth.getSession().then(({ data: { session: session2 } }) => {
-      setSession(session2);
-      if (session2) onAuth == null ? void 0 : onAuth(session2);
-    });
-    const { data: subscription } = supabase.auth.onAuthStateChange((_event, session2) => {
-      setSession(session2);
-      if (session2) onAuth == null ? void 0 : onAuth(session2);
-    });
-    return () => subscription == null ? void 0 : subscription.unsubscribe();
-  }, [onAuth]);
-  if (!session) {
-    return /* @__PURE__ */ React.createElement(
-      import_auth_ui_react.Auth,
-      {
-        supabaseClient: supabase,
-        appearance: { theme: import_auth_ui_shared.ThemeSupa },
-        providers,
-        theme
-      }
-    );
-  }
-  return /* @__PURE__ */ React.createElement("div", null, "\u2705 Logged in as: ", session.user.email);
-}
-
-// src/useAuth.js
-var import_react2 = __toESM(require_react());
-function useAuth(supabaseClient) {
-  const [session, setSession] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
     supabaseClient.auth.getSession().then(({ data: { session: session2 } }) => {
       setSession(session2);
     });
@@ -2269,21 +2225,21 @@ function useAuth(supabaseClient) {
   return { session, signOut };
 }
 
-// src/LogoutButton.jsx
-function LogoutButton({ supabaseClient, onLogout }) {
-  const { signOut } = useAuth(supabaseClient);
-  const handleLogout = async () => {
-    await signOut();
-    onLogout == null ? void 0 : onLogout();
-  };
-  return /* @__PURE__ */ React.createElement("button", { onClick: handleLogout }, "\u{1F6AA} Log out");
-}
-
 // src/utils.js
 function isAdmin(user) {
   return (user == null ? void 0 : user.role) === "admin";
 }
 
+// src/supabaseClient.js
+var import_supabase_js = require("@supabase/supabase-js");
+var supabase = null;
+function initializeSupabase(url, anonKey) {
+  if (!url || !anonKey) {
+    throw new Error("Supabase URL and Anon Key are required to initialize the client.");
+  }
+  supabase = (0, import_supabase_js.createClient)(url, anonKey);
+}
+
 // src/login.js
 async function signInWithEmail(email, password) {
   try {
@@ -2333,10 +2289,171 @@ async function logout() {
     return { error: err };
   }
 }
+
+// src/components/LoginRegisterFlow.jsx
+var import_react2 = __toESM(require_react());
+function LoginRegisterFlow() {
+  const [mode, setMode] = (0, import_react2.useState)("login");
+  const [identifier, setIdentifier] = (0, import_react2.useState)("");
+  const [password, setPassword] = (0, import_react2.useState)("");
+  const [username, setUsername] = (0, import_react2.useState)("");
+  const [phone, setPhone] = (0, import_react2.useState)("");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await signInWithEmail(identifier, password);
+    setError(error2 ? error2.message : null);
+  };
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await registerWithEmail(identifier, password, username, phone);
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("button", { onClick: () => setMode("login") }, "Login"), /* @__PURE__ */ import_react2.default.createElement("button", { onClick: () => setMode("register") }, "Register"), mode === "login" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email, phone, or username",
+      value: identifier,
+      onChange: (e) => setIdentifier(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement("button", { type: "submit" }, "Login")) : /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email",
+      value: identifier,
+      onChange: (e) => setIdentifier(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Username (optional)",
+      value: username,
+      onChange: (e) => setUsername(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Phone (optional)",
+      value: phone,
+      onChange: (e) => setPhone(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement("button", { type: "submit" }, "Register")), error && /* @__PURE__ */ import_react2.default.createElement("div", { style: { color: "red" } }, error));
+}
+
+// src/components/LoginOnly.jsx
+var import_react3 = __toESM(require_react());
+function LoginOnly() {
+  const [identifier, setIdentifier] = (0, import_react3.useState)("");
+  const [password, setPassword] = (0, import_react3.useState)("");
+  const [error, setError] = (0, import_react3.useState)(null);
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await signInWithEmail(identifier, password);
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email, phone, or username",
+      value: identifier,
+      onChange: (e) => setIdentifier(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react3.default.createElement("button", { type: "submit" }, "Login"), error && /* @__PURE__ */ import_react3.default.createElement("div", { style: { color: "red" } }, error));
+}
+
+// src/components/RegisterOnly.jsx
+var import_react4 = __toESM(require_react());
+function RegisterOnly() {
+  const [email, setEmail] = (0, import_react4.useState)("");
+  const [password, setPassword] = (0, import_react4.useState)("");
+  const [username, setUsername] = (0, import_react4.useState)("");
+  const [phone, setPhone] = (0, import_react4.useState)("");
+  const [error, setError] = (0, import_react4.useState)(null);
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await registerWithEmail(email, password, username, phone);
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email",
+      value: email,
+      onChange: (e) => setEmail(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Username (optional)",
+      value: username,
+      onChange: (e) => setUsername(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Phone (optional)",
+      value: phone,
+      onChange: (e) => setPhone(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement("button", { type: "submit" }, "Register"), error && /* @__PURE__ */ import_react4.default.createElement("div", { style: { color: "red" } }, error));
+}
+
+// src/components/LogoutButton.jsx
+var import_react5 = __toESM(require_react());
+function LogoutButton() {
+  const [error, setError] = (0, import_react5.useState)(null);
+  const handleLogout = async () => {
+    const { error: error2 } = await logout();
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("button", { onClick: handleLogout }, "Logout"), error && /* @__PURE__ */ import_react5.default.createElement("div", { style: { color: "red" } }, error));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AuthWrapper,
+  LoginOnly,
+  LoginRegisterFlow,
   LogoutButton,
+  RegisterOnly,
   initializeSupabase,
   isAdmin,
   logout,

package/dist/index.mjs

@@ -1356,7 +1356,7 @@ var require_react_development = __commonJS({
           }
           return dispatcher.useContext(Context);
         }
-        function useState3(initialState) {
+        function useState6(initialState) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useState(initialState);
         }
@@ -1368,7 +1368,7 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
-        function useEffect3(create, deps) {
+        function useEffect2(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useEffect(create, deps);
         }
@@ -2151,7 +2151,7 @@ var require_react_development = __commonJS({
         exports.useContext = useContext;
         exports.useDebugValue = useDebugValue;
         exports.useDeferredValue = useDeferredValue;
-        exports.useEffect = useEffect3;
+        exports.useEffect = useEffect2;
         exports.useId = useId;
         exports.useImperativeHandle = useImperativeHandle;
         exports.useInsertionEffect = useInsertionEffect;
@@ -2159,7 +2159,7 @@ var require_react_development = __commonJS({
         exports.useMemo = useMemo;
         exports.useReducer = useReducer;
         exports.useRef = useRef;
-        exports.useState = useState3;
+        exports.useState = useState6;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
         exports.version = ReactVersion;
@@ -2183,57 +2183,11 @@ var require_react = __commonJS({
   }
 });
 
-// src/AuthWrapper.jsx
+// src/useAuth.js
 var import_react = __toESM(require_react());
-import { Auth } from "@supabase/auth-ui-react";
-import { ThemeSupa } from "@supabase/auth-ui-shared";
-
-// src/supabaseClient.js
-import { createClient } from "@supabase/supabase-js";
-var supabase = null;
-function initializeSupabase(url, anonKey) {
-  if (!url || !anonKey) {
-    throw new Error("Supabase URL and Anon Key are required to initialize the client.");
-  }
-  supabase = createClient(url, anonKey);
-}
-
-// src/AuthWrapper.jsx
-function AuthWrapper({ onAuth, providers = ["google", "github"], theme = "dark" }) {
-  if (!supabase) {
-    throw new Error("Supabase client is not initialized. Call initializeSupabase() before using AuthWrapper.");
-  }
+function useAuth(supabaseClient) {
   const [session, setSession] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
-    supabase.auth.getSession().then(({ data: { session: session2 } }) => {
-      setSession(session2);
-      if (session2) onAuth == null ? void 0 : onAuth(session2);
-    });
-    const { data: subscription } = supabase.auth.onAuthStateChange((_event, session2) => {
-      setSession(session2);
-      if (session2) onAuth == null ? void 0 : onAuth(session2);
-    });
-    return () => subscription == null ? void 0 : subscription.unsubscribe();
-  }, [onAuth]);
-  if (!session) {
-    return /* @__PURE__ */ React.createElement(
-      Auth,
-      {
-        supabaseClient: supabase,
-        appearance: { theme: ThemeSupa },
-        providers,
-        theme
-      }
-    );
-  }
-  return /* @__PURE__ */ React.createElement("div", null, "\u2705 Logged in as: ", session.user.email);
-}
-
-// src/useAuth.js
-var import_react2 = __toESM(require_react());
-function useAuth(supabaseClient) {
-  const [session, setSession] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
     supabaseClient.auth.getSession().then(({ data: { session: session2 } }) => {
       setSession(session2);
     });
@@ -2249,21 +2203,21 @@ function useAuth(supabaseClient) {
   return { session, signOut };
 }
 
-// src/LogoutButton.jsx
-function LogoutButton({ supabaseClient, onLogout }) {
-  const { signOut } = useAuth(supabaseClient);
-  const handleLogout = async () => {
-    await signOut();
-    onLogout == null ? void 0 : onLogout();
-  };
-  return /* @__PURE__ */ React.createElement("button", { onClick: handleLogout }, "\u{1F6AA} Log out");
-}
-
 // src/utils.js
 function isAdmin(user) {
   return (user == null ? void 0 : user.role) === "admin";
 }
 
+// src/supabaseClient.js
+import { createClient } from "@supabase/supabase-js";
+var supabase = null;
+function initializeSupabase(url, anonKey) {
+  if (!url || !anonKey) {
+    throw new Error("Supabase URL and Anon Key are required to initialize the client.");
+  }
+  supabase = createClient(url, anonKey);
+}
+
 // src/login.js
 async function signInWithEmail(email, password) {
   try {
@@ -2313,9 +2267,170 @@ async function logout() {
     return { error: err };
   }
 }
+
+// src/components/LoginRegisterFlow.jsx
+var import_react2 = __toESM(require_react());
+function LoginRegisterFlow() {
+  const [mode, setMode] = (0, import_react2.useState)("login");
+  const [identifier, setIdentifier] = (0, import_react2.useState)("");
+  const [password, setPassword] = (0, import_react2.useState)("");
+  const [username, setUsername] = (0, import_react2.useState)("");
+  const [phone, setPhone] = (0, import_react2.useState)("");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await signInWithEmail(identifier, password);
+    setError(error2 ? error2.message : null);
+  };
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await registerWithEmail(identifier, password, username, phone);
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("button", { onClick: () => setMode("login") }, "Login"), /* @__PURE__ */ import_react2.default.createElement("button", { onClick: () => setMode("register") }, "Register"), mode === "login" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email, phone, or username",
+      value: identifier,
+      onChange: (e) => setIdentifier(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement("button", { type: "submit" }, "Login")) : /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email",
+      value: identifier,
+      onChange: (e) => setIdentifier(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Username (optional)",
+      value: username,
+      onChange: (e) => setUsername(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Phone (optional)",
+      value: phone,
+      onChange: (e) => setPhone(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement("button", { type: "submit" }, "Register")), error && /* @__PURE__ */ import_react2.default.createElement("div", { style: { color: "red" } }, error));
+}
+
+// src/components/LoginOnly.jsx
+var import_react3 = __toESM(require_react());
+function LoginOnly() {
+  const [identifier, setIdentifier] = (0, import_react3.useState)("");
+  const [password, setPassword] = (0, import_react3.useState)("");
+  const [error, setError] = (0, import_react3.useState)(null);
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await signInWithEmail(identifier, password);
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleLogin }, /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email, phone, or username",
+      value: identifier,
+      onChange: (e) => setIdentifier(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react3.default.createElement("button", { type: "submit" }, "Login"), error && /* @__PURE__ */ import_react3.default.createElement("div", { style: { color: "red" } }, error));
+}
+
+// src/components/RegisterOnly.jsx
+var import_react4 = __toESM(require_react());
+function RegisterOnly() {
+  const [email, setEmail] = (0, import_react4.useState)("");
+  const [password, setPassword] = (0, import_react4.useState)("");
+  const [username, setUsername] = (0, import_react4.useState)("");
+  const [phone, setPhone] = (0, import_react4.useState)("");
+  const [error, setError] = (0, import_react4.useState)(null);
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const { error: error2 } = await registerWithEmail(email, password, username, phone);
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleRegister }, /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Email",
+      value: email,
+      onChange: (e) => setEmail(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "password",
+      placeholder: "Password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Username (optional)",
+      value: username,
+      onChange: (e) => setUsername(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Phone (optional)",
+      value: phone,
+      onChange: (e) => setPhone(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement("button", { type: "submit" }, "Register"), error && /* @__PURE__ */ import_react4.default.createElement("div", { style: { color: "red" } }, error));
+}
+
+// src/components/LogoutButton.jsx
+var import_react5 = __toESM(require_react());
+function LogoutButton() {
+  const [error, setError] = (0, import_react5.useState)(null);
+  const handleLogout = async () => {
+    const { error: error2 } = await logout();
+    setError(error2 ? error2.message : null);
+  };
+  return /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("button", { onClick: handleLogout }, "Logout"), error && /* @__PURE__ */ import_react5.default.createElement("div", { style: { color: "red" } }, error));
+}
 export {
-  AuthWrapper,
+  LoginOnly,
+  LoginRegisterFlow,
   LogoutButton,
+  RegisterOnly,
   initializeSupabase,
   isAdmin,
   logout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xouteiro/auth_npm",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Authentication package for Supabase",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/components/LoginOnly.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { signInWithEmail } from '../login';
+
+export default function LoginOnly() {
+  const [identifier, setIdentifier] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState(null);
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const { error } = await signInWithEmail(identifier, password);
+    setError(error ? error.message : null);
+  };
+
+  return (
+    <form onSubmit={handleLogin}>
+      <input
+        type="text"
+        placeholder="Email, phone, or username"
+        value={identifier}
+        onChange={e => setIdentifier(e.target.value)}
+      />
+      <input
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={e => setPassword(e.target.value)}
+      />
+      <button type="submit">Login</button>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+    </form>
+  );
+}

package/src/components/LoginRegisterFlow.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { signInWithEmail } from '../login';
+import { registerWithEmail } from '../register';
+
+export default function LoginRegisterFlow() {
+  const [mode, setMode] = useState('login');
+  const [identifier, setIdentifier] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [phone, setPhone] = useState('');
+  const [error, setError] = useState(null);
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const { error } = await signInWithEmail(identifier, password);
+    setError(error ? error.message : null);
+  };
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const { error } = await registerWithEmail(identifier, password, username, phone);
+    setError(error ? error.message : null);
+  };
+
+  return (
+    <div>
+      <button onClick={() => setMode('login')}>Login</button>
+      <button onClick={() => setMode('register')}>Register</button>
+      {mode === 'login' ? (
+        <form onSubmit={handleLogin}>
+          <input
+            type="text"
+            placeholder="Email, phone, or username"
+            value={identifier}
+            onChange={e => setIdentifier(e.target.value)}
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+          />
+          <button type="submit">Login</button>
+        </form>
+      ) : (
+        <form onSubmit={handleRegister}>
+          <input
+            type="text"
+            placeholder="Email"
+            value={identifier}
+            onChange={e => setIdentifier(e.target.value)}
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+          />
+          <input
+            type="text"
+            placeholder="Username (optional)"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+          />
+          <input
+            type="text"
+            placeholder="Phone (optional)"
+            value={phone}
+            onChange={e => setPhone(e.target.value)}
+          />
+          <button type="submit">Register</button>
+        </form>
+      )}
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+    </div>
+  );
+}

package/src/components/LogoutButton.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { logout } from '../logout';
+
+export default function LogoutButton() {
+  const [error, setError] = useState(null);
+
+  const handleLogout = async () => {
+    const { error } = await logout();
+    setError(error ? error.message : null);
+  };
+
+  return (
+    <div>
+      <button onClick={handleLogout}>Logout</button>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+    </div>
+  );
+}

package/src/components/RegisterOnly.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { registerWithEmail } from '../register';
+
+export default function RegisterOnly() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [phone, setPhone] = useState('');
+  const [error, setError] = useState(null);
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const { error } = await registerWithEmail(email, password, username, phone);
+    setError(error ? error.message : null);
+  };
+
+  return (
+    <form onSubmit={handleRegister}>
+      <input
+        type="text"
+        placeholder="Email"
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+      />
+      <input
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={e => setPassword(e.target.value)}
+      />
+      <input
+        type="text"
+        placeholder="Username (optional)"
+        value={username}
+        onChange={e => setUsername(e.target.value)}
+      />
+      <input
+        type="text"
+        placeholder="Phone (optional)"
+        value={phone}
+        onChange={e => setPhone(e.target.value)}
+      />
+      <button type="submit">Register</button>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+    </form>
+  );
+}

package/src/index.js

@@ -1,9 +1,12 @@
-export { default as AuthWrapper } from './AuthWrapper';
-export { default as LogoutButton } from './LogoutButton';
 export { useAuth } from './useAuth';
 export { isAdmin } from './utils';
 export { supabase } from './supabaseClient';
 export { signInWithEmail } from './login'; // Add this line
 export { initializeSupabase } from './supabaseClient';
 export { registerWithEmail } from './register';
-export { logout } from './logout';
+export { logout } from './logout';
+
+export { default as LoginRegisterFlow } from './components/LoginRegisterFlow';
+export { default as LoginOnly } from './components/LoginOnly';
+export { default as RegisterOnly } from './components/RegisterOnly';
+export { default as LogoutButton } from './components/LogoutButton';

package/src/AuthWrapper.jsx

@@ -1,39 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Auth } from '@supabase/auth-ui-react'
-import { ThemeSupa } from '@supabase/auth-ui-shared'
-import { supabase } from './supabaseClient'
-
-export default function AuthWrapper({ onAuth, providers = ['google', 'github'], theme = 'dark' }) {
-  if (!supabase) {
-    throw new Error('Supabase client is not initialized. Call initializeSupabase() before using AuthWrapper.')
-  }
-
-  const [session, setSession] = useState(null)
-
-  useEffect(() => {
-    supabase.auth.getSession().then(({ data: { session } }) => {
-      setSession(session)
-      if (session) onAuth?.(session)
-    })
-
-    const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
-      setSession(session)
-      if (session) onAuth?.(session)
-    })
-
-    return () => subscription?.unsubscribe()
-  }, [onAuth])
-
-  if (!session) {
-    return (
-      <Auth
-        supabaseClient={supabase}
-        appearance={{ theme: ThemeSupa }}
-        providers={providers}
-        theme={theme}
-      />
-    )
-  }
-
-  return <div>✅ Logged in as: {session.user.email}</div>
-}

package/src/LogoutButton.jsx

@@ -1,12 +0,0 @@
-import { useAuth } from './useAuth'
-
-export default function LogoutButton({ supabaseClient, onLogout }) {
-  const { signOut } = useAuth(supabaseClient)
-
-  const handleLogout = async () => {
-    await signOut()
-    onLogout?.()
-  }
-
-  return <button onClick={handleLogout}>🚪 Log out</button>
-}