diff --git a/dev/next-app/src/lib/auth-client.ts b/dev/next-app/src/lib/auth-client.ts index 842daa74..533a0162 100644 --- a/dev/next-app/src/lib/auth-client.ts +++ b/dev/next-app/src/lib/auth-client.ts @@ -14,11 +14,6 @@ export const authClient = createAuthClient({ ], }); -export const { - useSession, - useActiveOrganization, - useInvitation, - useListOrganization, -} = authClient; - authClient.signInPasskey(); + +const res = authClient.useActiveOrganization(); diff --git a/dev/next-app/src/lib/permissions.ts b/dev/next-app/src/lib/permissions.ts new file mode 100644 index 00000000..ea3fcaa4 --- /dev/null +++ b/dev/next-app/src/lib/permissions.ts @@ -0,0 +1,29 @@ +import { organization } from "better-auth/plugins"; +import { createAccessControl, AccessControl } from "better-auth/plugins/access"; + +const statement = { + project: ["create"], +}; + +const ac = createAccessControl(statement); + +const member = ac.newRole({ + project: ["create"], +}); + +const owner = ac.newRole({ + project: ["create", "share", "delete"], +}); + +const admin = ac.newRole({ + project: ["create", "share", "delete"], +}); + +organization({ + ac, + roles: { + member, + owner, + admin, + }, +}); diff --git a/dev/nuxtjs/utils/client.ts b/dev/nuxtjs/utils/client.ts index d914f0ee..60a1714e 100644 --- a/dev/nuxtjs/utils/client.ts +++ b/dev/nuxtjs/utils/client.ts @@ -1,3 +1,5 @@ import { createAuthClient } from "better-auth/vue"; - -export const client = createAuthClient(); +import { organizationClient } from "better-auth/client"; +export const client = createAuthClient({ + authPlugins: [organizationClient()], +}); diff --git a/dev/svelte/src/lib/auth.ts b/dev/svelte/src/lib/auth.ts index 1bb842ae..53c5b057 100644 --- a/dev/svelte/src/lib/auth.ts +++ b/dev/svelte/src/lib/auth.ts @@ -1,5 +1,6 @@ import { env } from "$env/dynamic/private"; import { betterAuth } from "better-auth"; +import { organization } from "better-auth/plugins"; import { github } from "better-auth/social-providers"; export const auth = betterAuth({ @@ -13,4 +14,9 @@ export const auth = betterAuth({ clientSecret: env.GITHUB_CLIENT_SECRET, }), ], + plugins: [ + organization({ + async sendInvitationEmail(invitation, email) {}, + }), + ], }); diff --git a/dev/svelte/src/lib/client.ts b/dev/svelte/src/lib/client.ts index c94ea551..8e954d14 100644 --- a/dev/svelte/src/lib/client.ts +++ b/dev/svelte/src/lib/client.ts @@ -1,7 +1,7 @@ import { createAuthClient } from "better-auth/svelte"; -import { organization } from "better-auth/client"; +import { organizationClient } from "better-auth/client"; export const client = createAuthClient({ baseURL: "http://localhost:3000/api/auth", - authPlugins: [organization], + authPlugins: [organizationClient()], }); diff --git a/docs/app/global.css b/docs/app/global.css index 02081817..053db1b0 100644 --- a/docs/app/global.css +++ b/docs/app/global.css @@ -4,51 +4,58 @@ @layer base { :root { - --background: 360 74% 95%; - --foreground: 360 5% 0%; - --card: 360 50% 90%; - --card-foreground: 360 5% 10%; - --popover: 360 74% 95%; - --popover-foreground: 360 95% 0%; - --primary: 360 0% 90%; - --primary-foreground: 0 0% 0%; - --secondary: 360 30% 70%; - --secondary-foreground: 0 0% 0%; - --muted: 322 30% 85%; - --muted-foreground: 360 5% 35%; - --accent: 322 30% 80%; - --accent-foreground: 360 5% 10%; - --destructive: 0 74% 30%; - --destructive-foreground: 360 5% 90%; - --border: 360 30% 50%; - --input: 360 30% 18%; - --ring: 360 0% 90%; + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 4.9% 83.9%; --radius: 0.5rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67% } .dark { --background: 360 50% 5%; - --foreground: 360 5% 90%; - --card: 360 50% 0%; - --card-foreground: 360 5% 90%; - --popover: 360 50% 5%; - --popover-foreground: 360 5% 90%; - --primary: 360 0% 90%; - --primary-foreground: 0 0% 0%; - --secondary: 360 30% 10%; - --secondary-foreground: 0 0% 100%; - --muted: 322 30% 15%; - --muted-foreground: 360 5% 60%; - --accent: 322 30% 15%; - --accent-foreground: 360 5% 90%; - --destructive: 0 74% 30%; - --destructive-foreground: 360 5% 90%; - --border: 360 30% 18%; - --input: 360 30% 18%; - --ring: 360 0% 90%; - --radius: 0.5rem; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; } - - } diff --git a/docs/components/icons.tsx b/docs/components/icons.tsx new file mode 100644 index 00000000..a7d03dfd --- /dev/null +++ b/docs/components/icons.tsx @@ -0,0 +1,22 @@ + + +export const Icons = { + nextJS: () => ( + + ), + nuxt: () => ( + + ), + svelteKit: () => ( + + ), + solidStart: () => ( + + ), + react: () => ( + + ), + hono: () => ( + + ) +} \ No newline at end of file diff --git a/docs/components/landing/hero.tsx b/docs/components/landing/hero.tsx index 5a65c05c..ce72e640 100644 --- a/docs/components/landing/hero.tsx +++ b/docs/components/landing/hero.tsx @@ -2,12 +2,13 @@ import { GridPattern } from "./grid-pattern"; import { Button } from "@/components/ui/button"; import clsx from "clsx"; -import { Github } from "lucide-react"; +import { Github, Icon } from "lucide-react"; import { useTheme } from "next-themes"; import Link from "next/link"; import { Highlight, themes } from "prism-react-renderer"; -import { Fragment, useId, useState } from "react"; +import { Fragment, useEffect, useId, useState } from "react"; import { LayoutGroup, motion } from "framer-motion" +import { Icons } from "../icons"; function Glow() { @@ -51,7 +52,7 @@ function Glow() { const tabs = [ { - name: "server.ts", code: `export const auth = betterAuth({ + name: "auth.ts", code: `export const auth = betterAuth({ database: { provider: "postgresql", url: process.env.DATABASE_URL, @@ -85,8 +86,10 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) { export default function Hero() { const theme = useTheme(); - const [activeTab, setActiveTab] = useState("server.ts"); + const [activeTab, setActiveTab] = useState("auth.ts"); const code = tabs.find((tab) => tab.name === activeTab)?.code ?? ""; + + return (
@@ -122,16 +125,10 @@ export default function Hero() {
*/} + + className="relative rounded-sm bg-gradient-to-tr from-stone-100 to-stone-200 dark:from-stone-950/70 dark:to-stone-900/90 ring-1 ring-white/10 backdrop-blur-lg">
@@ -185,6 +182,7 @@ export default function Hero() { ))}
{({ @@ -212,7 +211,6 @@ export default function Hero() { {tokens.map((line, lineIndex) => (
@@ -231,6 +229,7 @@ export default function Hero() {
+
@@ -238,7 +237,7 @@ export default function Hero() {
@@ -248,7 +247,6 @@ export default function Hero() { export function HeroBackground(props: React.ComponentPropsWithoutRef<"svg">) { const id = useId(); - return (
{ +
{ setOpenSearch(true) }}> @@ -83,445 +79,5 @@ export default function ArticleLayout() { ); } -interface Content { - title: string; - href?: string; - Icon: ((props?: SVGProps) => ReactNode) | LucideIcon; - list: { - title: string; - href: string; - icon: ((props?: SVGProps) => ReactNode) | LucideIcon; - group?: boolean; - }[]; -} -const contents: Content[] = [ - { - title: "Get Started", - Icon: () => ( - - - - ), - list: [ - { - title: "Introduction", - href: "/docs/introduction", - icon: () => ( - - - - ), - }, - { - title: "Installation", - href: "/docs/installation", - icon: () => ( - - - - ), - }, - { - title: "Basic Usage", - href: "/docs/basic-usage", - icon: () => ( - - ), - }, - ], - }, - { - title: "Authentication", - Icon: () => ( - - - - ), - list: [ - { - title: "Email & Password", - group: true, - href: "/docs/email-password", - icon: () => ( - - - - ) - }, - - { - title: "Sign-In & Sign-Up", - href: "/docs/email-password/sign-in-and-sign-up", - icon: () => ( - - - - ) - }, - { - title: "Password Reset", - href: "/docs/email-password/password-reset", - icon: () => ( - - ) - }, - { - title: "Configuration", - href: "/docs/email-password/configuration", - icon: () => ( - - - ) - }, - { - title: "Social Sign-On", - group: true, - href: "/docs/providers/social-providers", - icon: () => ( - - - - ) - }, - { - title: "Apple", - href: "/docs/providers/apple", - icon: () => ( - - - - ), - }, - - { - title: "Discord", - href: "/docs/providers/discord", - icon: () => ( - - - - ), - }, - { - title: "Facebook", - href: "/docs/providers/facebook", - icon: () => ( - - ), - }, - { - title: "Github", - href: "/docs/providers/github", - icon: () => ( - - - - ), - }, - { - title: "Google", - href: "/docs/providers/google", - icon: () => ( - - - - ), - }, - { - title: "Twitch", - href: "/docs/providers/twitch", - icon: () => ( - - ) - }, - { - title: "X (Twitter)", - href: "/docs/providers/twitter", - icon: () => ( - - ) - } - ], - }, - { - title: "Integrations", - Icon: () => ( - - ), - list: [ - { - group: true, - title: "Frameworks", - href: "/docs/integrations", - icon: LucideAArrowDown - }, - { - title: "Hono", - icon: () => ( - - ), - href: "/docs/integrations/hono", - }, - { - title: "Next", - icon: () => ( - - ), - href: "/docs/integrations/next", - }, - { - title: "Nuxt", - icon: () => ( - - ), - href: "/docs/integrations/nuxt", - }, - { - title: "Svelte Kit", - icon: () => ( - - ), - href: "/docs/integrations/svelte-kit", - }, - { - title: "Solid Start", - icon: () => ( - - ), - href: "/docs/integrations/solid-start", - }, - { - title: "React", - icon: () => ( - - ), - href: "/docs/integrations/react", - }, - ] - }, - { - title: "Plugins", - Icon: () => ( - - - - - - - ), - list: [ - { - title: "Introduction", - icon: () => ( - - ), - href: "/docs/plugins/introduction", - }, - { - title: "Authentication", - group: true, - href: "/docs/plugins/1st-party-plugins", - icon: LucideAArrowDown - }, - { - title: "Passkey", - href: "/docs/plugins/passkey", - icon: () => ( - - ), - }, - { - title: "Two Factor", - icon: ScanFace, - href: "/docs/plugins/2fa", - }, - { - title: "Username", - icon: UserSquare2, - href: "/docs/plugins/username", - }, - { - title: "Authorization", - group: true, - href: "/docs/plugins/1st-party-plugins", - icon: LucideAArrowDown - }, - { - title: "Organization", - icon: Users2, - href: "/docs/plugins/organization", - }, - { - title: "Utility", - group: true, - href: "/docs/plugins/1st-party-plugins", - icon: LucideAArrowDown - }, - { - title: "Bearer", - icon: Key, - href: "/docs/plugins/email-verifier", - }, - { - title: "Email Checker", - icon: MailCheck, - href: "/docs/plugins/email-verifier", - }, - - ], - }, - - // { - // title: "Database", - // Icon: () => ( - // - // - // - // - // - // ), - // list: [ - // { - // title: "Drizzle", - // href: "/docs/adapters/drizzle", - // icon: () => ( - // - // - // - // ), - // }, - // { - // title: "Prisma", - // href: "/docs/adapters/prisma", - // icon: () => ( - // - // - // - // ), - // }, - // ], - // }, -]; diff --git a/docs/components/sidebar-content.tsx b/docs/components/sidebar-content.tsx new file mode 100644 index 00000000..955ad58d --- /dev/null +++ b/docs/components/sidebar-content.tsx @@ -0,0 +1,374 @@ +import { Key, LucideAArrowDown, LucideIcon, MailCheck, ScanFace, Users2, UserSquare2 } from "lucide-react"; +import { ReactNode, SVGProps } from "react"; +import { Icons } from "./icons"; + +interface Content { + title: string; + href?: string; + Icon: ((props?: SVGProps) => ReactNode) | LucideIcon; + list: { + title: string; + href: string; + icon: ((props?: SVGProps) => ReactNode) | LucideIcon; + group?: boolean; + }[]; +} + + +export const contents: Content[] = [ + { + title: "Get Started", + Icon: () => ( + + + + ), + list: [ + { + title: "Introduction", + href: "/docs/introduction", + icon: () => ( + + + + ), + }, + { + title: "Installation", + href: "/docs/installation", + icon: () => ( + + + + ), + }, + { + title: "Basic Usage", + href: "/docs/basic-usage", + icon: () => ( + + ), + }, + + ], + }, + { + title: "Authentication", + Icon: () => ( + + + + ), + list: [ + { + title: "Email & Password", + group: true, + href: "/docs/email-password", + icon: () => ( + + + + ) + }, + + { + title: "Sign-In & Sign-Up", + href: "/docs/email-password/sign-in-and-sign-up", + icon: () => ( + + + + ) + }, + { + title: "Password Reset", + href: "/docs/email-password/password-reset", + icon: () => ( + + ) + }, + { + title: "Configuration", + href: "/docs/email-password/configuration", + icon: () => ( + + + ) + }, + { + title: "Social Sign-On", + group: true, + href: "/docs/providers/social-providers", + icon: () => ( + + + + ) + }, + { + title: "Apple", + href: "/docs/providers/apple", + icon: () => ( + + + + ), + }, + + { + title: "Discord", + href: "/docs/providers/discord", + icon: () => ( + + + + ), + }, + { + title: "Facebook", + href: "/docs/providers/facebook", + icon: () => ( + + ), + }, + { + title: "Github", + href: "/docs/providers/github", + icon: () => ( + + + + ), + }, + { + title: "Google", + href: "/docs/providers/google", + icon: () => ( + + + + ), + }, + { + title: "Twitch", + href: "/docs/providers/twitch", + icon: () => ( + + ) + }, + { + title: "X (Twitter)", + href: "/docs/providers/twitter", + icon: () => ( + + ) + } + ], + }, + { + title: "Integrations", + Icon: () => ( + + ), + list: [ + { + group: true, + title: "Frameworks", + href: "/docs/integrations", + icon: LucideAArrowDown + }, + { + title: "Hono", + icon: Icons.hono, + href: "/docs/integrations/hono", + }, + { + title: "Next", + icon: Icons.nextJS, + href: "/docs/integrations/next", + }, + { + title: "Nuxt", + icon: Icons.nuxt, + href: "/docs/integrations/nuxt", + }, + { + title: "Svelte Kit", + icon: Icons.svelteKit, + href: "/docs/integrations/svelte-kit", + }, + { + title: "Solid Start", + icon: Icons.solidStart, + href: "/docs/integrations/solid-start", + }, + { + title: "React", + icon: Icons.react, + href: "/docs/integrations/react", + }, + ] + }, + { + title: "Plugins", + Icon: () => ( + + + + + + + ), + list: [ + { + title: "Introduction", + icon: () => ( + + ), + href: "/docs/plugins/introduction", + }, + { + title: "Authentication", + group: true, + href: "/docs/plugins/1st-party-plugins", + icon: LucideAArrowDown + }, + { + title: "Passkey", + href: "/docs/plugins/passkey", + icon: () => ( + + ), + }, + { + title: "Two Factor", + icon: ScanFace, + href: "/docs/plugins/2fa", + }, + { + title: "Username", + icon: UserSquare2, + href: "/docs/plugins/username", + }, + { + title: "Authorization", + group: true, + href: "/docs/plugins/1st-party-plugins", + icon: LucideAArrowDown + }, + { + title: "Organization", + icon: Users2, + href: "/docs/plugins/organization", + }, + { + title: "Utility", + group: true, + href: "/docs/plugins/1st-party-plugins", + icon: LucideAArrowDown + }, + { + title: "Bearer", + icon: Key, + href: "/docs/plugins/email-verifier", + }, + { + title: "Email Checker", + icon: MailCheck, + href: "/docs/plugins/email-verifier", + }, + + ], + }, +]; \ No newline at end of file diff --git a/docs/components/theme-toggler.tsx b/docs/components/theme-toggler.tsx index 687ea666..2c7c779d 100644 --- a/docs/components/theme-toggler.tsx +++ b/docs/components/theme-toggler.tsx @@ -20,8 +20,7 @@ export function ThemeToggle() {