hb-auth-social-login-button

Summary

Web component: a square, keyboard-accessible control that starts an OAuth-style redirect for a configured provider (built-in SVGs for GitLab, GitHub, Facebook, Google, and Authentik), or emits a custom event when the provider cannot be started from built-in URL rules. On return to the same page, it can detect tokens or codes in location.href and exchange them via simple-serverless-auth-client when a server URL and cookie name are set.

What it does

• Renders a clickable #icon-content region (role="button", tabindex="0") that runs socialLogin() on click or Enter/Space.
• If provider.url is set, dispatches oauthFlowRedirectStart and sets location.href to that URL.
• Else, if provider.params includes client_id and redirect_url, builds a provider-specific authorize URL (see Logic), dispatches oauthFlowRedirectStart, then redirects.
• Else logs a warning and dispatches oauthFlowCustom.
• On mount, detectByUri() inspects location.href for provider-specific return patterns; when matched, dispatches oauthFlowInit and may call Authorize.socialLoginOauthAnswer if both social_auth_server_url and auth_cookie_name are truthy. On success, either navigates to redirectonlogin or dispatches oauthFlowSuccess with { token }.

Appearance

| Aspect | Behavior | | --- | --- | | Host | display: block, fixed size 2.5rem × 2.5rem, padding 0.625rem. | | #icon | Fills host, transparent background, position: relative. | | #icon-content | Absolutely positioned, vertically centered, cursor: pointer, transparent background. | | Default artwork | Inline SVGs with part="provider_icon" for known provider.name values; unknown name shows literal text btn inside the default slot fallback. | | Focus | :focus-visible uses outline and radius from CSS variables (see Styling). |

Logic

| Step | Condition | Action | | --- | --- | --- | | Parse provider | provider is a string | JSON.parse in an $effect (errors logged to console). | | Start login | Missing provider.name, or both provider.url and provider.params missing | console.error, return. | | Prebuilt URL | provider.url set | oauthFlowRedirectStart, then location.href = provider.url. | | Composed URL | provider.params.client_id and provider.params.redirect_url | Build URL by provider.name, then oauthFlowRedirectStart and redirect. | | No URL | Otherwise | console.warn, oauthFlowCustom. | | Google URL | google | https://accounts.google.com/o/oauth2/v2/auth with response_type=token, scope, client_id, redirect_uri, etc. | | GitHub URL | github | https://github.com/login/oauth/authorize with scope, client_id, redirect_uri. | | GitLab URL | gitlab | https://gitlab.com/oauth/authorize with response_type=code, state, scope, client_id, redirect_uri. | | Facebook URL | facebook | Same host/path pattern as GitLab in code: https://gitlab.com/oauth/authorize?... (same query shape as gitlab). | | Authentik URL | authentik | `${provider.params.auth_server_url}/application/o/authorize/?` plus scope, response_type=code, state, client_id, redirect_uri. | | Return: Google | provider.name === "google", URL contains access_token= and google | Extract token after access_token=, call server exchange with { provider, token }, dispatch oauthFlowInit with { provider, token }. | | Return: GitHub | github, code=, provider=github | Code as token / tmpCode, server exchange, oauthFlowInit with token and tmpCode. | | Return: Facebook | facebook, code=, provider=facebook | Derives redirect_uri by stripping state and code segments from location.href, server exchange, oauthFlowInit includes redirect_uri. | | Return: GitLab | gitlab, code=, provider=gitlab | Same style of redirect_uri derivation and oauthFlowInit as other code-based providers. | | Return: Authentik | authentik, code=, provider=authentik | Same pattern as GitLab/Facebook for exchange and oauthFlowInit. | | Server exchange | auth_cookie_name and social_auth_server_url both truthy | Authorize.socialLoginOauthAnswer(providerPayload, { authUrl: social_auth_server_url, authCookieName: auth_cookie_name }). | | After exchange | redirectonlogin truthy | location.href = redirectonlogin. | | After exchange | No redirectonlogin | oauthFlowSuccess with { token: resolvedToken }. |

Custom element

| Tag | | --- | | hb-auth-social-login-button |

Attributes

Web component attributes are strings; complex values use JSON strings. Boolean-like project rules elsewhere do not apply to the props used here beyond normal string attributes.

| Attribute | Role in code | | --- | --- | | id | Bound to id; default "" in destructuring. | | provider | Provider config; coerced from JSON string if passed as string. Must include name and either url or params (see Logic). | | social_auth_server_url | Passed to Authorize.socialLoginOauthAnswer as authUrl when set with auth_cookie_name. | | auth_cookie_name | Passed as authCookieName; default "hb_session" in destructuring. | | redirectonlogin | If set after successful exchange, full-page redirect to this URL instead of emitting oauthFlowSuccess. |

The TypeScript Component type also includes optional style, which is not read from $props() in component.wc.svelte (the style binding is commented out).

Events

All events are CustomEvent dispatched on the host element.

| Event | detail | | --- | --- | | oauthFlowRedirectStart | { provider: IProvider } | | oauthFlowInit | { token?: string; provider: IProvider; tmpCode?: string; redirect_uri?: string } | | oauthFlowSuccess | { token: string } | | oauthFlowCustom | { provider: IProvider } |

IProvider in types: "facebook" \| "google" \| "gitlab" \| "github" \| "authentik".

Styling (vars / parts / slots)

CSS custom properties

| Variable | Used in | Fallback in SCSS | | --- | --- | --- | | --bulma-link | #icon-content:focus-visible outline color | #485fc7 | | --bulma-radius | #icon-content:focus-visible border radius | 0.25rem |

::part

| Part | Target | | --- | --- | | provider_icon | Default provider <svg> elements (part="provider_icon"). |

Slots

| Slot | Description | | --- | --- | | default | Replaces default slot content (built-in SVGs or the btn fallback). Use for custom artwork or label inside the control. |

TypeScript

Authoring types live in types/webcomponent.type.d.ts:

type IProvider = "facebook" | "google" | "gitlab" | "github" | "authentik";

export type Component = {
  id?: string;
  style?: string;
  social_auth_server_url?: string;
  auth_cookie_name?: string;
  redirectonlogin?: string;
  provider:
    | {
        url?: string;
        name: IProvider;
        params?: {
          redirect_url: string;
          client_id: string;
          scope: string;
          auth_server_url?: string;
        };
      }
    | undefined;
};

export type Events = {
  oauthFlowSuccess: { token: string };
  oauthFlowInit: {
    token?: string;
    provider: IProvider;
    tmpCode?: string;
    redirect_uri?: string;
  };
  oauthFlowRedirectStart: { provider: IProvider };
  oauthFlowCustom: { provider: IProvider };
};

Minimal example

<hb-auth-social-login-button
  provider='{"name":"google","url":"https://accounts.google.com/o/oauth2/v2/auth?client_id=YOUR_CLIENT&redirect_uri=YOUR_REDIRECT&response_type=token&scope=openid%20email"}'
  social_auth_server_url="https://your-auth.example"
  auth_cookie_name="hb_session"
></hb-auth-social-login-button>

Using composed params instead of url requires at least name, params.client_id, params.redirect_url, and params.scope so the component can build the authorize URL before redirecting.