Member login and protected pages in Umbraco

Members vs users

• Users log in to the backoffice to edit the site.
• Members log in to the website, for example to see a customer area, download files or read member-only articles.

Members are managed in the Members section.

Step 1: Create a member group and a member

1. Go to Members › Member Groups and create a group called Customers.
2. Go to Members › Members › +, and create a member with a name, email and password.
3. On the member's page, add them to the Customers group, then Save.

Step 2: Create the pages

Create three pages under your home page:

• Login, the page that shows the login form.
• Customer area, the protected page.
• No access, shown to signed-in members who aren't in the right group.

Step 3: Protect the customer area

1. Open the actions menu (…) on Customer area and choose Public Access….
2. Choose Group based protection and select Customers.
3. Set Login page to your Login page, and Error page to No access.
4. Save. Child pages are protected too.

Visitors who aren't signed in are now sent to the login page, which adds ?ReturnUrl= so they come back afterwards.

Step 4: The login form

Umbraco includes UmbLoginController and UmbLoginStatusController, so you only need the form:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Web.Website.Controllers
@using Umbraco.Cms.Web.Common.Models
@using Umbraco.Cms.Core.Security
@inject IMemberManager MemberManager
@{
    var currentMember = await MemberManager.GetCurrentMemberAsync();
}
@if (currentMember is not null)
{
    <p>Signed in as @currentMember.Name</p>
    using (Html.BeginUmbracoForm<UmbLoginStatusController>("HandleLogout", new { RedirectUrl = "/" }))
    {
        <button type="submit">Sign out</button>
    }
}
else
{
    using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin", new { RedirectUrl = Context.Request.Query["ReturnUrl"].ToString() }))
    {
        @Html.ValidationSummary("loginModel", true)
        <label for="username">Email</label>
        <input id="username" name="loginModel.Username" type="email" autocomplete="username" required>
        <label for="password">Password</label>
        <input id="password" name="loginModel.Password" type="password" autocomplete="current-password" required>
        <label><input type="checkbox" name="loginModel.RememberMe" value="true"> Remember me</label>
        <button type="submit">Sign in</button>
    }
}

Add @await Html.PartialAsync("MemberLogin") to your Login page's template.

Step 5: Show content to signed-in members only

@inject Umbraco.Cms.Core.Security.IMemberManager MemberManager
@if (await MemberManager.GetCurrentMemberAsync() is { } member)
{
    <p>Welcome back, @member.Name.</p>
}

Security tips

• Serve the whole site over HTTPS, or passwords travel in plain text.
• Configure lockout and password rules under Umbraco:CMS:Security:MemberPassword in appsettings.json.
• Protected media isn't private. Files in the Media section can still be downloaded by anyone who has the URL. Store truly private files outside wwwroot and serve them from a controller that checks the member.