caplib
Version:
Credentialless Authentication Protocol Library for Web Applications
368 lines (365 loc) • 8.35 kB
JavaScript
import {
CapAuth
} from "./chunk-RYE5TPNM.mjs";
// src/react/theme.ts
import { extendTheme } from "@chakra-ui/react";
var config = {
initialColorMode: "dark",
useSystemColorMode: false
};
var colors = {
brand: {
50: "#f0f9ff",
100: "#e0f2fe",
200: "#bae6fd",
300: "#7dd3fc",
400: "#38bdf8",
500: "#0ea5e9",
600: "#0284c7",
700: "#0369a1",
800: "#075985",
900: "#0c4a6e"
},
accent: {
50: "#f0fdfa",
100: "#ccfbf1",
200: "#99f6e4",
300: "#5eead4",
400: "#2dd4bf",
500: "#14b8a6",
600: "#0d9488",
700: "#0f766e",
800: "#115e59",
900: "#134e4a"
},
dark: {
100: "#1a202c",
200: "#171923",
300: "#0e1118",
400: "#0a0c11",
500: "#050609",
gradient: "linear-gradient(180deg, #1a202c 0%, #0a0c11 100%)"
}
};
var components = {
Button: {
baseStyle: {
fontWeight: "medium",
borderRadius: "md"
},
variants: {
solid: {
bg: "brand.500",
color: "white",
_hover: {
bg: "brand.600",
_disabled: {
bg: "brand.500"
}
}
},
outline: {
borderColor: "whiteAlpha.300",
color: "white",
_hover: {
bg: "whiteAlpha.100"
}
},
ghost: {
color: "white",
_hover: {
bg: "whiteAlpha.100"
}
},
link: {
color: "brand.500",
_hover: {
textDecoration: "none",
color: "brand.600"
}
},
gradient: {
bgGradient: "linear(to-r, brand.500, accent.500)",
color: "white",
_hover: {
bgGradient: "linear(to-r, brand.600, accent.600)"
}
}
}
},
Modal: {
baseStyle: {
dialog: {
bg: "dark.200",
boxShadow: "xl",
borderRadius: "xl",
border: "1px solid",
borderColor: "whiteAlpha.200"
},
header: {
borderBottom: "1px solid",
borderColor: "whiteAlpha.100",
pb: 4
},
body: {
py: 6
},
footer: {
borderTop: "1px solid",
borderColor: "whiteAlpha.100",
pt: 4
}
}
},
Card: {
baseStyle: {
container: {
bg: "dark.200",
boxShadow: "xl",
borderRadius: "xl",
border: "1px solid",
borderColor: "whiteAlpha.200",
overflow: "hidden"
},
header: {
py: 4,
px: 6
},
body: {
py: 4,
px: 6
},
footer: {
py: 4,
px: 6
}
}
},
Input: {
baseStyle: {
field: {
bg: "whiteAlpha.50",
borderColor: "whiteAlpha.200",
_hover: {
borderColor: "whiteAlpha.300"
},
_focus: {
borderColor: "brand.500",
boxShadow: "0 0 0 1px var(--chakra-colors-brand-500)"
}
}
}
},
Radio: {
baseStyle: {
control: {
borderColor: "whiteAlpha.300",
_checked: {
bg: "brand.500",
borderColor: "brand.500"
}
}
}
},
Tabs: {
variants: {
enclosed: {
tab: {
color: "whiteAlpha.700",
_selected: {
color: "white",
bg: "whiteAlpha.100"
}
}
},
"soft-rounded": {
tab: {
color: "whiteAlpha.700",
_selected: {
color: "white",
bg: "brand.500"
}
}
}
}
}
};
var styles = {
global: {
"html, body": {
color: "white",
bg: "#0a0c11"
}
}
};
var capAuthTheme = extendTheme({
config,
colors,
components,
styles
});
var theme_default = capAuthTheme;
// src/react/components/AuthProvider.tsx
import { createContext, useContext, useState, useEffect } from "react";
import {
ChakraProvider,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
ModalCloseButton,
useDisclosure
} from "@chakra-ui/react";
import { jsx, jsxs } from "react/jsx-runtime";
var AuthContext = createContext(void 0);
function AuthProvider({
children,
config: config2 = {},
onAuthSuccess,
onAuthError
}) {
const { isOpen, onOpen, onClose } = useDisclosure();
const [user, setUser] = useState(null);
const defaultConfig = {
appName: "Secure Authentication",
appDescription: "Login securely with your wallet",
theme: {
primary: "blue",
secondary: "teal"
},
refreshPageOnAuth: false,
timeouts: {
authentication: 3e5,
polling: 3e3
},
enableMobileWallet: true,
mobileWalletScheme: "zerowallet://",
...config2
};
useEffect(() => {
const checkAuth = async () => {
const walletAddress = localStorage.getItem("wallet_address");
if (walletAddress) {
try {
const response = await fetch("/api/users/active", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ wallet_address: walletAddress })
});
if (response.ok) {
const data = await response.json();
setUser(data.user);
} else {
localStorage.removeItem("wallet_address");
}
} catch (error) {
console.error("Auth check failed:", error);
}
}
};
checkAuth();
}, []);
const handleAuthenticated = async (authenticatedUser) => {
setUser(authenticatedUser);
localStorage.setItem("wallet_address", authenticatedUser.wallet_address);
onClose();
if (onAuthSuccess) {
onAuthSuccess(authenticatedUser);
}
if (defaultConfig.refreshPageOnAuth) {
window.location.reload();
} else if (defaultConfig.redirectPath) {
window.location.href = defaultConfig.redirectPath;
}
};
const handleError = (error) => {
console.error("Authentication error:", error);
if (onAuthError) {
onAuthError(error);
}
};
const showAuthModal = () => onOpen();
const hideAuthModal = () => onClose();
const logout = () => {
localStorage.removeItem("wallet_address");
setUser(null);
};
const contextValue = {
user,
isAuthenticated: !!user,
showAuthModal,
hideAuthModal,
logout
};
return /* @__PURE__ */ jsx(AuthContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(ChakraProvider, { theme: theme_default, children: [
children,
/* @__PURE__ */ jsxs(
Modal,
{
isOpen,
onClose,
isCentered: true,
size: "md",
closeOnOverlayClick: false,
children: [
/* @__PURE__ */ jsx(ModalOverlay, { backdropFilter: "blur(10px)", bg: "blackAlpha.700" }),
/* @__PURE__ */ jsxs(
ModalContent,
{
bg: "transparent",
boxShadow: "none",
width: "auto",
maxWidth: "100%",
margin: "0",
children: [
/* @__PURE__ */ jsx(
ModalCloseButton,
{
color: "white",
zIndex: "popover",
position: "absolute",
right: "4px",
top: "4px"
}
),
/* @__PURE__ */ jsx(ModalBody, { p: 0, display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsx(
CapAuth,
{
onAuthenticated: handleAuthenticated,
config: defaultConfig,
onError: handleError
}
) })
]
}
)
]
}
)
] }) });
}
function useAuth() {
const context = useContext(AuthContext);
if (context === void 0) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
}
function withAuth(WrappedComponent) {
return function WithAuthComponent(props) {
const { isAuthenticated, showAuthModal } = useAuth();
useEffect(() => {
if (!isAuthenticated) {
showAuthModal();
}
}, [isAuthenticated]);
return /* @__PURE__ */ jsx(WrappedComponent, { ...props });
};
}
export {
theme_default,
AuthProvider,
useAuth,
withAuth
};
//# sourceMappingURL=chunk-743756IX.mjs.map