From umbraco-cms-backoffice-skills
Implements Umbraco backoffice authentication providers for OAuth/SSO logins like Google, GitHub. Generates TypeScript/JSON manifests, custom UI elements, and guides C# backend config using official docs.
npx claudepluginhub umbraco/umbraco-cms-backoffice-skills --plugin umbraco-cms-backoffice-skillsThis skill uses the workspace's default tool permissions.
---
Implements MFA login providers for Umbraco backoffice 2FA UI using TypeScript manifests and Lit elements for providers like Google Authenticator. Backend C# setup separate.
Generates complete, testable example extensions for Umbraco backoffice using TypeScript and LitElement, runs them via Vite dev server with hot reload and mocked APIs.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
An Auth Provider enables external login (OAuth/SSO) for the Umbraco backoffice. It provides the UI component (login button) that connects to a backend authentication provider. The backend must be configured separately in C# - this extension type handles the frontend presentation and behavior. Common providers include Google, Microsoft, GitHub, and custom OAuth providers.
Always fetch the latest docs before implementing:
{
"name": "My Auth Provider",
"extensions": [
{
"type": "authProvider",
"alias": "My.AuthProvider.GitHub",
"name": "GitHub Login",
"forProviderName": "Umbraco.GitHub",
"meta": {
"label": "Login with GitHub",
"defaultView": {
"icon": "icon-github",
"color": "default",
"look": "secondary"
}
}
}
]
}
import type { ManifestAuthProvider } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestAuthProvider = {
type: 'authProvider',
alias: 'My.AuthProvider.Google',
name: 'Google Login',
forProviderName: 'Umbraco.Google', // Must match backend provider name
meta: {
label: 'Sign in with Google',
defaultView: {
icon: 'icon-google',
color: 'default',
look: 'outline',
},
behavior: {
autoRedirect: false,
popupTarget: 'umbracoAuthPopup',
popupFeatures: 'width=600,height=600,menubar=no,location=no',
},
linking: {
allowManualLinking: true,
},
},
};
export const manifests = [manifest];
import type { ManifestAuthProvider } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestAuthProvider = {
type: 'authProvider',
alias: 'My.AuthProvider.Custom',
name: 'Custom SSO Login',
forProviderName: 'Umbraco.CustomSSO',
element: () => import('./custom-auth-button.element.js'),
meta: {
label: 'Enterprise SSO',
},
};
import { html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('my-custom-auth-button')
export class MyCustomAuthButtonElement extends UmbLitElement {
@property({ type: String })
providerName = '';
@property({ type: String })
displayName = '';
#handleClick() {
// Dispatch event to trigger auth flow
this.dispatchEvent(
new CustomEvent('auth-request', {
bubbles: true,
composed: true,
detail: { providerName: this.providerName },
})
);
}
render() {
return html`
<button @click=${this.#handleClick}>
<img src="/App_Plugins/MyAuth/logo.svg" alt="" />
<span>${this.displayName}</span>
</button>
`;
}
static styles = css`
button {
display: flex;
align-items: center;
gap: var(--uui-size-space-3);
width: 100%;
padding: var(--uui-size-space-4);
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-border-radius);
background: var(--uui-color-surface);
cursor: pointer;
}
button:hover {
background: var(--uui-color-surface-alt);
}
img {
width: 24px;
height: 24px;
}
`;
}
export default MyCustomAuthButtonElement;
const manifest: ManifestAuthProvider = {
type: 'authProvider',
alias: 'My.AuthProvider.EnterpriseSSO',
name: 'Enterprise SSO',
forProviderName: 'Umbraco.EnterpriseSSO',
meta: {
label: 'Enterprise Login',
behavior: {
autoRedirect: true, // Automatically redirects to provider
},
},
};
// Composer to register the provider
public class GitHubAuthenticationComposer : IComposer
{
public void Compose(IUmbracoBuilder builder)
{
builder.AddBackOfficeExternalLogins(logins =>
{
logins.AddBackOfficeLogin(
backOfficeAuthenticationBuilder =>
{
backOfficeAuthenticationBuilder.AddGitHub(
backOfficeAuthenticationBuilder.SchemeForBackOffice("Umbraco.GitHub")!,
options =>
{
options.ClientId = "your-client-id";
options.ClientSecret = "your-client-secret";
options.CallbackPath = "/umbraco-github-signin";
});
},
options =>
{
options.AutoLinkOptions = new ExternalSignInAutoLinkOptions(
autoLinkExternalAccount: true,
defaultUserGroups: new[] { "admin" }
);
});
});
}
}
| Property | Description |
|---|---|
label | Button text |
defaultView.icon | Button icon |
defaultView.color | Button color (default, positive, warning, danger) |
defaultView.look | Button style (default, primary, secondary, outline) |
behavior.autoRedirect | Auto-redirect to provider on login page |
behavior.popupTarget | Window name for popup |
behavior.popupFeatures | Popup window features |
linking.allowManualLinking | Allow linking to existing accounts |
icon-google - Googleicon-microsoft - Microsofticon-github - GitHubicon-facebook - Facebookicon-twitter / icon-x - Twitter/Xicon-cloud - Generic OAuthThat's it! Always fetch fresh docs, keep examples minimal, generate complete working code.