npm package: @htmlbricks/hb-auth
Description: Full authentication UI driven by the `type` attribute: local login and registration (with optional “remember me”), email activation, password recovery and related notices, OTP and two-factor setup/verification. Supports OAuth2 social providers via embedde
Latest version: 0.71.18

## `hb-auth` — auth

**Category:** auth | **Tags:** auth

### What it does

Full authentication UI driven by the `type` attribute: local login and registration (with optional “remember me”), email activation, password recovery and related notices, OTP and two-factor setup/verification. Supports OAuth2 social providers via embedded social-login buttons, configurable backend URIs and HTTP options, optional i18n, and dispatches events for login, registration, recovery/activation, and OAuth flow steps.

### Custom element

`hb-auth`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `type` | union (optional) | `"login"` \| `"register"` \| `"activate"` \| `"recover"` \| `"forgotpassword"` \| `"mailrecoverinfo"` \| `"otp"` \| `"2fa_code"` \| `"2fa_config"` — which screen to show. |
| `email` | string (optional) | Pre-filled or context email. |
| `i18nlang` | string (optional) | Language key (e.g. `en`, `it`). |
| `sessionkey` | string (optional) | Session-related key for flows. |
| `social_auth_server_url` | string (optional) | Base URL for social auth server. |
| `redirectonlogin` | string (optional) | Redirect after login. |
| `redirectoncreate` | string (optional) | Redirect after registration. |
| `loginuri` | string (optional) | Backend login endpoint. |
| `registeruri` | string (optional) | Backend register endpoint. |
| `activateuri` | string (optional) | Activation endpoint. |
| `recoveruri` | string (optional) | Recovery endpoint. |
| `requestmethod` | string (optional) | HTTP method for API calls. |
| `appendqueryparams` | string (optional) | Extra query params (often JSON string in HTML). |
| `appendbodyparams` | string (optional) | Extra body params (often JSON string in HTML). |
| `logouri` | string (optional) | Logo image URL. |
| `oauth2providers` | array (optional) | JSON array of `{ name, url?, params? }` provider configs (see `hb-auth-social-login-button` provider shape). |
| `disableregister` | boolean (optional) | Hide or disable registration. |
| `enable_recover_password` | boolean (optional) | Enable recover-password UI. |
| `passwordpattern` | string (optional) | Password validation pattern. |
| `recoverycode` | string (optional) | Recovery/activation code. |
| `disablelocal` | boolean (optional) | OAuth-only mode when true. |

**Slots:** `header`. **i18n:** Italian and English declared in metadata.

### Events (`CustomEvent` names)

- **`login`** — `{ token?: string; email?: string; password?: string; rememberMe?: boolean }`
- **`register`** — Intersection of `any` with `{ requestSent: { email: string; password: string }; email: string; password: string }` (types).
- **`recoverOrActivate`** — `{ password: string; recoverycode: string; email: string }`
- **`recoverPassword`** — `{ email: string }`
- **`oauthFlowInit`** — `{ token?: string; provider: "facebook" \| "google" \| "gitlab" \| "github" \| "authentik"; tmpCode?: string; redirect_uri?: string }`
- **`oauthFlowSuccess`** — `{ token: string }`
- **`oauthFlowCustom`** — `{ provider: ... }` (same provider union as above)

### Usage notes

- Built with Bulma 1 (Sass) inside the shadow root; theme variables apply on `:host`.
- Uses bootstrap-icons where the UI shows icons.
- Shadow DOM: slot `header` for custom branding; social buttons are composed internally.
- Set `i18nlang` for Italian or English strings where supported.

### Minimal HTML example

```html
<hb-auth
  type="login"
  i18nlang="en"
  logouri="https://example.com/logo.svg"
  loginuri="https://api.example.com/auth/login"
></hb-auth>
```