github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-07-27 16:53:02 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity
Files
28ccc8cda97ebdc7f2a11b5eb3a5defb466b15bd
better-auth/docs/components/landing/framework-sections.tsx
T

1340 lines
71 KiB
TypeScript
Raw Blame History

"use client";
import { motion } from "framer-motion";
import Link from "next/link";
import type { ReactNode } from "react";
import { startTransition, useEffect, useRef, useState } from "react";
import { DynamicCodeBlock } from "@/components/ui/dynamic-code-block";
export const providerIcons: Record<string, () => ReactNode> = {
Google: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M28.458 5c6.167 0 11.346 2.2 15.368 5.804l.323.295l-6.62 6.464c-1.695-1.59-4.666-3.493-9.07-3.493c-6.204 0-11.47 4.093-13.372 9.749c-.47 1.46-.756 3.023-.756 4.64c0 1.615.287 3.18.782 4.639c1.877 5.656 7.142 9.748 13.345 9.748c3.347 0 5.928-.886 7.881-2.176l.251-.17l.307-.222c2.813-2.108 4.144-5.084 4.46-7.169l.03-.22h-12.93v-8.705h22.025c.339 1.46.495 2.867.495 4.795c0 7.142-2.554 13.163-6.985 17.255c-3.884 3.597-9.201 5.682-15.535 5.682c-9.031 0-16.85-5.102-20.772-12.57l-.184-.358l-.222-.457A23.45 23.45 0 0 1 5 28.458c0-3.6.827-7.01 2.28-10.073l.222-.457l.184-.357C11.608 10.1 19.426 5 28.458 5"
/>
</svg>
),
GitHub: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 15 15"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M7.5.25a7.25 7.25 0 0 0-2.292 14.13c.363.066.495-.158.495-.35c0-.172-.006-.628-.01-1.233c-2.016.438-2.442-.972-2.442-.972c-.33-.838-.805-1.06-.805-1.06c-.658-.45.05-.441.05-.441c.728.051 1.11.747 1.11.747c.647 1.108 1.697.788 2.11.602c.066-.468.254-.788.46-.969c-1.61-.183-3.302-.805-3.302-3.583a2.8 2.8 0 0 1 .747-1.945c-.075-.184-.324-.92.07-1.92c0 0 .61-.194 1.994.744A6.963 6.963 0 0 1 7.5 3.756A6.97 6.97 0 0 1 9.315 4c1.384-.938 1.992-.743 1.992-.743c.396.998.147 1.735.072 1.919c.465.507.745 1.153.745 1.945c0 2.785-1.695 3.398-3.31 3.577c.26.224.492.667.492 1.343c0 .97-.009 1.751-.009 1.989c0 .194.131.42.499.349A7.25 7.25 0 0 0 7.499.25"
clipRule="evenodd"
/>
</svg>
),
Apple: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M14.122 4.682c1.35 0 2.781.743 3.8 2.028c-3.34 1.851-2.797 6.674.578 7.963c-.465 1.04-.687 1.505-1.285 2.426c-.835 1.284-2.01 2.884-3.469 2.898c-1.295.012-1.628-.853-3.386-.843c-1.758.01-2.125.858-3.42.846c-1.458-.014-2.573-1.458-3.408-2.743C1.198 13.665.954 9.45 2.394 7.21C3.417 5.616 5.03 4.683 6.548 4.683c1.545 0 2.516.857 3.794.857c1.24 0 1.994-.858 3.78-.858M13.73 0c.18 1.215-.314 2.405-.963 3.247c-.695.902-1.892 1.601-3.05 1.565c-.21-1.163.332-2.36.99-3.167C11.43.755 12.67.074 13.73 0"
/>
</svg>
),
Microsoft: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M2 3h9v9H2zm9 19H2v-9h9zM21 3v9h-9V3zm0 19h-9v-9h9z"
/>
</svg>
),
Discord: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M18.59 5.89c-1.23-.57-2.54-.99-3.92-1.23c-.17.3-.37.71-.5 1.04c-1.46-.22-2.91-.22-4.34 0c-.14-.33-.34-.74-.51-1.04c-1.38.24-2.69.66-3.92 1.23c-2.48 3.74-3.15 7.39-2.82 10.98c1.65 1.23 3.24 1.97 4.81 2.46c.39-.53.73-1.1 1.03-1.69c-.57-.21-1.11-.48-1.62-.79c.14-.1.27-.21.4-.31c3.13 1.46 6.52 1.46 9.61 0c.13.11.26.21.4.31c-.51.31-1.06.57-1.62.79c.3.59.64 1.16 1.03 1.69c1.57-.49 3.17-1.23 4.81-2.46c.39-4.17-.67-7.78-2.82-10.98Zm-9.75 8.78c-.94 0-1.71-.87-1.71-1.94s.75-1.94 1.71-1.94s1.72.87 1.71 1.94c0 1.06-.75 1.94-1.71 1.94m6.31 0c-.94 0-1.71-.87-1.71-1.94s.75-1.94 1.71-1.94s1.72.87 1.71 1.94c0 1.06-.75 1.94-1.71 1.94"
/>
</svg>
),
Slack: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2447.6 2452.5"
width="14"
height="14"
>
<g fill="currentColor">
<path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" />
<path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" />
<path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" />
<path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" />
</g>
</svg>
),
Twitter: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm297.1 84L257.3 234.6L379.4 396h-95.6L209 298.1L123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5l78.2-89.5zm-37.8 251.6L153.4 142.9h-28.3l171.8 224.7h26.3z"
/>
</svg>
),
Facebook: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 64 64"
>
<path
fill="currentColor"
d="M59.5 1h-55C2.5 1 1 2.6 1 4.5v55c0 2 1.6 3.5 3.5 3.5h29.6V38.9h-8v-9.3h8v-6.9c0-8 4.8-12.4 12-12.4c2.4 0 4.8.1 7.2.4V19h-4.8c-3.8 0-4.6 1.8-4.6 4.5v5.9H53l-1.3 9.4h-8v23.8h15.8c2 0 3.5-1.5 3.5-3.5V4.5c-.1-2-1.7-3.5-3.5-3.5"
/>
</svg>
),
LinkedIn: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 448 512"
fill="currentColor"
>
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
fill="currentColor"
/>
</svg>
),
GitLab: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 32 32"
>
<path
fill="currentColor"
d="m28.568 12.893l-.037-.094l-3.539-9.235a.92.92 0 0 0-.364-.439a.95.95 0 0 0-1.083.058a.95.95 0 0 0-.314.477l-2.39 7.31h-9.675l-2.39-7.31a.93.93 0 0 0-.313-.478a.95.95 0 0 0-1.083-.058a.93.93 0 0 0-.365.438L3.47 12.794l-.035.093a6.57 6.57 0 0 0 2.18 7.595l.011.01l.033.022l5.39 4.037l2.668 2.019l1.624 1.226c.39.297.931.297 1.322 0l1.624-1.226l2.667-2.019l5.424-4.061l.013-.01a6.574 6.574 0 0 0 2.177-7.588Z"
/>
</svg>
),
Twitch: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M3.9 2.5a.9.9 0 0 0-.9.9v14.194a.9.9 0 0 0 .9.9h4.116v3.03a.7.7 0 0 0 1.194.494l3.525-3.524h4.643a.9.9 0 0 0 .636-.264l2.722-2.722a.9.9 0 0 0 .264-.636V3.4a.9.9 0 0 0-.9-.9zm7.319 5.2a.75.75 0 0 0-1.5 0v4.272a.75.75 0 1 0 1.5 0zm5.016 0a.75.75 0 0 0-1.5 0v4.272a.75.75 0 1 0 1.5 0z"
clipRule="evenodd"
/>
</svg>
),
Spotify: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 256 256"
preserveAspectRatio="xMidYMid"
>
<path
d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128 70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007l.001-.006Zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644-30.053-18.357-67.885-22.515-112.44-12.335a7.981 7.981 0 0 1-9.552-6.007 7.968 7.968 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276 3.76 2.308 4.952 7.215 2.644 10.975Zm15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289-34.406-21.148-86.853-27.273-127.548-14.92-5.278 1.594-10.852-1.38-12.454-6.649-1.59-5.278 1.386-10.842 6.655-12.446 46.485-14.106 104.275-7.273 143.787 17.007 4.692 2.89 6.175 9.034 3.286 13.72v-.001Zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405-3.362 5.69-10.73 7.565-16.4 4.187h-.006Z"
fill="currentColor"
/>
</svg>
),
Figma: () => (
<svg
width="14"
height="14"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.00005 2.04999H5.52505C4.71043 2.04999 4.05005 2.71037 4.05005 3.52499C4.05005 4.33961 4.71043 4.99999 5.52505 4.99999H7.00005V2.04999ZM7.00005 1.04999H8.00005H9.47505C10.842 1.04999 11.95 2.15808 11.95 3.52499C11.95 4.33163 11.5642 5.04815 10.9669 5.49999C11.5642 5.95184 11.95 6.66836 11.95 7.475C11.95 8.8419 10.842 9.95 9.47505 9.95C8.92236 9.95 8.41198 9.76884 8.00005 9.46266V9.95L8.00005 11.425C8.00005 12.7919 6.89195 13.9 5.52505 13.9C4.15814 13.9 3.05005 12.7919 3.05005 11.425C3.05005 10.6183 3.43593 9.90184 4.03317 9.44999C3.43593 8.99814 3.05005 8.28163 3.05005 7.475C3.05005 6.66836 3.43594 5.95184 4.03319 5.5C3.43594 5.04815 3.05005 4.33163 3.05005 3.52499C3.05005 2.15808 4.15814 1.04999 5.52505 1.04999H7.00005ZM8.00005 2.04999V4.99999H9.47505C10.2897 4.99999 10.95 4.33961 10.95 3.52499C10.95 2.71037 10.2897 2.04999 9.47505 2.04999H8.00005ZM5.52505 8.94998H7.00005L7.00005 7.4788L7.00005 7.475L7.00005 7.4712V6H5.52505C4.71043 6 4.05005 6.66038 4.05005 7.475C4.05005 8.28767 4.70727 8.94684 5.5192 8.94999L5.52505 8.94998ZM4.05005 11.425C4.05005 10.6123 4.70727 9.95315 5.5192 9.94999L5.52505 9.95H7.00005L7.00005 11.425C7.00005 12.2396 6.33967 12.9 5.52505 12.9C4.71043 12.9 4.05005 12.2396 4.05005 11.425ZM8.00005 7.47206C8.00164 6.65879 8.66141 6 9.47505 6C10.2897 6 10.95 6.66038 10.95 7.475C10.95 8.28962 10.2897 8.95 9.47505 8.95C8.66141 8.95 8.00164 8.29121 8.00005 7.47794V7.47206Z"
fill="currentColor"
/>
</svg>
),
Notion: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.28c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233l4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"
/>
</svg>
),
Atlassian: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 256 256"
preserveAspectRatio="xMidYMid"
>
<path
d="M76 118c-4-4-10-4-13 1L1 245a7 7 0 0 0 6 10h88c3 0 5-1 6-4 19-39 8-98-25-133Z"
fill="currentColor"
/>
<path
d="M122 4c-35 56-33 117-10 163l42 84c1 3 4 4 7 4h87a7 7 0 0 0 7-10L134 4c-2-5-9-5-12 0Z"
fill="currentColor"
/>
</svg>
),
HuggingFace: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12.025 1.13c-5.77 0-10.449 4.647-10.449 10.378c0 1.112.178 2.181.503 3.185c.064-.222.203-.444.416-.577a.96.96 0 0 1 .524-.15c.293 0 .584.124.84.284c.278.173.48.408.71.694c.226.282.458.611.684.951v-.014c.017-.324.106-.622.264-.874s.403-.487.762-.543c.3-.047.596.06.787.203s.31.313.4.467c.15.257.212.468.233.542c.01.026.653 1.552 1.657 2.54c.616.605 1.01 1.223 1.082 1.912c.055.537-.096 1.059-.38 1.572c.637.121 1.294.187 1.967.187c.657 0 1.298-.063 1.921-.178c-.287-.517-.44-1.041-.384-1.581c.07-.69.465-1.307 1.081-1.913c1.004-.987 1.647-2.513 1.657-2.539c.021-.074.083-.285.233-.542c.09-.154.208-.323.4-.467a1.08 1.08 0 0 1 .787-.203c.359.056.604.29.762.543s.247.55.265.874v.015c.225-.34.457-.67.683-.952c.23-.286.432-.52.71-.694c.257-.16.547-.284.84-.285a.97.97 0 0 1 .524.151c.228.143.373.388.43.625l.006.04a10.3 10.3 0 0 0 .534-3.273c0-5.731-4.678-10.378-10.449-10.378"
/>
</svg>
),
Reddit: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 32 32"
>
<path
d="M29.9999 12.0001C29.9998 11.2336 29.7793 10.4832 29.3649 9.8384C28.9505 9.19356 28.3595 8.68139 27.6623 8.36282C26.9652 8.04425 26.1911 7.93271 25.4324 8.04148C24.6736 8.15024 23.9621 8.47473 23.3824 8.97633C21.2887 7.86383 18.7874 7.19132 16.1749 7.03507L16.8237 3.13883L19.0387 3.47883C19.1511 4.17754 19.5068 4.81402 20.0431 5.27579C20.5794 5.73757 21.2616 5.99489 21.9693 6.00228C22.6769 6.00967 23.3644 5.76665 23.9102 5.31618C24.456 4.86571 24.825 4.23679 24.952 3.54058C25.0789 2.84437 24.9556 2.1257 24.604 1.51158C24.2523 0.897463 23.6948 0.427445 23.0301 0.184601C22.3654-0.0582438 21.6362-0.0582795 20.9715 0.1845C20.3067 0.42728 19.7492 0.897242 19.3974 1.51133L16.1474 1.01133C15.8874 0.971236 15.6221 1.03522 15.409 1.18941C15.1958 1.34361 15.052 1.57558 15.0087 1.83508L14.1499 7.02008C11.4199 7.13758 8.79744 7.81757 6.61744 8.97633C5.82132 8.30379 4.79416 7.96851 3.75457 8.04187C2.71499 8.11523 1.74508 8.59143 1.0513 9.36911C0.357515 10.1468-0.00535957 11.1645 0.0399123 12.2057C0.0851841 13.2469 0.535027 14.2293 1.29369 14.9438C1.09926 15.612 1.00036 16.3042 0.999944 17.0001C0.999944 19.7413 2.49994 22.2938 5.23869 24.1863C7.85994 26.0001 11.3262 27.0001 14.9999 27.0001C18.6737 27.0001 22.1399 26.0001 24.7612 24.1863C27.4999 22.2938 28.9999 19.7413 28.9999 17.0001C28.9995 16.3042 28.9006 15.612 28.7062 14.9438C29.1128 14.5686 29.4376 14.1135 29.6602 13.6069C29.8828 13.1004 29.9985 12.5534 29.9999 12.0001ZM7.99994 15.0001C7.99994 14.6045 8.11724 14.2178 8.337 13.8889C8.55677 13.56 8.86912 13.3037 9.23458 13.1523C9.60003 13.0009 10.0022 12.9613 10.3901 13.0385C10.7781 13.1157 11.1345 13.3062 11.4142 13.5859C11.6939 13.8656 11.8843 14.2219 11.9615 14.6099C12.0387 14.9979 11.9991 15.4 11.8477 15.7654C11.6963 16.1309 11.44 16.4433 11.1111 16.663C10.7822 16.8828 10.3955 17.0001 9.99994 17.0001C9.46951 17.0001 8.9608 16.7894 8.58573 16.4143C8.21066 16.0392 7.99994 15.5305 7.99994 15.0001ZM19.4687 21.8838C18.0927 22.6151 16.5582 22.9975 14.9999 22.9975C13.4417 22.9975 11.9072 22.6151 10.5312 21.8838C10.4151 21.8223 10.3123 21.7385 10.2287 21.6372C10.145 21.5359 10.0821 21.4191 10.0436 21.2935C10.005 21.1679 9.99162 21.036 10.0041 20.9052C10.0165 20.7744 10.0546 20.6474 10.1162 20.5313C10.1778 20.4153 10.2616 20.3125 10.3628 20.2288C10.4641 20.1451 10.5809 20.0822 10.7065 20.0437C10.8321 20.0052 10.964 19.9918 11.0948 20.0042C11.2256 20.0167 11.3526 20.0548 11.4687 20.1163C12.556 20.6944 13.7685 20.9967 14.9999 20.9967C16.2313 20.9967 17.4439 20.6944 18.5312 20.1163C18.6472 20.0548 18.7743 20.0167 18.9051 20.0042C19.0358 19.9918 19.1678 20.0052 19.2934 20.0437C19.419 20.0822 19.5358 20.1451 19.637 20.2288C19.7383 20.3125 19.8221 20.4153 19.8837 20.5313C19.9453 20.6474 19.9833 20.7744 19.9958 20.9052C20.0083 21.036 19.9948 21.1679 19.9563 21.2935C19.9178 21.4191 19.8549 21.5359 19.7712 21.6372C19.6875 21.7385 19.5847 21.8223 19.4687 21.8838ZM19.9999 17.0001C19.6044 17.0001 19.2177 16.8828 18.8888 16.663C18.5599 16.4433 18.3036 16.1309 18.1522 15.7654C18.0008 15.4 17.9612 14.9979 18.0384 14.6099C18.1155 14.2219 18.306 13.8656 18.5857 13.5859C18.8654 13.3062 19.2218 13.1157 19.6098 13.0385C19.9977 12.9613 20.3999 13.0009 20.7653 13.1523C21.1308 13.3037 21.4431 13.56 21.6629 13.8889C21.8826 14.2178 21.9999 14.6045 21.9999 15.0001C21.9999 15.5305 21.7892 16.0392 21.4142 16.4143C21.0391 16.7894 20.5304 17.0001 19.9999 17.0001Z"
fill="currentColor"
/>
</svg>
),
TikTok: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z"
/>
</svg>
),
PayPal: () => (
<svg
fill="currentColor"
viewBox="-2 -2 24 24"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin"
width="14"
height="14"
>
<path d="M4.328 16.127l-.011.07a.899.899 0 0 1-.887.744H.9a.892.892 0 0 1-.88-1.04L2.57.745A.892.892 0 0 1 3.45 0h6.92a4.141 4.141 0 0 1 4.142 4.141c0 .273-.017.54-.05.804a3.629 3.629 0 0 1 1.53 2.962 5.722 5.722 0 0 1-5.72 5.722h-.583c-.653 0-1.211.472-1.32 1.117l-.314 1.87.314-1.87a1.339 1.339 0 0 1 1.32-1.117h.582a5.722 5.722 0 0 0 5.722-5.722 3.629 3.629 0 0 0-1.53-2.962 6.52 6.52 0 0 1-6.47 5.716H6.06a.969.969 0 0 0-.93.701l-1.155 6.862c-.08.48.289.916.775.916h2.214a.786.786 0 0 0 .775-.655l.315-1.87-.315 1.87a.786.786 0 0 1-.775.655H4.751a.782.782 0 0 1-.6-.278.782.782 0 0 1-.175-.638l.352-2.097z" />
</svg>
),
Dropbox: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 528 512"
>
<path
className="fill-current"
fillRule="evenodd"
d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
/>
</svg>
),
Zoom: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M1.45 3.334C.648 3.334 0 3.982 0 4.783v4.986c0 1.6 1.298 2.898 2.898 2.898h6.986c.8 0 1.45-.649 1.45-1.45V6.233a2.9 2.9 0 0 0-2.899-2.899zM16 4.643v6.715c0 .544-.618.86-1.059.539l-2.059-1.498a1.33 1.33 0 0 1-.549-1.078V6.679c0-.427.204-.827.55-1.078l2.058-1.498a.667.667 0 0 1 1.059.54"
clipRule="evenodd"
/>
</svg>
),
Vercel: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 256 222"
fill="currentColor"
>
<path d="m128 0l128 221.705H0z" />
</svg>
),
Linear: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
width="14"
height="14"
viewBox="0 0 100 100"
>
<path
fill="currentColor"
d="M1.22541 61.5228c-.2225-.9485.90748-1.5459 1.59638-.857L39.3342 97.1782c.6889.6889.0915 1.8189-.857 1.5964C20.0515 94.4522 5.54779 79.9485 1.22541 61.5228ZM.00189135 46.8891c-.01764375.2833.08887215.5599.28957165.7606L52.3503 99.7085c.2007.2007.4773.3075.7606.2896 2.3692-.1476 4.6938-.46 6.9624-.9259.7645-.157 1.0301-1.0963.4782-1.6481L2.57595 39.4485c-.55186-.5519-1.49117-.2863-1.648174.4782-.465915 2.2686-.77832 4.5932-.92588465 6.9624ZM4.21093 29.7054c-.16649.3738-.08169.8106.20765 1.1l64.77602 64.776c.2894.2894.7262.3742 1.1.2077 1.7861-.7956 3.5171-1.6927 5.1855-2.684.5521-.328.6373-1.0867.1832-1.5407L8.43566 24.3367c-.45409-.4541-1.21271-.3689-1.54074.1832-.99132 1.6684-1.88843 3.3994-2.68399 5.1855ZM12.6587 18.074c-.3701-.3701-.393-.9637-.0443-1.3541C21.7795 6.45931 35.1114 0 49.9519 0 77.5927 0 100 22.4073 100 50.0481c0 14.8405-6.4593 28.1724-16.7199 37.3375-.3903.3487-.984.3258-1.3542-.0443L12.6587 18.074Z"
/>
</svg>
),
Kick: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M9 3a1 1 0 0 1 1 1v3h1V6a1 1 0 0 1 .883-.993L12 5h1V4a1 1 0 0 1 .883-.993L14 3h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-1v1a1 1 0 0 1-.883.993L18 11h-1v2h1a1 1 0 0 1 .993.883L19 14v1h1a1 1 0 0 1 .993.883L21 16v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1h-1a1 1 0 0 1-.993-.883L11 18v-1h-1v3a1 1 0 0 1-.883.993L9 21H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"
/>
</svg>
),
Kakao: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M 511.5,203.5 C 511.5,215.5 511.5,227.5 511.5,239.5C 504.002,286.989 482.002,326.489 445.5,358C 390.216,402.375 326.882,424.209 255.5,423.5C 239.751,423.476 224.085,422.643 208.5,421C 174.34,444.581 140.006,467.914 105.5,491C 95.6667,493.167 91.8333,489.333 94,479.5C 101.833,450.667 109.667,421.833 117.5,393C 85.5639,376.077 58.0639,353.577 35,325.5C 15.8353,299.834 4.00193,271.167 -0.5,239.5C -0.5,227.5 -0.5,215.5 -0.5,203.5C 7.09119,155.407 29.4245,115.574 66.5,84C 121.53,39.9708 184.53,18.4708 255.5,19.5C 326.47,18.4708 389.47,39.9708 444.5,84C 481.575,115.574 503.909,155.407 511.5,203.5 Z"
/>
</svg>
),
Line: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"
/>
</svg>
),
VK: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M17.802 12.298s1.617 1.597 2.017 2.336a.1.1 0 0 1 .018.035q.244.409.123.645c-.135.261-.592.392-.747.403h-2.858c-.199 0-.613-.052-1.117-.4c-.385-.269-.768-.712-1.139-1.145c-.554-.643-1.033-1.201-1.518-1.201a.6.6 0 0 0-.18.03c-.367.116-.833.639-.833 2.032c0 .436-.344.684-.585.684H9.674c-.446 0-2.768-.156-4.827-2.327C2.324 10.732.058 5.4.036 5.353c-.141-.345.155-.533.475-.533h2.886c.387 0 .513.234.601.444c.102.241.48 1.205 1.1 2.288c1.004 1.762 1.621 2.479 2.114 2.479a.53.53 0 0 0 .264-.07c.644-.354.524-2.654.494-3.128c0-.092-.001-1.027-.331-1.479c-.236-.324-.638-.45-.881-.496c.065-.094.203-.238.38-.323c.441-.22 1.238-.252 2.029-.252h.439c.858.012 1.08.067 1.392.146c.628.15.64.557.585 1.943c-.016.396-.033.842-.033 1.367c0 .112-.005.237-.005.364c-.019.711-.044 1.512.458 1.841a.4.4 0 0 0 .217.062c.174 0 .695 0 2.108-2.425c.62-1.071 1.1-2.334 1.133-2.429c.028-.053.112-.202.214-.262a.5.5 0 0 1 .236-.056h3.395c.37 0 .621.056.67.196c.082.227-.016.92-1.566 3.016c-.261.349-.49.651-.691.915c-1.405 1.844-1.405 1.937.083 3.337"
clipRule="evenodd"
/>
</svg>
),
Naver: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845Z"
/>
</svg>
),
Polar: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
viewBox="0 0 300 300"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M66.428 274.26c68.448 46.333 161.497 28.406 207.83-40.041 46.335-68.448 28.408-161.497-40.04-207.83C165.77-19.946 72.721-2.019 26.388 66.428-19.948 134.878-2.02 227.928 66.427 274.26ZM47.956 116.67c-17.119 52.593-11.412 105.223 11.29 139.703C18.04 217.361 7.275 150.307 36.943 92.318c18.971-37.082 50.622-62.924 85.556-73.97-31.909 18.363-59.945 53.466-74.544 98.322Zm127.391 166.467c36.03-10.531 68.864-36.752 88.338-74.815 29.416-57.497 19.083-123.905-21.258-163.055 21.793 34.496 27.046 86.275 10.204 138.02-15.016 46.134-44.246 81.952-77.284 99.85Zm8.28-16.908c24.318-20.811 44.389-55.625 53.308-97.439 14.098-66.097-4.384-127.592-41.823-148.113 19.858 26.718 29.91 78.613 23.712 136.656-4.739 44.391-18.01 83.26-35.197 108.896ZM63.717 131.844c-14.201 66.586 4.66 128.501 42.657 148.561-20.378-26.396-30.777-78.891-24.498-137.694 4.661-43.657 17.574-81.974 34.349-107.614-23.957 20.886-43.687 55.392-52.507 96.747Zm136.117 17.717c1.074 67.912-20.244 123.317-47.612 123.748-27.369.433-50.425-54.27-51.498-122.182-1.073-67.913 20.244-123.318 47.613-123.75 27.368-.432 50.425 54.271 51.497 122.184Z"
/>
</svg>
),
Roblox: () => (
<svg viewBox="0 0 302.7 302.7" width="14" height="14" fill="currentColor">
<path d="M120.5,271.7c-110.9-28.6-120-31-119.9-31.5C0.7,239.6,62.1,0.5,62.2,0.4c0,0,54,13.8,119.9,30.8S302.1,62,302.2,62c0.2,0,0.2,0.4,0.1,0.9c-0.2,1.5-61.5,239.3-61.7,239.5C240.6,302.5,186.5,288.7,120.5,271.7z M174.9,158c3.2-12.6,5.9-23.1,6-23.4c0.1-0.5-2.3-1.2-23.2-6.6c-12.8-3.3-23.5-5.9-23.6-5.8c-0.3,0.3-12.1,46.6-12,46.7c0.2,0.2,46.7,12.2,46.8,12.1C168.9,180.9,171.6,170.6,174.9,158L174.9,158z" />
</svg>
),
Salesforce: () => (
<svg
viewBox=".5 .5 999 699.242"
width="14"
height="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
d="M416.224 76.763c32.219-33.57 77.074-54.391 126.682-54.391 65.946 0 123.48 36.772 154.12 91.361 26.626-11.896 56.098-18.514 87.106-18.514 118.94 0 215.368 97.268 215.368 217.247 0 119.993-96.428 217.261-215.368 217.261a213.735 213.735 0 0 1-42.422-4.227c-26.981 48.128-78.397 80.646-137.412 80.646-24.705 0-48.072-5.706-68.877-15.853-27.352 64.337-91.077 109.448-165.348 109.448-77.344 0-143.261-48.939-168.563-117.574-11.057 2.348-22.513 3.572-34.268 3.572C75.155 585.74.5 510.317.5 417.262c0-62.359 33.542-116.807 83.378-145.937-10.26-23.608-15.967-49.665-15.967-77.06C67.911 87.25 154.79.5 261.948.5c62.914 0 118.827 29.913 154.276 76.263"
/>
</svg>
),
};
export const socialProviders = [
"Google",
"GitHub",
"Apple",
"Microsoft",
"Discord",
"Slack",
"Twitter",
"Facebook",
"LinkedIn",
"GitLab",
"Twitch",
"Spotify",
"Figma",
"Notion",
"Atlassian",
"Salesforce",
"HuggingFace",
"Roblox",
"Reddit",
"TikTok",
"PayPal",
"Dropbox",
"Zoom",
"Vercel",
"Linear",
"Kick",
"Kakao",
"Line",
"VK",
"Naver",
];
export const plugins = [
{ name: "Two Factor", category: "auth" },
{ name: "Passkey", category: "auth" },
{ name: "Magic Link", category: "auth" },
{ name: "Email OTP", category: "auth" },
{ name: "Username", category: "auth" },
{ name: "One Tap", category: "auth" },
{ name: "Phone Number", category: "auth" },
{ name: "Anonymous", category: "auth" },
{ name: "Bearer", category: "auth" },
{ name: "Generic OAuth", category: "auth" },
{ name: "One Time Token", category: "auth" },
{ name: "SIWE", category: "auth" },
{ name: "Organization", category: "org" },
{ name: "Admin", category: "org" },
{ name: "Multi Session", category: "org" },
{ name: "API Key", category: "org" },
{ name: "SSO", category: "enterprise" },
{ name: "OIDC Provider", category: "enterprise" },
{ name: "SCIM", category: "enterprise" },
{ name: "OAuth Proxy", category: "enterprise" },
{ name: "JWT", category: "security" },
{ name: "HIBP", category: "security" },
{ name: "Captcha", category: "security" },
{ name: "Stripe", category: "integration" },
{ name: "Polar", category: "integration" },
{ name: "Open API", category: "integration" },
{ name: "Dub", category: "integration" },
{ name: "Autumn", category: "integration" },
{ name: "Dodo Payments", category: "integration" },
{ name: "Creem", category: "integration" },
{ name: "MCP", category: "ai" },
{ name: "Device Auth", category: "auth" },
{ name: "Last Login", category: "auth" },
];
export const categoryLabels: Record<string, string> = {
auth: "Authentication",
org: "Organization",
enterprise: "Enterprise",
security: "Security",
integration: "Integration",
ai: "AI",
};
const _categoryColors: Record<string, string> = {
auth: "text-violet-500/50 dark:text-violet-400/40",
org: "text-sky-500/50 dark:text-sky-400/40",
enterprise: "text-amber-500/50 dark:text-amber-400/40",
security: "text-red-500/50 dark:text-red-400/40",
integration: "text-emerald-500/50 dark:text-emerald-400/40",
ai: "text-pink-500/50 dark:text-pink-400/40",
};
const dbDrivers = [
{
name: "PostgreSQL",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 32 32"
fill="currentColor"
>
<path d="M24.295 9.929c-0.010 0.155-0.082 0.292-0.191 0.387l-0.001 0.001c-0.131 0.143-0.306 0.243-0.504 0.278l-0.005 0.001c-0.028 0.004-0.061 0.007-0.094 0.007h-0c-0.001 0-0.003 0-0.004 0-0.312 0-0.58-0.189-0.694-0.46l-0.002-0.005c-0.030-0.221 0.33-0.388 0.701-0.44s0.764 0.011 0.794 0.231zM14.385 10.443c-0.121 0.311-0.418 0.528-0.766 0.528-0.004 0-0.007-0-0.011-0h0.001c-0 0-0 0-0 0-0.036 0-0.070-0.003-0.105-0.007l0.004 0c-0.261-0.047-0.483-0.191-0.63-0.392l-0.002-0.003c-0.082-0.094-0.132-0.219-0.132-0.354 0-0 0-0.001 0-0.001v0c0.012-0.077 0.055-0.143 0.115-0.185l0.001-0.001c0.152-0.084 0.334-0.133 0.528-0.133 0.083 0 0.164 0.009 0.242 0.026l-0.007-0.001c0.395 0.055 0.803 0.242 0.764 0.523zM25.403 18.086l-0.107-0.134-0.044-0.055c0.457-0.846 0.725-1.853 0.725-2.921 0-0.488-0.056-0.962-0.162-1.418l0.008 0.042c-0.070-0.453-0.111-0.976-0.111-1.508 0-0.007 0-0.014 0-0.021v0.001c0.023-0.501 0.076-0.97 0.158-1.429l-0.010 0.066c0.089-0.464 0.14-0.998 0.14-1.544 0-0.051-0-0.101-0.001-0.151l0 0.008c0.012-0.049 0.019-0.104 0.019-0.162 0-0.027-0.002-0.053-0.004-0.079l0 0.003c-0.4-1.58-1.151-2.949-2.168-4.073l0.007 0.008c-0.911-1.068-2.031-1.929-3.3-2.523l-0.060-0.025c0.696-0.149 1.496-0.234 2.316-0.234 0.075 0 0.15 0.001 0.225 0.002l-0.011-0c0.045-0.001 0.097-0.002 0.15-0.002 2.378 0 4.496 1.109 5.866 2.838l0.012 0.016c0.028 0.036 0.056 0.077 0.080 0.12l0.003 0.005c0.904 1.694-0.345 7.842-3.732 13.172zM25.117 9.322c-0.016 0.455-0.064 0.886-0.14 1.307l0.008-0.055c-0.078 0.425-0.134 0.931-0.157 1.445l-0.001 0.025c-0 0.017-0 0.036-0 0.056 0 0.567 0.042 1.124 0.124 1.668l-0.008-0.061c0.085 0.377 0.134 0.809 0.134 1.254 0 0.763-0.144 1.493-0.407 2.162l0.014-0.040c-0.076-0.131-0.155-0.289-0.224-0.453l-0.011-0.029c-0.066-0.159-0.209-0.416-0.406-0.77-0.769-1.38-2.571-4.611-1.649-5.929 0.474-0.678 1.676-0.707 2.722-0.579zM24.406 20.907c-0.051-1.039 0.336-1.148 0.746-1.263q0.085-0.023 0.169-0.051c0.050 0.044 0.105 0.087 0.162 0.125l0.005 0.003c0.62 0.273 1.342 0.431 2.102 0.431 0.592 0 1.161-0.096 1.693-0.274l-0.038 0.011c-0.344 0.293-0.736 0.544-1.16 0.738l-0.031 0.013c-0.644 0.264-1.391 0.429-2.173 0.454l-0.010 0c-0.119 0.018-0.256 0.029-0.395 0.029-0.386 0-0.754-0.080-1.087-0.224l0.018 0.007zM23.293 22.933c-0.021 0.221-0.045 0.47-0.077 0.745l-0.182 0.548c-0.014 0.040-0.022 0.086-0.023 0.134v0c0.001 0.027 0.001 0.058 0.001 0.089 0 0.355-0.053 0.699-0.151 1.022l0.006-0.025c-0.116 0.389-0.196 0.84-0.223 1.305l-0.001 0.016c-0.052 1.684-1.355 3.047-3.008 3.194l-0.013 0.001c-1.894 0.406-2.23-0.621-2.526-1.527q-0.045-0.142-0.096-0.283c-0.16-0.652-0.252-1.401-0.252-2.171 0-0.36 0.020-0.715 0.059-1.065l-0.004 0.043c0.006-0.128 0.009-0.279 0.009-0.43 0-1.026-0.154-2.016-0.441-2.948l0.019 0.071q0.008-0.55 0.024-1.114c0-0.003 0-0.008 0-0.012 0-0.046-0.007-0.090-0.020-0.132l0.001 0.003c-0.014-0.1-0.033-0.188-0.058-0.273l0.003 0.013c-0.141-0.521-0.496-0.941-0.964-1.164l-0.011-0.005c-0.176-0.088-0.384-0.14-0.605-0.14-0.104 0-0.205 0.011-0.302 0.033l0.009-0.002c0.128-0.47 0.26-0.854 0.412-1.228l-0.026 0.073 0.066-0.177c0.074-0.2 0.167-0.407 0.266-0.626 0.546-1.124 0.865-2.445 0.865-3.841 0-0.938-0.144-1.842-0.411-2.692l0.017 0.063c-0.183-1.108-1.135-1.943-2.281-1.943-0.18 0-0.356 0.021-0.524 0.060l0.016-0.003c-0.796 0.104-1.516 0.338-2.171 0.682l0.035-0.017q-0.124 0.063-0.245 0.13c0.091-2.147 0.896-4.090 2.181-5.615l-0.012 0.014c0.118-0.119 0.242-0.232 0.37-0.338l0.009-0.007c0.069-0.014 0.13-0.042 0.182-0.081l-0.001 0.001c0.893-0.654 2.014-1.047 3.227-1.047 0.097 0 0.193 0.002 0.288 0.007l-0.013-0.001c0.526 0.008 1.034 0.044 1.534 0.108l-0.067-0.007c2.043 0.393 3.787 1.463 5.032 2.963l0.011 0.014c0.748 0.869 1.354 1.887 1.766 2.998l0.022 0.069c-0.257-0.069-0.552-0.109-0.856-0.109-0.983 0-1.868 0.416-2.49 1.081l-0.002 0.002c-1.24 1.773 0.679 5.215 1.601 6.869 0.169 0.303 0.315 0.565 0.361 0.676 0.26 0.601 0.587 1.118 0.98 1.577l-0.007-0.008c0.087 0.109 0.171 0.214 0.236 0.306-0.501 0.144-1.401 0.478-1.319 2.146-0.015 0.195-0.053 0.558-0.104 1.018-0.054 0.269-0.098 0.597-0.123 0.93l-0.002 0.028zM14.091 17.219l-0.066 0.176c-0.137 0.328-0.279 0.745-0.397 1.172l-0.019 0.081c-0.893-0.013-1.695-0.395-2.261-1.001l-0.002-0.002c-0.632-0.667-1.020-1.57-1.020-2.564 0-0.198 0.015-0.392 0.045-0.582l-0.003 0.021c0.097-0.72 0.153-1.551 0.153-2.396 0-0.502-0.020-0.999-0.058-1.491l0.004 0.065c-0.006-0.107-0.012-0.201-0.015-0.275 0.805-0.611 1.824-0.98 2.929-0.98 0.132 0 0.262 0.005 0.391 0.015l-0.017-0.001c0.554 0.129 0.971 0.588 1.037 1.153l0.001 0.006c0.238 0.728 0.375 1.566 0.375 2.435 0 1.266-0.291 2.464-0.809 3.532l0.021-0.048c-0.105 0.233-0.204 0.453-0.289 0.682zM11.474 22.203c-0.205-0.052-0.385-0.128-0.549-0.227l0.009 0.005c0.172-0.073 0.375-0.134 0.585-0.173l0.019-0.003c1.604-0.33 1.851-0.563 2.392-1.25 0.124-0.157 0.264-0.336 0.459-0.553 0.040-0.045 0.072-0.099 0.091-0.159l0.001-0.003c0.213-0.189 0.34-0.137 0.546-0.052 0.227 0.125 0.395 0.336 0.46 0.587l0.001 0.007c0.023 0.065 0.037 0.139 0.037 0.217 0 0.125-0.035 0.242-0.095 0.341l0.002-0.003c-0.645 0.882-1.676 1.449-2.839 1.449-0.4 0-0.785-0.067-1.144-0.191l0.025 0.007zM3.967 15.846c-0.651-1.985-1.181-4.34-1.494-6.764l-0.021-0.199c-0.061-0.322-0.095-0.693-0.095-1.071 0-1.806 0.789-3.427 2.041-4.537l0.006-0.005c2.295-1.623 6.048-0.676 7.633-0.163l-0.012 0.012c-1.535 1.872-2.466 4.292-2.466 6.928 0 0.090 0.001 0.18 0.003 0.27l-0-0.013c-0 0.103 0.008 0.249 0.020 0.449 0.033 0.41 0.052 0.888 0.052 1.371 0 0.802-0.052 1.592-0.154 2.367l0.010-0.091c-0.033 0.206-0.051 0.444-0.051 0.686 0 1.231 0.482 2.35 1.269 3.177l-0.002-0.002q0.151 0.158 0.315 0.297c-0.433 0.464-1.375 1.49-2.377 2.696-0.709 0.853-1.199 0.689-1.36 0.636-0.685-0.368-1.222-0.939-1.538-1.631l-0.009-0.022c-0.684-1.252-1.286-2.708-1.73-4.232l-0.039-0.157zM30.445 19.403c-0.019-0.057-0.043-0.106-0.072-0.151l0.002 0.003c-0.174-0.329-0.596-0.427-1.259-0.29-2.066 0.426-2.866 0.164-3.156-0.024 1.617-2.452 2.918-5.292 3.751-8.326l0.049-0.209c0.339-1.313 0.997-4.403 0.153-5.913-0.059-0.112-0.122-0.208-0.192-0.298l0.003 0.004c-1.563-1.955-3.948-3.196-6.623-3.196-0.076 0-0.152 0.001-0.227 0.003l0.011-0c-0.042-0.001-0.091-0.001-0.141-0.001-1.342 0-2.633 0.22-3.838 0.625l0.085-0.025q-0.321-0.060-0.645-0.102c-0.488-0.093-1.053-0.151-1.631-0.16l-0.008-0c-0.083-0.004-0.18-0.006-0.278-0.006-1.315 0-2.538 0.394-3.557 1.071l0.024-0.015c-1.071-0.401-5.984-2.056-9.025 0.098-1.489 1.27-2.426 3.147-2.426 5.244 0 0.405 0.035 0.802 0.102 1.188l-0.006-0.041c0.335 2.698 0.879 5.126 1.632 7.461l-0.079-0.284c0.493 1.716 1.103 3.201 1.852 4.6l-0.061-0.124c0.433 0.984 1.182 1.764 2.116 2.225l0.026 0.012c0.168 0.049 0.361 0.078 0.561 0.078 0.742 0 1.392-0.391 1.756-0.979l0.005-0.009c1.001-1.204 1.987-2.282 2.43-2.758 0.502 0.279 1.097 0.451 1.731 0.471l0.006 0 0.001 0.005q-0.158 0.188-0.309 0.382c-0.424 0.538-0.512 0.649-1.875 0.93-0.388 0.080-1.418 0.292-1.433 1.014-0 0.004-0 0.008-0 0.013 0 0.147 0.043 0.284 0.117 0.399l-0.002-0.003c0.312 0.395 0.751 0.678 1.254 0.788l0.015 0.003c0.399 0.13 0.859 0.205 1.335 0.205 1.1 0 2.106-0.398 2.884-1.058l-0.006 0.005c-0.024 0.418-0.037 0.908-0.037 1.401 0 1.753 0.171 3.467 0.496 5.125l-0.027-0.167c0.382 1.373 1.616 2.367 3.084 2.38h0.002c0.369-0.003 0.726-0.046 1.070-0.124l-0.033 0.006c1.919-0.171 3.431-1.705 3.567-3.619l0.001-0.012c0.188-1.088 0.502-3.593 0.673-5.125 0.008-0.065 0.034-0.123 0.072-0.171l-0.001 0.001c0.001-0.001 0.087-0.059 0.534 0.038l0.055 0.009 0.317 0.028 0.019 0.001c0.095 0.004 0.207 0.007 0.319 0.007 1.024 0 2.002-0.2 2.895-0.564l-0.051 0.018c0.805-0.373 2.256-1.29 1.993-2.087z"></path>
</svg>
),
},
{
name: "MySQL",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16.405 5.501c-.115 0-.193.014-.274.033v.013h.014c.054.104.146.18.214.273c.054.107.1.214.154.32l.014-.015c.094-.066.14-.172.14-.333c-.04-.047-.046-.094-.08-.14c-.04-.067-.126-.1-.18-.153zM5.77 18.695h-.927a51 51 0 0 0-.27-4.41h-.008l-1.41 4.41H2.45l-1.4-4.41h-.01a73 73 0 0 0-.195 4.41H0q.083-2.95.41-5.53h1.15l1.335 4.064h.008l1.347-4.064h1.095q.363 3.024.428 5.53zm4.017-4.08q-.567 3.069-1.492 4.46q-.723 1.074-1.583 1.073q-.228 0-.566-.138v-.494q.166.026.386.026q.402 0 .647-.222q.295-.27.295-.605q0-.233-.23-.944L6.23 14.615h.91l.727 2.36q.247.804.205 1.123q.6-1.598.835-3.483zm12.325 4.08h-2.63v-5.53h.885v4.85h1.745zm-3.32.135l-1.016-.5q.136-.113.255-.25q.649-.76.648-2.253q0-2.745-2.155-2.746q-1.056 0-1.65.697q-.646.762-.646 2.245q-.001 1.459.574 2.14q.524.615 1.583.615q.396 0 .725-.098l1.325.772l.36-.622zM15.5 17.588q-.337-.541-.337-1.736q0-2.09 1.27-2.09q.666 0 .977.5q.336.543.336 1.723q0 2.107-1.27 2.108q-.667 0-.978-.5zm-1.658-.425q0 .706-.516 1.156q-.514.45-1.384.45c-.543 0-1.064-.172-1.573-.515l.237-.476q.656.329 1.19.328q.498 0 .783-.22a.75.75 0 0 0 .3-.615c0-.33-.23-.61-.648-.845c-.388-.213-1.163-.657-1.163-.657c-.422-.307-.632-.636-.632-1.177q0-.674.47-1.085q.471-.416 1.22-.415q.769 0 1.4.41l-.213.476a2.7 2.7 0 0 0-1.064-.23q-.425 0-.654.206a.69.69 0 0 0-.248.524c0 .328.234.61.666.85c.393.215 1.187.67 1.187.67c.433.305.648.63.648 1.168zm9.382-5.852c-.535-.014-.95.04-1.297.188c-.1.04-.26.04-.274.167c.055.053.063.14.11.214c.08.134.218.313.346.407q.208.167.427.31c.26.16.555.255.81.416c.145.094.293.213.44.313c.073.05.12.14.214.172v-.02c-.046-.06-.06-.147-.105-.214c-.067-.067-.134-.127-.2-.193a3.2 3.2 0 0 0-.695-.675c-.214-.146-.682-.35-.77-.595l-.013-.014c.146-.013.32-.066.46-.106c.227-.06.435-.047.67-.106q.16-.042.32-.094v-.06c-.12-.12-.21-.283-.334-.395a9 9 0 0 0-1.104-.823c-.21-.134-.476-.22-.697-.334c-.08-.04-.214-.06-.26-.127c-.12-.146-.19-.34-.275-.514a18 18 0 0 1-.547-1.163c-.12-.262-.193-.523-.34-.763c-.69-1.137-1.437-1.826-2.586-2.5c-.247-.14-.543-.2-.856-.274c-.167-.008-.334-.02-.5-.027c-.11-.047-.216-.174-.31-.235c-.38-.24-1.364-.76-1.644-.072c-.18.434.267.862.422 1.082c.115.153.26.328.34.5c.047.116.06.235.107.356c.106.294.207.622.347.897c.073.14.153.287.247.413c.054.073.146.107.167.227c-.094.136-.1.334-.154.5c-.24.757-.146 1.693.194 2.25c.107.166.362.534.703.393c.3-.12.234-.5.32-.835c.02-.08.007-.133.048-.187v.015c.094.188.188.367.274.555c.206.328.566.668.867.895c.16.12.287.328.487.402v-.02h-.015c-.043-.058-.1-.086-.154-.133a3.5 3.5 0 0 1-.35-.4a9 9 0 0 1-.747-1.218c-.11-.21-.202-.436-.29-.643c-.04-.08-.04-.2-.107-.24c-.1.146-.247.273-.32.453c-.127.288-.14.642-.188 1.01c-.027.007-.014 0-.027.014c-.214-.052-.287-.274-.367-.46c-.2-.475-.233-1.238-.06-1.785c.047-.14.247-.582.167-.716c-.042-.127-.174-.2-.247-.303a2.5 2.5 0 0 1-.24-.427c-.16-.374-.24-.788-.414-1.162c-.08-.173-.22-.354-.334-.513c-.127-.18-.267-.307-.368-.52c-.033-.073-.08-.194-.027-.274c.014-.054.042-.075.094-.09c.088-.072.335.022.422.062c.247.1.455.194.662.334c.094.066.195.193.315.226h.14c.214.047.455.014.655.073c.355.114.675.28.962.46a5.95 5.95 0 0 1 2.085 2.286c.08.154.115.295.188.455c.14.33.313.663.455.982c.14.315.275.636.476.897c.1.14.502.213.682.286c.133.06.34.115.46.188c.23.14.454.3.67.454c.11.076.443.243.463.378"
/>
</svg>
),
},
{
name: "SQLite",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M21.678.521c-1.032-.92-2.28-.55-3.513.544a9 9 0 0 0-.547.535c-2.109 2.237-4.066 6.38-4.674 9.544c.237.48.422 1.093.544 1.561a13 13 0 0 1 .164.703s-.019-.071-.096-.296l-.05-.146l-.033-.08c-.138-.32-.518-.995-.686-1.289c-.143.423-.27.818-.376 1.176c.484.884.778 2.4.778 2.4s-.025-.099-.147-.442c-.107-.303-.644-1.244-.772-1.464c-.217.804-.304 1.346-.226 1.478c.152.256.296.698.422 1.186c.286 1.1.485 2.44.485 2.44l.017.224a22 22 0 0 0 .056 2.748c.095 1.146.273 2.13.5 2.657l.155-.084c-.334-1.038-.47-2.399-.41-3.967c.09-2.398.642-5.29 1.661-8.304c1.723-4.55 4.113-8.201 6.3-9.945c-1.993 1.8-4.692 7.63-5.5 9.788c-.904 2.416-1.545 4.684-1.931 6.857c.666-2.037 2.821-2.912 2.821-2.912s1.057-1.304 2.292-3.166c-.74.169-1.955.458-2.362.629c-.6.251-.762.337-.762.337s1.945-1.184 3.613-1.72C21.695 7.9 24.195 2.767 21.678.521m-18.573.543A1.84 1.84 0 0 0 1.27 2.9v16.608a1.84 1.84 0 0 0 1.835 1.834h9.418a23 23 0 0 1-.052-2.707c-.006-.062-.011-.141-.016-.2a27 27 0 0 0-.473-2.378c-.121-.47-.275-.898-.369-1.057c-.116-.197-.098-.31-.097-.432c0-.12.015-.245.037-.386a10 10 0 0 1 .234-1.045l.217-.028c-.017-.035-.014-.065-.031-.097l-.041-.381a33 33 0 0 1 .382-1.194l.2-.019c-.008-.016-.01-.038-.018-.053l-.043-.316c.63-3.28 2.587-7.443 4.8-9.791c.066-.069.133-.128.198-.194Z"
/>
</svg>
),
},
{
name: "MongoDB",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M17.193 9.555c-1.264-5.58-4.252-7.414-4.573-8.115c-.28-.394-.53-.954-.735-1.44c-.036.495-.055.685-.523 1.184c-.723.566-4.438 3.682-4.74 10.02c-.282 5.912 4.27 9.435 4.888 9.884l.07.05A74 74 0 0 1 11.91 24h.481a29 29 0 0 1 .51-3.07c.417-.296.604-.463.85-.693a11.34 11.34 0 0 0 3.639-8.464c.01-.814-.103-1.662-.197-2.218m-5.336 8.195s0-8.291.275-8.29c.213 0 .49 10.695.49 10.695c-.381-.045-.765-1.76-.765-2.405"
/>
</svg>
),
},
{
name: "LibSQL",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m23.31.803l-.563-.42l-1.11 1.189l-.891-1.286l-.512.235l.704 1.798l-.326.35L18.082 0l-.574.284l2.25 4.836l-2.108.741h-.05l-1.143-1.359l-1.144 1.36H8.687l-1.144-1.36l-1.146 1.363H6.36L4.24 5.12L6.491.284L5.919 0l-2.53 2.668l-.327-.349l.705-1.798l-.512-.236l-.89 1.287L1.253.382L.69.804L2.42 3.69l-.89.939l.311 2.375l2.061.787L3.9 8.817H1.947v.444l.755 1.078l1.197.433v6.971l3.057 4.55L7.657 24l1.101-1.606L9.9 24l.999-1.606L12 24l1.102-1.606L14.1 24l1.141-1.606L16.343 24l.701-1.706l3.058-4.55v-6.972l1.196-.433l.756-1.078v-.444h-1.952l.003-1.03l2.054-.784l.311-2.375l-.89-.939zm-8.93 18.718H8.033l.793-1.615l.794 1.615l.793-1.083l.793 1.083l.794-1.083l.793 1.083l.794-1.083zl.793-1.615l.794 1.615zm3.886-7.39l-3.3 1.084l-.143 3.061l-2.827.627l-2.826-.627l-.142-3.06l-3.3-1.085v-1.635l4.266 1.21l-.052 4.126h4.109l-.052-4.127l4.266-1.209z"
/>
</svg>
),
},
];
const ormAdapters = [
{
name: "Prisma",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M21.807 18.285L13.553.757a1.32 1.32 0 0 0-1.129-.755a1.31 1.31 0 0 0-1.206.626l-8.952 14.5a1.36 1.36 0 0 0 .016 1.455l4.376 6.778a1.41 1.41 0 0 0 1.58.581l12.703-3.757c.389-.115.707-.39.873-.755s.164-.783-.007-1.145m-1.848.752L9.18 22.224a.452.452 0 0 1-.575-.52l3.85-18.438c.072-.345.549-.4.699-.08l7.129 15.138a.515.515 0 0 1-.325.713"
/>
</svg>
),
},
{
name: "Drizzle",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M5.353 11.823a1.036 1.036 0 0 0-.395-1.422a1.063 1.063 0 0 0-1.437.399L.138 16.702a1.035 1.035 0 0 0 .395 1.422a1.063 1.063 0 0 0 1.437-.398zm11.216 0a1.036 1.036 0 0 0-.394-1.422a1.064 1.064 0 0 0-1.438.399l-3.382 5.902a1.036 1.036 0 0 0 .394 1.422c.506.283 1.15.104 1.438-.398zm7.293-4.525a1.036 1.036 0 0 0-.395-1.422a1.06 1.06 0 0 0-1.437.399l-3.383 5.902a1.036 1.036 0 0 0 .395 1.422a1.063 1.063 0 0 0 1.437-.399zm-11.219 0a1.035 1.035 0 0 0-.394-1.422a1.064 1.064 0 0 0-1.438.398l-3.382 5.903a1.036 1.036 0 0 0 .394 1.422c.506.282 1.15.104 1.438-.399z"
/>
</svg>
),
},
{
name: "Mongoose",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M14.014 7.37a9 9 0 0 0-.808.025c-.218.017-.434.072-.65.11c.229.118.456.213.68.315q.339.155.629.387c-.253-.097-.499-.208-.752-.298a8 8 0 0 0-1.624-.421c-.273-.037-.546-.073-.819.005c-.276.078-.354.18-.38.458c-.04.46.098.887.281 1.298a4.4 4.4 0 0 0 1.185 1.573a4.6 4.6 0 0 0 1.305.787l.411.155l-.009.032c-.263-.072-.532-.126-.787-.22a4.1 4.1 0 0 1-1.222-.73a4.2 4.2 0 0 1-1.007-1.22a3.4 3.4 0 0 1-.43-1.609l-.012.005C4.891 7.488.402 11.595.035 11.94l-.034.014q-.002.007.003.016L0 11.974l.005-.002l.013.024c.087-.019.173-.042.26-.054l.069-.01c.324-.115.655-.205.997-.253c.484-.069.985-.159 1.48-.156c.468.002.943.074 1.402.153q.193.034.38.087c.335.075.65.21.933.391l.06.03c.403.19.758.47 1.038.811c.052.057.141.116.187.178c.096.114.142.236.303.363v-1.737h2.01l.939 1.733l.942-1.733h2.07v3.357l.343-.226s.375-1 2.116-1.14l1.996-.064c-.308-.637-.307-.637-.159-.83c.147-.19 1.28-.314 1.48-.433l2.912-.588c.007-.022.015.012.03.007c.072-.022.147-.037.25-.061l.66-.16c.042-.025.093-.034.14-.05c.308-.107.577-.245.726-.573c.145-.319.339-.616.41-.967c.022-.111.003-.208-.078-.288a.73.73 0 0 0-.35-.171c-.421-.173-.84-.35-1.264-.513c-.261-.101-.529-.185-.795-.27a31 31 0 0 0-.794-.243q-.366-.106-.736-.205c-.24-.066-.48-.133-.72-.192c-.282-.07-.565-.13-.847-.195c-.215-.05-.428-.102-.644-.146q-.351-.07-.706-.13c-.302-.053-.602-.112-.905-.153c-.366-.05-.734-.082-1.101-.125q-.518-.061-1.038-.07m-3.303.767a.2.2 0 0 1 .056.007c.42.13.83.277 1.216.491c.365.203.695.45.979.756c.012.013.02.028.036.05l-.645-.293l-.021.026l.37.551l-.022.022a2 2 0 0 0-.665-.322l-.02.02l.633.74l-.416-.136l-.017.02c.163.27.376.505.58.775c-.354-.2-.665-.42-.956-.669a4.5 4.5 0 0 1-1.01-1.185c-.107-.19-.201-.385-.222-.606a.5.5 0 0 1 .011-.15a.12.12 0 0 1 .113-.097m5.424.668c.154.002.311-.006.464.015c.278.037.555.092.832.14c.158.027.317.052.474.086q.446.098.89.2q.294.068.587.14l-.329.161c-.365.027-.731.055-1.097.057a3.3 3.3 0 0 1-.675-.074c-.28-.058-.514-.196-.652-.466c-.02-.04-.09-.063-.14-.078c-.18-.054-.362-.1-.544-.168c.063-.005.126-.014.19-.013m3.223 2.635l.005.02q-.12.031-.239.067c-.455.14-.916.266-1.363.428c-.28.101-.544.25-.81.388c-.233.119-.315.322-.287.575q.03.243.055.488a1.8 1.8 0 0 1-.288-.701c-.035-.169.058-.273.18-.365c.238-.178.496-.318.777-.41c.35-.117.702-.233 1.059-.325c.251-.065.513-.09.77-.133q.071-.014.141-.032M9.141 13.955v2.676h1.869l.064-.066v-2.61l-.97 1.495z"
/>
</svg>
),
},
{
name: "TypeORM",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M22.593 6.863c0 .9-.008 1.742.004 2.583c.006.355.07.708.21 1.038c.133.306.35.544.652.692c.153.075.314.131.47.204a.134.13 0 0 1 .066.099q.008.58 0 1.16c0 .039-.052.097-.093.11a1.818 1.82 0 0 0-1.178 1.22c-.125.387-.137.785-.137 1.187q.002 2.24-.006 4.48c0 .466-.07.926-.225 1.363c-.087.241-.226.463-.347.69c-.016.031-.05.052-.08.073c-.185.137-.365.287-.56.407c-.169.103-.354.177-.535.255c-.114.048-.236.082-.352.121q-.025.01-.05.014c-.23.028-.46.062-.689.083q-.418.033-.834.052c-.061.003-.123-.02-.183-.026c-.104-.01-.13-.07-.128-.168a32 32 0 0 0 0-1.017c0-.104.027-.15.139-.141c.117.007.24.012.354-.004q.332-.047.655-.125a3 3 0 0 0 .44-.153a.94.94 0 0 0 .456-.409c.125-.208.185-.437.236-.676c.057-.263.036-.52.04-.78c.007-1.485 0-2.97.008-4.456q.003-.47.078-.935a2.148 2.15 0 0 1 1.09-1.585l.25-.143c.061-.037.054-.107-.016-.144a2.8 2.8 0 0 1-.815-.646a2.1 2.1 0 0 1-.39-.711c-.18-.551-.205-1.12-.202-1.694c.002-1.446-.01-2.892 0-4.337a3 3 0 0 0-.072-.666c-.08-.37-.24-.712-.59-.909a2.3 2.3 0 0 0-.467-.177a3 3 0 0 0-.503-.11a4 4 0 0 0-.54-.025c-.113.001-.153-.03-.15-.147c.006-.364.003-.728.001-1.092c0-.089.03-.122.117-.119c.196.005.39-.007.584.004c.272.016.545.035.815.073a3.1 3.1 0 0 1 1.598.714c.252.215.408.479.534.772c.15.346.226.71.275 1.082c.13.99.03 1.986.072 2.918ZM1.421 6.715c0-.581-.006-1.163.002-1.745c.006-.382.009-.77.049-1.149c.027-.263.11-.52.18-.778a1.8 1.8 0 0 1 .366-.723a2.5 2.5 0 0 1 .508-.449c.194-.127.416-.208.629-.305c.17-.076.348-.108.53-.141A8.3 8.3 0 0 1 5.258 1.3c.09 0 .122.027.12.117q-.004.558 0 1.118c0 .091-.028.126-.123.122a1.6 1.6 0 0 0-.321.003a8 8 0 0 0-.704.127c-.15.035-.291.094-.434.148a.94.94 0 0 0-.46.406c-.123.208-.183.44-.238.68c-.067.3.008.588.002.882c-.02 1.329-.006 2.658-.01 3.99a10 10 0 0 1-.051 1.098c-.08.724-.385 1.328-1.024 1.727q-.173.103-.345.209c-.023.014-.051.049-.047.068a.14.14 0 0 0 .058.084a2.9 2.9 0 0 1 .843.678c.19.23.311.494.4.78c.15.496.159 1.006.164 1.516c.008 1.298.002 2.597.003 3.896c0 .144.015.288.013.431c0 .072-.025.143-.027.215q-.004.126.005.253c.003.052.02.104.029.156c.043.301.137.583.336.817c.131.153.303.252.494.321c.201.072.41.1.616.149c.246.058.485.044.73.054c.065.003.09.03.09.093c0 .392.002.784-.005 1.176c0 .029-.053.081-.082.081c-.252.005-.503.01-.754-.002a5 5 0 0 1-.678-.069c-.234-.044-.46-.122-.69-.186a2.15 2.15 0 0 1-.955-.572a1.9 1.9 0 0 1-.376-.54a4.2 4.2 0 0 1-.292-.87a5 5 0 0 1-.103-.964c-.015-1.423-.013-2.846-.023-4.268c-.002-.322-.004-.645-.039-.964c-.04-.36-.12-.712-.342-1.013a1.5 1.5 0 0 0-.624-.487c-.11-.048-.226-.083-.334-.137c-.037-.02-.077-.075-.077-.115q-.006-.56-.003-1.118c0-.1.088-.118.155-.141c.372-.13.676-.348.891-.684a2.05 2.05 0 0 0 .344-1.087c.022-.92.03-1.841.044-2.76h-.016Z"
/>
</svg>
),
},
{
name: "Kysely",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M4 7V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" />
<polyline points="14 2 14 8 20 8" />
<path d="M2 15h10" />
<path d="M9 18l3-3-3-3" />
</svg>
),
},
{
name: "MikroORM",
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M4 7V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" />
<polyline points="14 2 14 8 20 8" />
<path d="M2 15h10" />
<path d="M9 18l3-3-3-3" />
</svg>
),
},
];
const dbCodeExamples: Record<string, string> = {
PostgreSQL: `import { betterAuth } from "better-auth"
import { Pool } from "pg"
export const auth = betterAuth({
database: new Pool({
connectionString: process.env.DATABASE_URL,
}),
})`,
Prisma: `import { betterAuth } from "better-auth"
import { prismaAdapter } from "better-auth/adapters/prisma"
import { PrismaClient } from "@prisma/client"
const prisma = new PrismaClient()
export const auth = betterAuth({
database: prismaAdapter(prisma, {
provider: "postgresql",
}),
})`,
Drizzle: `import { betterAuth } from "better-auth"
import { drizzleAdapter } from "better-auth/adapters/drizzle"
import { db } from "./db"
export const auth = betterAuth({
database: drizzleAdapter(db, {
provider: "pg",
}),
})`,
MongoDB: `import { betterAuth } from "better-auth"
import { mongodbAdapter } from "better-auth/adapters/mongodb"
import { MongoClient } from "mongodb"
const client = new MongoClient(process.env.MONGO_URI!)
const db = client.db()
export const auth = betterAuth({
database: mongodbAdapter(db),
})`,
};
export const serverCode = `import { betterAuth } from "better-auth"
export const auth = betterAuth({
emailAndPassword: {
enabled: true,
},
socialProviders: {
google: {
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
},
github: {
clientId: process.env.GITHUB_CLIENT_ID!,
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
},
},
plugins: [
twoFactor(),
passkey(),
organization(),
],
})`;
export const clientCode = `import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
plugins: [
twoFactorClient(),
passkeyClient(),
organizationClient(),
],
})`;
export function ServerClientTabs() {
const [activeTab, setActiveTab] = useState<"server" | "client">("server");
return (
<div className="relative">
<div className="absolute -inset-4 bg-gradient-to-br from-foreground/[0.02] via-transparent to-foreground/[0.02] rounded-2xl blur-xl pointer-events-none dark:from-foreground/[0.03] dark:to-foreground/[0.03]" />
<div className="relative overflow-hidden bg-neutral-50 dark:bg-black">
<div className="flex border border-foreground/[0.08] rounded-t-lg bg-neutral-100/50 dark:bg-[#0a0a0a]/50">
<button
type="button"
onClick={() => startTransition(() => setActiveTab("server"))}
className={`flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition-colors relative ${
activeTab === "server"
? "text-foreground/80"
: "text-foreground/40 hover:text-foreground/60"
}`}
>
auth.ts
{activeTab === "server" && (
<span className="absolute bottom-0 left-2 right-2 h-[1.5px] bg-foreground/70" />
)}
</button>
<button
type="button"
onClick={() => startTransition(() => setActiveTab("client"))}
className={`flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition-colors relative ${
activeTab === "client"
? "text-foreground/80"
: "text-foreground/40 hover:text-foreground/60"
}`}
>
auth-client.ts
{activeTab === "client" && (
<span className="absolute bottom-0 left-2 right-2 h-[1.5px] bg-foreground/70" />
)}
</button>
</div>
<div className="relative max-h-[320px] overflow-hidden">
<DynamicCodeBlock
lang="ts"
code={activeTab === "server" ? serverCode : clientCode}
codeblock={{
className:
"border-0 rounded-none my-0 shadow-none bg-neutral-50 dark:bg-black [&_div]:bg-neutral-50 [&_div]:dark:bg-black [&_div]:text-[12px]",
"data-line-numbers": true,
}}
/>
<div
className="absolute inset-y-0 left-0 w-px pointer-events-none"
style={{
background:
"linear-gradient(to bottom, var(--color-foreground) 0%, transparent 100%)",
opacity: 0.08,
}}
/>
<div
className="absolute inset-y-0 right-0 w-px pointer-events-none"
style={{
background:
"linear-gradient(to bottom, var(--color-foreground) 0%, transparent 100%)",
opacity: 0.08,
}}
/>
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-background to-transparent pointer-events-none" />
</div>
</div>
</div>
);
}
const allDbs = [...dbDrivers, ...ormAdapters];
function getDbIcon(name: string) {
const found = allDbs.find((d) => d.name === name);
return found ? found.icon() : null;
}
export function DatabaseSection() {
const [activeDb, setActiveDb] = useState<string>("PostgreSQL");
const dbOptions = Object.keys(dbCodeExamples);
const codeScrollRef = useRef<HTMLDivElement>(null);
const sidebarRef = useRef<HTMLDivElement>(null);
const isFirstRender = useRef(true);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
const el = codeScrollRef.current;
if (el) {
el.scrollTop = 0;
}
const sidebar = sidebarRef.current;
if (sidebar) {
const active = sidebar.querySelector(
`[data-db="${activeDb}"]`,
) as HTMLElement | null;
if (active) {
active.scrollIntoView({ block: "nearest", behavior: "smooth" });
}
}
}, [activeDb]);
return (
<div>
<div className="flex items-center gap-3 mb-5">
<span className="text-base text-foreground/85 dark:text-foreground/75">
Bring Your Own{" "}
<span className="text-amber-600 dark:text-amber-400">Database</span>
</span>
<div className="h-px flex-1 bg-foreground/10" />
</div>
<p className="text-[13px] text-foreground/55 dark:text-foreground/45 mb-5 max-w-xl leading-relaxed">
Use any database you want. Connect directly with a connection string, or
use your favorite ORM adapter. Your data stays in your database.
</p>
<div className="border border-foreground/[0.12] overflow-hidden bg-neutral-50/50 dark:bg-black/40">
{/* Tabs */}
<div className="flex border-b border-foreground/[0.09] bg-neutral-100/50 dark:bg-[#0a0a0a]/50 overflow-x-auto no-scrollbar">
{dbOptions.map((db) => (
<button
key={db}
type="button"
onClick={() => startTransition(() => setActiveDb(db))}
className={`flex items-center gap-1.5 px-3 py-2 text-[11px] font-mono transition-colors relative border-r border-foreground/[0.08] last:border-r-0 shrink-0 ${
activeDb === db
? "text-foreground/90 bg-foreground/[0.03]"
: "text-foreground/45 hover:text-foreground/70"
}`}
>
<span
className={
activeDb === db ? "text-foreground/70" : "text-foreground/35"
}
>
{getDbIcon(db)}
</span>
{db}
{activeDb === db && (
<span className="absolute bottom-0 left-0 right-0 h-[1.5px] bg-amber-500/70 dark:bg-amber-400/60" />
)}
</button>
))}
</div>
{/* Code + Sidebar side by side, same fixed height */}
<div className="flex h-[180px]">
{/* Code snippet */}
<div className="flex-1 min-w-0 relative">
<div
ref={codeScrollRef}
className="h-full overflow-auto no-scrollbar"
>
<DynamicCodeBlock
lang="ts"
code={dbCodeExamples[activeDb]}
codeblock={{
className:
"border-0 rounded-none my-0 shadow-none bg-neutral-50 dark:bg-black [&_div]:bg-neutral-50 [&_div]:dark:bg-black [&_div]:text-[12px]",
"data-line-numbers": true,
}}
/>
</div>
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-neutral-50 dark:from-black to-transparent pointer-events-none" />
</div>
{/* Right sidebar — supported DBs & community */}
<div
ref={sidebarRef}
className="hidden sm:block w-[180px] shrink-0 border-l border-foreground/[0.09] bg-foreground/[0.015] overflow-y-auto no-scrollbar"
>
<div className="px-3 pt-3 pb-2">
<p className="text-[9px] font-mono uppercase tracking-widest text-amber-600/80 dark:text-amber-400/80 mb-2.5">
Direct Drivers
</p>
<div className="space-y-1">
{dbDrivers.map((db) => (
<button
key={db.name}
type="button"
data-db={db.name}
onClick={() =>
dbCodeExamples[db.name] &&
startTransition(() => setActiveDb(db.name))
}
className={`group flex items-center gap-2 w-full text-left transition-colors py-1 px-1.5 ${
activeDb === db.name
? "text-foreground/90 dark:text-foreground/80"
: dbCodeExamples[db.name]
? "text-foreground/50 dark:text-foreground/35 hover:text-foreground/75 cursor-pointer"
: "text-foreground/30 dark:text-foreground/20"
}`}
>
<span className="shrink-0">{db.icon()}</span>
<span className="text-[11px] font-mono">{db.name}</span>
</button>
))}
</div>
</div>
<div className="border-t border-foreground/[0.06] px-3 pt-2.5 pb-2">
<p className="text-[9px] font-mono uppercase tracking-widest text-violet-600/80 dark:text-violet-400/80 mb-2.5">
ORM Adapters
</p>
<div className="space-y-1">
{ormAdapters.map((adapter) => (
<button
key={adapter.name}
type="button"
data-db={adapter.name}
onClick={() =>
dbCodeExamples[adapter.name] &&
startTransition(() => setActiveDb(adapter.name))
}
className={`group flex items-center gap-2 w-full text-left transition-colors py-1 px-1.5 ${
activeDb === adapter.name
? "text-foreground/90 dark:text-foreground/80"
: dbCodeExamples[adapter.name]
? "text-foreground/50 dark:text-foreground/35 hover:text-foreground/75 cursor-pointer"
: "text-foreground/30 dark:text-foreground/20"
}`}
>
<span className="shrink-0">{adapter.icon()}</span>
<span className="text-[11px] font-mono">
{adapter.name}
</span>
</button>
))}
</div>
</div>
<div className="border-t border-foreground/[0.06] px-3 pt-2.5 pb-3">
<p className="text-[9px] font-mono uppercase tracking-widest text-sky-600/80 dark:text-sky-400/80 mb-2">
Community
</p>
<div className="space-y-1">
{["Supabase", "Neon", "Turso", "PlanetScale", "D1"].map(
(name) => (
<div
key={name}
className="flex items-center gap-2 py-0.5 px-1.5"
>
<span className="size-1.5 border border-foreground/20 bg-foreground/[0.05]" />
<span className="text-[10px] font-mono text-foreground/35 dark:text-foreground/22">
{name}
</span>
</div>
),
)}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export function SocialProvidersSection() {
const containerRef = useRef<HTMLDivElement>(null);
const [scrollIndex, setScrollIndex] = useState(0);
const visibleRows = 2;
const perRow = 5;
const rowHeight = 34;
const totalRows = Math.ceil(socialProviders.length / perRow);
const maxScroll = totalRows - visibleRows;
useEffect(() => {
const interval = setInterval(() => {
setScrollIndex((prev) => (prev >= maxScroll ? 0 : prev + 1));
}, 2500);
return () => clearInterval(interval);
}, [maxScroll]);
const allRows = Array.from({ length: totalRows }, (_, rowIdx) =>
socialProviders.slice(rowIdx * perRow, rowIdx * perRow + perRow),
);
return (
<div ref={containerRef} className="flex gap-6 items-start">
<div className="shrink-0">
<span className="text-[24px] font-light text-foreground/80 dark:text-foreground/70 tabular-nums leading-none">
35+
</span>
<p className="text-[14px] text-foreground/55 dark:text-foreground/45 mt-1">
social providers
</p>
</div>
<div
className="relative flex-1 overflow-hidden border border-dashed border-foreground/10"
style={{ height: `${visibleRows * rowHeight}px` }}
>
<motion.div
animate={{ y: -(scrollIndex * rowHeight) }}
transition={{ duration: 0.6, ease: "easeInOut" }}
>
{allRows.map((row, rowIdx) => (
<div
key={rowIdx}
className="flex"
style={{ height: `${rowHeight}px` }}
>
{row.map((provider) => {
const Icon = providerIcons[provider];
return (
<span
key={provider}
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[11px] font-mono text-foreground/65 dark:text-foreground/50 border-r border-b border-dashed border-foreground/[0.06] cursor-default"
>
{Icon && (
<span className="text-foreground/50 dark:text-foreground/35 shrink-0">
{Icon()}
</span>
)}
{provider}
</span>
);
})}
</div>
))}
</motion.div>
<div className="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-background to-transparent pointer-events-none" />
</div>
</div>
);
}
export function PluginEcosystem() {
const half = Math.ceil(plugins.length / 2);
const row1 = plugins.slice(0, half);
const row2 = plugins.slice(half);
return (
<div>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<span className="text-base text-foreground/85 dark:text-foreground/75">
Plugin Ecosystem
</span>
<span className="text-[11px] font-mono text-foreground/50">
{plugins.length} official
</span>
</div>
<Link
href="/docs/plugins"
className="text-[10px] font-mono text-foreground/35 dark:text-foreground/50 hover:text-foreground/55 transition-colors uppercase tracking-wider"
>
browse all &rarr;
</Link>
</div>
<div className="relative overflow-hidden">
{/* Row 1 — scrolls left */}
<div className="flex animate-[marquee_40s_linear_infinite] mb-1.5">
{[...row1, ...row1].map((plugin, i) => (
<span
key={`${plugin.name}-${i}`}
className="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 mr-1.5 text-[11px] text-foreground dark:text-foreground/90 border border-foreground/[0.06] rounded-sm cursor-default whitespace-nowrap"
>
{plugin.name}
<span className="text-[7px] font-mono uppercase tracking-wider text-foreground/50 ">
{categoryLabels[plugin.category]}
</span>
</span>
))}
</div>
{/* Row 2 — scrolls right */}
<div className="flex animate-[marquee-reverse_45s_linear_infinite]">
{[...row2, ...row2].map((plugin, i) => (
<span
key={`${plugin.name}-${i}`}
className="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 mr-1.5 text-[11px] text-foreground dark:text-foreground/90 border border-foreground/[0.06] rounded-sm cursor-default whitespace-nowrap"
>
{plugin.name}
<span className="text-[7px] font-mono uppercase tracking-wider text-foreground/50 ">
{categoryLabels[plugin.category]}
</span>
</span>
))}
</div>
{/* Side fades */}
<div className="absolute inset-y-0 left-0 w-12 bg-gradient-to-r from-background to-transparent pointer-events-none" />
<div className="absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-background to-transparent pointer-events-none" />
</div>
</div>
);
}
const mcpClients = [
{ name: "Cursor", cmd: "npx @better-auth/cli mcp --cursor" },
{ name: "Claude Code", cmd: "claude mcp add better-auth" },
{ name: "Open Code", cmd: "npx @better-auth/cli mcp --open-code" },
];
export function AiNativeSection() {
const steps = [
{ label: "mcp", text: "Connected to better-auth docs" },
{ label: "skill", text: "better-auth/add-provider → google" },
{ label: "skill", text: "better-auth/add-plugin → two-factor" },
{ label: "write", text: "lib/auth.ts", lines: 14 },
{ label: "done", text: "Google OAuth + 2FA configured" },
];
return (
<div className="mt-8">
<div className="flex items-center gap-3 mb-3">
<div className="flex-1 border-t border-foreground/10" />
<span className="text-[10px] text-foreground/50 dark:text-foreground/50 font-mono tracking-wider uppercase shrink-0">
AI Native
</span>
</div>
<p className="text-[14px] text-foreground/80 dark:text-foreground/70 leading-[1.9] mb-5">
Your auth lives in{" "}
<span className="text-foreground/90 dark:text-foreground/80">
your codebase
</span>{" "}
&mdash; so AI can configure it. Ships with{" "}
<span className="inline-flex items-center gap-1 text-foreground/90 dark:text-foreground/80">
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-75"
>
<path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
<path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
<path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
<path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
<path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
<path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
<path d="M19.938 10.5a4 4 0 0 1 .585.396" />
<path d="M6 18a4 4 0 0 1-1.967-.516" />
<path d="M19.967 17.484A4 4 0 0 1 18 18" />
</svg>
MCP server
</span>
,{" "}
<span className="inline-flex items-center gap-1 text-foreground/90 dark:text-foreground/80">
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-75"
>
<polyline points="4 17 10 11 4 5" />
<line x1="12" x2="20" y1="19" y2="19" />
</svg>
Claude Code skills
</span>
, and{" "}
<span className="inline-flex items-center gap-1 text-foreground/90 dark:text-foreground/80">
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-75"
>
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
<polyline points="14 2 14 8 20 8" />
</svg>
Cursor rules
</span>
.
</p>
<div className="border border-dashed border-foreground/[0.08] overflow-hidden">
{/* Prompt line */}
<div className="flex items-center gap-2 px-3 py-2 border-b border-foreground/[0.06] bg-foreground/[0.015]">
<span className="text-foreground/50 font-mono text-xs select-none">
&rsaquo;
</span>
<span className="text-[11px] font-mono text-foreground/80 dark:text-foreground/70">
Add Google login and 2FA to my app
</span>
</div>
{/* Steps */}
<div className="divide-y divide-foreground/[0.04]">
{steps.map((step) => (
<div
key={step.text}
className="flex items-center gap-2.5 px-3 py-1.5"
>
<span className="text-[8px] font-mono uppercase tracking-wider text-foreground/60 dark:text-foreground/50 w-8 shrink-0">
{step.label}
</span>
<span className="text-[10px] font-mono text-foreground/75 dark:text-foreground/65 truncate">
{step.text}
</span>
{"lines" in step && typeof step.lines === "number" && (
<span className="text-[9px] font-mono text-emerald-600/80 dark:text-emerald-400/70 ml-auto shrink-0">
+{step.lines}
</span>
)}
{step.label === "done" && (
<svg
width="10"
height="10"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
className="text-foreground/60 ml-auto shrink-0"
>
<polyline points="20 6 9 17 4 12" />
</svg>
)}
</div>
))}
</div>
{/* MCP clients */}
<div className="border-t border-foreground/[0.06] bg-foreground/[0.015]">
<div className="flex divide-x divide-foreground/[0.06]">
{mcpClients.map((mc) => (
<div key={mc.name} className="flex-1 px-3 py-2">
<p className="text-[8px] font-mono uppercase tracking-wider text-foreground/55 dark:text-foreground/45 mb-0.5">
{mc.name}
</p>
<code className="text-[9px] font-mono text-foreground/70 dark:text-foreground/55 truncate block">
{mc.cmd}
</code>
</div>
))}
</div>
</div>
</div>
</div>
);
}
Reference in New Issue View Git Blame Copy Permalink