@convex-dev/convex-lucia-auth - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

cjs/react.js

@@ -12,3 +12,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMutationWithAuth = exports.useQueryWithAuth = exports.SignOutButton = exports.SignUpSignIn = exports.setSavedSessionId = exports.SessionProvider = exports.useSetSessionId = exports.useSessionId = void 0;
+exports.useMutationWithAuth = exports.useQueryWithAuth = exports.useSignOut = exports.useSignUpSignIn = exports.SignOutButton = exports.SignUpSignIn = exports.setSavedSessionId = exports.SessionProvider = exports.useSetSessionId = exports.useSessionId = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -48,8 +48,36 @@ const react_1 = require("convex/react");
 // Sign in / sign up
-function SignUpSignIn({ labelClassName, inputClassName, buttonClassName, flowToggleClassName, signIn, signUp, onError, }) {
+function SignUpSignIn({ labelClassName, inputClassName, buttonClassName, flowToggleClassName, errorDisplayClassName, signIn, signUp, onError, }) {
+    const { flow, toggleFlow, onSubmit, error } = useSignUpSignIn({
+        signIn,
+        signUp,
+        onError,
+    });
+    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)("label", { className: labelClassName, htmlFor: "username", children: "Email" }), (0, jsx_runtime_1.jsx)("input", { className: inputClassName, name: "email", id: "email", autoComplete: "username" }), (0, jsx_runtime_1.jsx)("label", { className: labelClassName, htmlFor: "password", children: "Password" }), (0, jsx_runtime_1.jsx)("input", { className: inputClassName, type: "password", name: "password", id: "password", autoComplete: flow === "signIn" ? "current-password" : "new-password" }), (0, jsx_runtime_1.jsx)("input", { className: buttonClassName, type: "submit", value: flow === "signIn" ? "Sign in" : "Sign up" }), (0, jsx_runtime_1.jsx)("a", { className: flowToggleClassName, onClick: toggleFlow, children: flow === "signIn"
+                    ? "Don't have an account? Sign up"
+                    : "Already have an account? Sign in" }), (0, jsx_runtime_1.jsx)("div", { className: errorDisplayClassName, children: error !== undefined
+                    ? flow === "signIn"
+                        ? "Could not sign in, did you mean to sign up?"
+                        : "Could not sign up, did you mean to sign in?"
+                    : null })] }));
+}
+exports.SignUpSignIn = SignUpSignIn;
+// Sign out
+function SignOutButton({ className }) {
+    return ((0, jsx_runtime_1.jsx)("button", { className: className, onClick: useSignOut(), children: "Logout" }));
+}
+exports.SignOutButton = SignOutButton;
+// Hooks
+function useSignUpSignIn({ signIn, signUp, onError, }) {
     const setSessionId = useSetSessionId();
     const [flow, setFlow] = (0, react_2.useState)("signIn");
-    const handleSubmit = (event) => __awaiter(this, void 0, void 0, function* () {
+    const [error, setError] = (0, react_2.useState)();
+    const toggleFlow = (0, react_2.useCallback)(() => {
+        setFlow(flow === "signIn" ? "signUp" : "signIn");
+        clearError();
+    }, [flow, setFlow]);
+    const clearError = (0, react_2.useCallback)(() => setError(undefined), [setError]);
+    const onSubmit = (event) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b;
         event.preventDefault();
+        clearError();
         const data = new FormData(event.currentTarget);
@@ -67,18 +95,14 @@ try {
             onError === null || onError === void 0 ? void 0 : onError(flow, error);
+            setError(error);
         }
     });
-    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)("label", { className: labelClassName, htmlFor: "username", children: "Email" }), (0, jsx_runtime_1.jsx)("input", { className: inputClassName, name: "email", id: "email" }), (0, jsx_runtime_1.jsx)("label", { className: labelClassName, htmlFor: "password", children: "Password" }), (0, jsx_runtime_1.jsx)("input", { className: inputClassName, type: "password", name: "password", id: "password" }), (0, jsx_runtime_1.jsx)("input", { className: buttonClassName, type: "submit", value: flow === "signIn" ? "Sign in" : "Sign up" }), (0, jsx_runtime_1.jsx)("a", { className: flowToggleClassName, onClick: () => {
-                    setFlow(flow === "signIn" ? "signUp" : "signIn");
-                }, children: flow === "signIn"
-                    ? "Don't have an account? Sign up"
-                    : "Already have an account? Sign in" })] }));
+    return { onSubmit, flow, setFlow, toggleFlow, error, setError, clearError };
 }
-exports.SignUpSignIn = SignUpSignIn;
-// Sign out
-function SignOutButton({ className }) {
+exports.useSignUpSignIn = useSignUpSignIn;
+function useSignOut() {
     const setSessionId = useSetSessionId();
-    return ((0, jsx_runtime_1.jsx)("button", { className: className, onClick: () => setSessionId(null), children: "Logout" }));
+    return (0, react_2.useCallback)(() => setSessionId(null), [setSessionId]);
 }
-exports.SignOutButton = SignOutButton;
-// Hooks
+exports.useSignOut = useSignOut;
+// Convex Hooks
 function useQueryWithAuth(query, args) {
@@ -85,0 +109,0 @@ const sessionId = useSessionId();

esm/react.js

@@ -31,7 +31,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Sign in / sign up
-export function SignUpSignIn({ labelClassName, inputClassName, buttonClassName, flowToggleClassName, signIn, signUp, onError, }) {
+export function SignUpSignIn({ labelClassName, inputClassName, buttonClassName, flowToggleClassName, errorDisplayClassName, signIn, signUp, onError, }) {
+    const { flow, toggleFlow, onSubmit, error } = useSignUpSignIn({
+        signIn,
+        signUp,
+        onError,
+    });
+    return (_jsxs("form", { onSubmit: onSubmit, children: [_jsx("label", { className: labelClassName, htmlFor: "username", children: "Email" }), _jsx("input", { className: inputClassName, name: "email", id: "email", autoComplete: "username" }), _jsx("label", { className: labelClassName, htmlFor: "password", children: "Password" }), _jsx("input", { className: inputClassName, type: "password", name: "password", id: "password", autoComplete: flow === "signIn" ? "current-password" : "new-password" }), _jsx("input", { className: buttonClassName, type: "submit", value: flow === "signIn" ? "Sign in" : "Sign up" }), _jsx("a", { className: flowToggleClassName, onClick: toggleFlow, children: flow === "signIn"
+                    ? "Don't have an account? Sign up"
+                    : "Already have an account? Sign in" }), _jsx("div", { className: errorDisplayClassName, children: error !== undefined
+                    ? flow === "signIn"
+                        ? "Could not sign in, did you mean to sign up?"
+                        : "Could not sign up, did you mean to sign in?"
+                    : null })] }));
+}
+// Sign out
+export function SignOutButton({ className }) {
+    return (_jsx("button", { className: className, onClick: useSignOut(), children: "Logout" }));
+}
+// Hooks
+export function useSignUpSignIn({ signIn, signUp, onError, }) {
     const setSessionId = useSetSessionId();
     const [flow, setFlow] = useState("signIn");
-    const handleSubmit = async (event) => {
+    const [error, setError] = useState();
+    const toggleFlow = useCallback(() => {
+        setFlow(flow === "signIn" ? "signUp" : "signIn");
+        clearError();
+    }, [flow, setFlow]);
+    const clearError = useCallback(() => setError(undefined), [setError]);
+    const onSubmit = async (event) => {
         event.preventDefault();
+        clearError();
         const data = new FormData(event.currentTarget);
@@ -49,16 +75,12 @@ try {
             onError?.(flow, error);
+            setError(error);
         }
     };
-    return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsx("label", { className: labelClassName, htmlFor: "username", children: "Email" }), _jsx("input", { className: inputClassName, name: "email", id: "email" }), _jsx("label", { className: labelClassName, htmlFor: "password", children: "Password" }), _jsx("input", { className: inputClassName, type: "password", name: "password", id: "password" }), _jsx("input", { className: buttonClassName, type: "submit", value: flow === "signIn" ? "Sign in" : "Sign up" }), _jsx("a", { className: flowToggleClassName, onClick: () => {
-                    setFlow(flow === "signIn" ? "signUp" : "signIn");
-                }, children: flow === "signIn"
-                    ? "Don't have an account? Sign up"
-                    : "Already have an account? Sign in" })] }));
+    return { onSubmit, flow, setFlow, toggleFlow, error, setError, clearError };
 }
-// Sign out
-export function SignOutButton({ className }) {
+export function useSignOut() {
     const setSessionId = useSetSessionId();
-    return (_jsx("button", { className: className, onClick: () => setSessionId(null), children: "Logout" }));
+    return useCallback(() => setSessionId(null), [setSessionId]);
 }
-// Hooks
+// Convex Hooks
 export function useQueryWithAuth(query, args) {
@@ -65,0 +87,0 @@ const sessionId = useSessionId();

package.json

 {
   "name": "@convex-dev/convex-lucia-auth",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Convex database adapter for Lucia Auth",
@@ -5,0 +5,0 @@ "homepage": "https://convex.dev/",

README.md

@@ -26,6 +26,5 @@ # Convex Database Adapter + UI for Lucia Auth Library
 
-In your production deployment's settings page configure these variables:
+In your production deployment's settings page configure this variable:
 
 - `LUCIA_ENVIRONMENT`=`PROD`
-- `HOSTNAME`=where the app is hosted, such as `foo.github.io` or `mydomain.com`
 
@@ -32,0 +31,0 @@ ## Note on CSRF protection

No alert changes

Improved metrics

Total package byte prevSize

44779

increased by13.38%

Lines of code

860

increased by10.97%

Worsened metrics

Number of lines in readme file

104

decreased by-0.95%

No dependency changes