BETTER-AUTH. UI
Components

<OrganizationInvitationEmail />

Email template component that invites a user to join an organization.

Usage

import { OrganizationInvitationEmail } from "@better-auth-ui/solid/email"
import { render } from "@solidjs-email/main"

const html = await render(() =>
  OrganizationInvitationEmail({
    url: "https://better-auth-ui.com/auth/accept-invitation?invitationId=example",
    email: "invitee@example.com",
    inviterName: "Jane Doe",
    inviterEmail: "jane@example.com",
    organizationName: "Acme Inc.",
    role: "member",
    appName: "Better Auth UI",
    logoURL: {
      light: "/favicon-96x96.png",
      dark: "/favicon-96x96-inverted.png"
    },
    expirationHours: 48,
    darkMode: true,
    poweredBy: true
  })
)

Installation

npx shadcn@latest add https://better-auth-ui.com/r/solid/organization-invitation-email.json

Better Auth setup

Wire the email into the Better Auth organization plugin via sendInvitationEmail. Point url at the direct invitation view registered by organizationPlugin().

auth.ts
import { OrganizationInvitationEmail } from "@better-auth-ui/solid/email"
import { render } from "@solidjs-email/main"
import { betterAuth } from "better-auth"
import { organization } from "better-auth/plugins"

const baseUrl = process.env.BETTER_AUTH_URL!

export const auth = betterAuth({
  plugins: [
    organization({
      async sendInvitationEmail(data) {
        const html = await render(() =>
          OrganizationInvitationEmail({
            url: `${baseUrl}/auth/accept-invitation?invitationId=${data.id}`,
            email: data.email,
            inviterName: data.inviter.user.name,
            inviterEmail: data.inviter.user.email,
            organizationName: data.organization.name,
            organizationLogoURL: data.organization.logo ?? undefined,
            role: data.role,
            appName: "My App",
            poweredBy: true
          })
        )

        await sendEmail({
          to: data.email,
          subject: `You're invited to ${data.organization.name}`,
          html
        })
      }
    })
  ]
})

Add organizationPlugin().viewPaths.auth.acceptInvitation to your auth route allow-list. Use {baseUrl}/settings/organizations only when you want the invitation email to open the full pending-invitations list instead.

Props

Prop

Type

Features

  • Inviter name and email display
  • Organization name and optional organization logo
  • Role being offered (e.g. member, admin, owner)
  • Accept invitation button linking to the direct invitation view
  • Fallback URL for manual copy/paste
  • Optional expiration time
  • Security notice for unexpected invitations
  • Customizable branding and styling
  • Support for light/dark mode themes
  • Localization support

Last updated on

On this page