hb-auth-social-login-button — auth-social-login-button

Category: auth | Tags: auth, oauth

What it does

Clickable OAuth provider tile (default SVGs for Google, GitHub, GitLab, Facebook, Authentik; overridable via slot). Builds the provider authorization URL from provider params or uses a prebuilt url, then parses the return URL to exchange code/token with simple-serverless-auth-client when social_auth_server_url and auth_cookie_name are set. Emits oauthFlowInit, oauthFlowSuccess, or oauthFlowCustom for custom flows.

Custom element

hb-auth-social-login-button

Attributes / props (snake_case)

| Property | Type | Notes | | --- | --- | --- | | id | string (optional) | Element identifier. | | style | string (optional) | Inline style string. | | social_auth_server_url | string (optional) | Server URL for token exchange. | | auth_cookie_name | string (optional) | Cookie name used by the auth client. | | redirectonlogin | string (optional) | Post-login redirect. | | provider | object (optional) | JSON: { url?: string; name: "facebook" \| "google" \| "gitlab" \| "github" \| "authentik"; params?: { redirect_url; client_id; scope; auth_server_url? } }. |

Slots: header. i18n: Italian and English in metadata.

Events (CustomEvent names)

• oauthFlowSuccess — { token: string }
• oauthFlowInit — { token?: string; provider: IProvider; tmpCode?: string; redirect_uri?: string } (IProvider = facebook | google | gitlab | github | authentik)
• oauthFlowCustom — { provider: IProvider }

Usage notes

• Bootstrap 5 theme variables (--bs-*) apply to layout/button styling.
• Provider artwork aligns with common OAuth brands; slot header can override presentation.
• Shadow DOM encapsulates default SVGs; configure via attributes and slots.
• Use i18nlang on parent hb-auth or this component’s i18n metadata where wired.

Minimal HTML example

<hb-auth-social-login-button
  provider='{"name":"google","url":"https://accounts.google.com/o/oauth2/v2/auth?..."}'
  social_auth_server_url="https://auth.example.com"
  auth_cookie_name="session"
></hb-auth-social-login-button>