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.jsonBetter Auth setup
Wire the email into the Better Auth organization plugin via sendInvitationEmail. Point url at the direct invitation view registered by organizationPlugin().
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