Blazor For Kids

Authentication in BlazorForKids

Authentication is an essential part of any modern web application — it helps you control who can access what. BlazorForKids provides built-in support for adding authentication with minimal setup, while also giving you full control if you prefer to bring your own solution.

Getting Started: Configuring Authentication

Authentication is configured in Program.cs through the AddBlazorForKids method. When calling it, you can choose how the authentication should be handled using the options.AuthenticationType setting.

            builder.AddBlazorForKids<ApplicationDbContext>(options =>
            {
                options.UseDefaultCachePipeline = true;
                options.UseDefaultRolesEnforcementPipeline = true;

                // Set the type of authentication your app will use
                options.AuthenticationType = BkAuthenticationType.BasicAuthentication;

                // Allow or hide user registration page
                options.HideUserRegistrationPage = false;

                // Configure default identity options (e.g., password rules)
                options.IdentityOptions = o =>
                {
                    o.SignIn.RequireConfirmedAccount = false;
                    o.Password.RequireDigit = true;
                    o.Password.RequireLowercase = true;
                    o.Password.RequireUppercase = true;
                    o.Password.RequiredLength = 8;
                    o.Password.RequireNonAlphanumeric = true;
                };
            });
    

Authentication Modes

You can choose from several authentication modes using the BkAuthenticationType enum:

Option	Description
None	No authentication is included. You must implement your own logic.
BasicAuthentication	Provides default login, registration, and password reset using username/password.
ExternalProvidersOnly	Only external providers like GitHub, Google, Facebook, etc., are used for login.
BasicAndExternalProviders	Combines basic authentication with external providers (recommended).

Default Authentication Pages

When you enable authentication (Basic or External), BlazorForKids automatically includes the pages you need:

• 🔐 Login
• 📝 Register
• 📧 Forgot Password
• 🔁 Reset Password
• 👤 User Info
• ⚙️ Admin Panel (for managing users and roles)

These pages are available out-of-the-box, and you just need to add them to your layout or menu.

Adding Authentication Pages to the Menu

To make the login/register/logout pages available in the UI, simply add them to your layout menu:

                menu.AddMenuItem<LoginPage>(options =>
                {
                    options.Icon(AppIcons.SignInAlt);
                    options.Text("Login");
                    options.HiddenToAuthenticatedUsers(); // Only show if not logged in
                });

                menu.AddDropDownMenuItem(options =>
                {
                    options.Icon(AppIcons.CircleUser);
                    options.Text(CurrentUser.DisplayName ?? "Current User");
                    options.Description("Manage your account");
                    options.VisibleToAuthenticatedUsers(); // Only show if logged in

                    options.AddMenuItems(subMenu =>
                    {
                        subMenu.AddMenuItem<UserInfoPage>();
                        subMenu.AddMenuItem<AdminPage>(o =>
                        {
                            o.VisibleToRoles("admin");
                        });
                        subMenu.AddMenuItem<LogoutPage>(o =>
                        {
                            o.Icon(AppIcons.SignOut);
                            o.Text("Logout");
                        });
                    });
                });
    

✅ The CurrentUser property is available in all layouts, pages, and components (via BkComponentBase) and gives access to the current user's info and roles.

External Login Providers (e.g., GitHub)

If you're using external authentication (or combined with basic), you can register providers like GitHub, Google, or others:

            options.ExternalLoginProviders = (configuration, providers) =>
            {
                providers.AddGitHub("GitHub", "GitHub", o =>
                {
                    o.ClientId = configuration["GitHub:ClientId"]
                        ?? throw new Exception("GitHub:ClientId is missing");
                    o.ClientSecret = configuration["GitHub:ClientSecret"]
                        ?? throw new Exception("GitHub:ClientSecret is missing");
                    o.CallbackPath = new PathString("/signin-github");

                    o.ButtonIcon = """<svg>...</svg>"""; // Optional SVG icon
                });
            };
    

📌 Credentials are pulled from your appsettings.json or environment variables. Be sure to register your app with GitHub (or any provider you use).

Admin Panel for User Management

BlazorForKids also includes an Admin Panel to help you manage users and roles. Admins can:

• 🔄 Reset a user’s password via email
• 🔑 Add or remove user roles
• 👥 View all registered users

To include the Admin Panel in a menu:

             menu.AddMenuItem<AdminPage>();
    

You decide where and when to show it — typically inside a dropdown for authenticated admins only.

🔒 Notes and Tips for Beginners

• 🔐 Want to secure your app? Choose one of the authentication types — it's plug-and-play.
• 🧪 Testing authentication? Use HideUserRegistrationPage = false to allow sign-up during development.
• 🎯 Don't need login? Just set AuthenticationType = BkAuthenticationType.None.
• ⚠️ Production tip: Set RequireConfirmedAccount = true for better security.
• 🧑‍💻 Need full control? You can build your own identity or token-based authentication pipeline and skip the built-in pages.

Summary

Authentication in BlazorForKids is flexible and easy to use — you can enable it with one line, customize it through options, and enhance it with external providers. Whether you're building a personal project or a secure enterprise app, the framework helps you get started quickly without locking you in.

🔐 Choose your method, set your rules, and let BlazorForKids handle the rest.