Skip to main content
umbraco-auth-provider Implement authentication providers for Umbraco backoffice using official docs
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-auth-providerEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas
SOC
Basado en la clasificación ocupacional SOC
name umbraco-auth-provider description Implement authentication providers for Umbraco backoffice using official docs version 1.0.0 location managed allowed-tools Read, Write, Edit, WebFetch
Umbraco Auth Provider
What is it?
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.
Documentation
Always fetch the latest docs before implementing:
Workflow
Fetch docs - Use WebFetch on the URLs aboveAsk questions - Which OAuth provider? Custom UI needed? Auto-redirect?Configure backend - Set up C# authentication provider firstGenerate frontend files - Create manifest + optional custom elementExplain - Show what was created and how to test
Minimal Examples
Manifest with Default Button (umbraco-package.json) {
"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"
}
}
}
]
}
Manifest (TypeScript) import type { ManifestAuthProvider } from '@umbraco-cms/backoffice/extension-registry' ;
const manifest : ManifestAuthProvider = {
type : 'authProvider' ,
alias : 'My.AuthProvider.Google' ,
name : 'Google Login' ,
forProviderName : 'Umbraco.Google' ,
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];
Custom Login Button Element 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' ,
},
};
Custom Button Element (custom-auth-button.element.ts) 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 (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 ;
Auto-Redirect Provider (Single Sign-On) const manifest : ManifestAuthProvider = {
type : 'authProvider' ,
alias : 'My.AuthProvider.EnterpriseSSO' ,
name : 'Enterprise SSO' ,
forProviderName : 'Umbraco.EnterpriseSSO' ,
meta : {
label : 'Enterprise Login' ,
behavior : {
autoRedirect : true ,
},
},
};
Backend C# Configuration (for reference)
public class GitHubAuthenticationComposer : IComposer
{
public void Compose (IUmbracoBuilder builder )"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" }
);
});
});
}
}
Meta Properties Property Description labelButton text defaultView.iconButton icon defaultView.colorButton color (default, positive, warning, danger) defaultView.lookButton style (default, primary, secondary, outline) behavior.autoRedirectAuto-redirect to provider on login page behavior.popupTargetWindow name for popup behavior.popupFeaturesPopup window features linking.allowManualLinkingAllow linking to existing accounts
Common Icons
icon-google - Googleicon-microsoft - Microsofticon-github - GitHubicon-facebook - Facebookicon-twitter / icon-x - Twitter/Xicon-cloud - Generic OAuth That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
