unified-login

Headless React login flow for connecting a LinkedIn account to a Constel-style workspace, plus an optional MUI reference UI.

Install

yarn add unified-login
# or
npm install unified-login

Published to the public npm registry — no authentication needed for install.

Configure once at startup

import { configureLoginClient } from "unified-login";

configureLoginClient({
  apiBaseUrl: import.meta.env.VITE_WHITELABEL_API_URL_BASE,
  wsBaseUrl:  import.meta.env.VITE_WS_URL,
  getToken:   () => location.hash.substring(1),
});

By default the package decodes workspace_id from the JWT returned by getToken. If your host uses a different auth scheme (session cookies, opaque tokens) and knows the workspace ID out-of-band, supply it explicitly:

configureLoginClient({
  apiBaseUrl:      "https://api.example.com",
  wsBaseUrl:       "wss://ws.example.com",
  getToken:        () => readSessionCookie(),
  getWorkspaceId:  () => currentUser.workspaceId, // sync or async, optional
});

Drop in the styled screen

import { LoginScreen } from "unified-login/ui";
import "unified-login/ui/styles.css";

export default function LoginPage() {
  return (
    <LoginScreen
      onError={(err) => toast.error(err.message)}
      onInfo={(msg) => toast.info(msg)}
      onSuccess={() => console.log("connected")}
      onCustomizationLoaded={(c) => {
        document.title = c.name;
        document.getElementById("favicon")?.setAttribute("href", c.favicon);
      }}
    />
  );
}

Or use the headless hook

import { useLoginFlow, LoginState } from "unified-login";

function CustomLogin() {
  const flow = useLoginFlow({ onError: console.error });
  if (flow.state === LoginState.PASS) return <p>Connected</p>;
  // build your own UI on top of flow.* and flow.actions.*
}

Subpath exports

| Import path | Contents | |---|---| | unified-login | configureLoginClient, useLoginFlow, enums, types — no MUI | | unified-login/ui | <LoginScreen />, <Profile />, <ExtensionLoginButton /> — requires MUI v6, Emotion, react-hook-form, react-country-flag, @phosphor-icons/react | | unified-login/ui/styles.css | Reference stylesheet using wlb-* class names |

Local development

yarn install
yarn test          # vitest
yarn typecheck     # tsc --noEmit
yarn build         # tsup + copy ui/styles.css to dist/styles.css