@arcote.tech/arc-auth 0.4.1

package/src/index.ts

@@ -0,0 +1,125 @@
+import {
+  aggregateContextElement,
+  context,
+  type ArcRawShape,
+} from "@arcote.tech/arc";
+import { createAccountAggregate } from "./aggregates/account";
+import { createOAuthIdentityAggregate } from "./aggregates/oauth-identity";
+import { createAccountId } from "./ids/account";
+import { createOAuthIdentityId } from "./ids/oauth-identity";
+import { createToken } from "./tokens/token";
+import { createOAuthRoutes } from "./routes/oauth-routes";
+import type { OAuthProvidersConfig } from "./providers/types";
+
+// --- New typed builder API ---
+export { auth, AuthBuilder } from "./auth-builder";
+
+// --- Deprecated: use auth().useOAuth().build() instead ---
+
+export type AuthMode = "email" | "oauth" | "both";
+
+export type AuthContextData = {
+  name: string;
+  customFields: ArcRawShape;
+  secret: string | undefined;
+  mode?: AuthMode;
+  providers?: OAuthProvidersConfig;
+  baseUrl?: string;
+};
+
+/** @deprecated Use `auth({...}).useOAuth({...}).build()` instead */
+export const createAuthContext = <const Data extends AuthContextData>(
+  data: Data,
+) => {
+  const mode = data.mode ?? "both";
+  const accountId = createAccountId({ name: data.name });
+  const token = createToken({ name: data.name, secret: data.secret });
+
+  const Account = createAccountAggregate({
+    name: data.name,
+    accountId,
+    token,
+    customFields: data.customFields,
+  });
+
+  const accountElement = aggregateContextElement(Account);
+
+  const elements: any[] = [accountElement];
+
+  let OAuthIdentity: ReturnType<typeof createOAuthIdentityAggregate> | undefined;
+  let enabledProviders: string[] = [];
+
+  if (mode !== "email" && data.providers) {
+    const oauthIdentityId = createOAuthIdentityId({ name: data.name });
+
+    OAuthIdentity = createOAuthIdentityAggregate({
+      name: data.name,
+      oauthIdentityId,
+      accountId,
+    });
+
+    const oauthIdentityElement = aggregateContextElement(OAuthIdentity);
+    elements.push(oauthIdentityElement);
+
+    if (data.baseUrl) {
+      const oauthRoutes = createOAuthRoutes({
+        providers: data.providers,
+        baseUrl: data.baseUrl,
+        token,
+        accountElement,
+        oauthIdentityElement,
+      });
+      elements.push(oauthRoutes.oauthStart);
+      elements.push(oauthRoutes.oauthCallback);
+      enabledProviders = oauthRoutes.enabledProviders;
+    }
+  }
+
+  const authContext = context(elements);
+
+  return {
+    context: authContext,
+    accountId,
+    token,
+    Account,
+    OAuthIdentity,
+    mode,
+    enabledProviders,
+  };
+};
+
+export type AuthContext<Data extends AuthContextData = AuthContextData> =
+  ReturnType<typeof createAuthContext<Data>>;
+
+// Re-exports
+export { createAccountAggregate } from "./aggregates/account";
+export type { AccountAggregate } from "./aggregates/account";
+export { createOAuthIdentityAggregate } from "./aggregates/oauth-identity";
+export type { OAuthIdentityAggregate } from "./aggregates/oauth-identity";
+export { createAccountId } from "./ids/account";
+export type { AccountId } from "./ids/account";
+export { createOAuthIdentityId } from "./ids/oauth-identity";
+export type { OAuthIdentityId } from "./ids/oauth-identity";
+export { createToken } from "./tokens/token";
+export type { Token } from "./tokens/token";
+
+// Provider types
+export type {
+  OAuthProviderConfig,
+  OAuthProvidersConfig,
+  OAuthProviderName,
+} from "./providers/types";
+
+// React components
+export { AuthProvider, ProtectedRoute, SignInPage, useAuth } from "./react";
+export type {
+  AuthContextType,
+  AuthProviderProps,
+  ProtectedRouteProps,
+  SignInPageProps,
+  SignInRenderProps,
+} from "./react";
+
+// New auth page
+export { AuthPage } from "./react/auth-page";
+export type { AuthPageProps, AuthPageRenderProps } from "./react/auth-page";

package/src/providers/facebook.ts

@@ -0,0 +1,82 @@
+import type {
+  OAuthProviderAdapter,
+  OAuthTokenResponse,
+  OAuthUserProfile,
+} from "./types";
+
+const FB_AUTH_URL = "https://www.facebook.com/v21.0/dialog/oauth";
+const FB_TOKEN_URL = "https://graph.facebook.com/v21.0/oauth/access_token";
+const FB_USERINFO_URL = "https://graph.facebook.com/me";
+
+export const DEFAULT_FACEBOOK_SCOPES = ["email", "public_profile"];
+
+export const facebookProvider: OAuthProviderAdapter = {
+  name: "facebook",
+
+  buildAuthorizationUrl({ clientId, redirectUri, state, scopes }) {
+    const params = new URLSearchParams({
+      client_id: clientId,
+      redirect_uri: redirectUri,
+      scope: scopes.join(","),
+      state,
+      response_type: "code",
+    });
+    return `${FB_AUTH_URL}?${params.toString()}`;
+  },
+
+  async exchangeCode({
+    code,
+    clientId,
+    clientSecret,
+    redirectUri,
+  }): Promise<OAuthTokenResponse> {
+    const params = new URLSearchParams({
+      code,
+      client_id: clientId,
+      client_secret: clientSecret,
+      redirect_uri: redirectUri,
+    });
+
+    const response = await fetch(`${FB_TOKEN_URL}?${params.toString()}`);
+
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `Facebook token exchange failed: ${response.status} ${text}`,
+      );
+    }
+
+    const data = await response.json();
+    return {
+      accessToken: data.access_token,
+    };
+  },
+
+  async fetchUserProfile(accessToken: string): Promise<OAuthUserProfile> {
+    const params = new URLSearchParams({
+      fields: "id,name,email,picture.width(200).height(200)",
+      access_token: accessToken,
+    });
+
+    const response = await fetch(`${FB_USERINFO_URL}?${params.toString()}`);
+
+    if (!response.ok) {
+      throw new Error(`Facebook userinfo fetch failed: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    if (!data.email) {
+      throw new Error(
+        "Facebook did not return an email. User may not have an email associated with their account.",
+      );
+    }
+
+    return {
+      providerUserId: data.id,
+      email: data.email,
+      displayName: data.name,
+      avatarUrl: data.picture?.data?.url,
+    };
+  },
+};

package/src/providers/google.ts

@@ -0,0 +1,113 @@
+import type {
+  OAuthProviderAdapter,
+  OAuthTokenResponse,
+  OAuthUserProfile,
+} from "./types";
+
+const GOOGLE_AUTH_URL = "https://accounts.google.com/o/oauth2/v2/auth";
+const GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token";
+const GOOGLE_USERINFO_URL = "https://www.googleapis.com/oauth2/v2/userinfo";
+
+export const DEFAULT_GOOGLE_SCOPES = ["openid", "email", "profile"];
+
+export const googleProvider: OAuthProviderAdapter = {
+  name: "google",
+
+  buildAuthorizationUrl({ clientId, redirectUri, state, scopes }) {
+    const params = new URLSearchParams({
+      client_id: clientId,
+      redirect_uri: redirectUri,
+      response_type: "code",
+      scope: scopes.join(" "),
+      state,
+      access_type: "offline",
+      prompt: "consent",
+    });
+    return `${GOOGLE_AUTH_URL}?${params.toString()}`;
+  },
+
+  async exchangeCode({
+    code,
+    clientId,
+    clientSecret,
+    redirectUri,
+  }): Promise<OAuthTokenResponse> {
+    const response = await fetch(GOOGLE_TOKEN_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({
+        code,
+        client_id: clientId,
+        client_secret: clientSecret,
+        redirect_uri: redirectUri,
+        grant_type: "authorization_code",
+      }),
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(`Google token exchange failed: ${response.status} ${text}`);
+    }
+
+    const data = await response.json();
+    return {
+      accessToken: data.access_token,
+      refreshToken: data.refresh_token,
+      idToken: data.id_token,
+    };
+  },
+
+  async fetchUserProfile(
+    accessToken: string,
+    idToken?: string,
+  ): Promise<OAuthUserProfile> {
+    // Try decoding id_token first (avoids extra network call)
+    if (idToken) {
+      const profile = decodeIdToken(idToken);
+      if (profile) return profile;
+    }
+
+    // Fallback: call userinfo endpoint
+    const response = await fetch(GOOGLE_USERINFO_URL, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Google userinfo fetch failed: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return {
+      providerUserId: data.id,
+      email: data.email,
+      displayName: data.name,
+      avatarUrl: data.picture,
+    };
+  },
+};
+
+/**
+ * Decode Google id_token JWT payload (no signature verification needed —
+ * we already verified the token exchange with Google's server).
+ */
+function decodeIdToken(idToken: string): OAuthUserProfile | null {
+  try {
+    const parts = idToken.split(".");
+    if (parts.length !== 3) return null;
+
+    const payload = JSON.parse(
+      Buffer.from(parts[1], "base64url").toString("utf-8"),
+    );
+
+    if (!payload.sub || !payload.email) return null;
+
+    return {
+      providerUserId: payload.sub,
+      email: payload.email,
+      displayName: payload.name,
+      avatarUrl: payload.picture,
+    };
+  } catch {
+    return null;
+  }
+}

package/src/providers/index.ts

@@ -0,0 +1,10 @@
+export { googleProvider, DEFAULT_GOOGLE_SCOPES } from "./google";
+export { facebookProvider, DEFAULT_FACEBOOK_SCOPES } from "./facebook";
+export type {
+  OAuthProviderAdapter,
+  OAuthTokenResponse,
+  OAuthUserProfile,
+  OAuthProviderName,
+  OAuthProviderConfig,
+  OAuthProvidersConfig,
+} from "./types";

package/src/providers/types.ts

@@ -0,0 +1,53 @@
+/**
+ * OAuth provider adapter interface.
+ * Each provider (Google, Facebook) implements this to handle
+ * authorization URL building, code exchange, and profile fetching.
+ */
+export interface OAuthProviderAdapter {
+  name: "google" | "facebook";
+
+  buildAuthorizationUrl(params: {
+    clientId: string;
+    redirectUri: string;
+    state: string;
+    scopes: string[];
+  }): string;
+
+  exchangeCode(params: {
+    code: string;
+    clientId: string;
+    clientSecret: string;
+    redirectUri: string;
+  }): Promise<OAuthTokenResponse>;
+
+  fetchUserProfile(
+    accessToken: string,
+    idToken?: string,
+  ): Promise<OAuthUserProfile>;
+}
+
+export interface OAuthTokenResponse {
+  accessToken: string;
+  refreshToken?: string;
+  idToken?: string;
+}
+
+export interface OAuthUserProfile {
+  providerUserId: string;
+  email: string;
+  displayName?: string;
+  avatarUrl?: string;
+}
+
+export type OAuthProviderName = "google" | "facebook";
+
+export type OAuthProviderConfig = {
+  clientId: string;
+  clientSecret: string;
+  scopes?: string[];
+};
+
+export type OAuthProvidersConfig = {
+  google?: OAuthProviderConfig;
+  facebook?: OAuthProviderConfig;
+};

package/src/react/auth-page.tsx

@@ -0,0 +1,258 @@
+import { Trans } from "@arcote.tech/platform";
+import { useState, useCallback, type ReactNode } from "react";
+import { useAuth } from "./auth-provider";
+
+type AuthMode = "email" | "oauth" | "both";
+
+export interface AuthPageProps {
+  mode: AuthMode;
+  enabledProviders?: Array<"google" | "facebook">;
+  /** signIn command — required when mode is "email" or "both" */
+  signIn?: (params: { email: string; password: string }) => Promise<any>;
+  navigate: (path: string) => void;
+  /** Base URL for OAuth start links (e.g. "/api" or "") */
+  apiBaseUrl?: string;
+  /** Custom render — receives form state and handlers */
+  render?: (props: AuthPageRenderProps) => ReactNode;
+}
+
+export interface AuthPageRenderProps {
+  // Email/password fields (present only when mode != "oauth")
+  email?: string;
+  setEmail?: (v: string) => void;
+  password?: string;
+  setPassword?: (v: string) => void;
+  handleEmailSubmit?: (e: { preventDefault: () => void }) => void;
+
+  // OAuth
+  enabledProviders: Array<"google" | "facebook">;
+  getOAuthUrl: (provider: string) => string;
+
+  // Shared
+  error: string;
+  isLoading: boolean;
+  mode: AuthMode;
+}
+
+export function AuthPage({
+  mode,
+  enabledProviders = [],
+  signIn,
+  navigate,
+  apiBaseUrl = "",
+  render,
+}: AuthPageProps) {
+  const { setAccessToken } = useAuth();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const redirectTo =
+    new URLSearchParams(window.location.search).get("redirectTo") || "/";
+
+  const getOAuthUrl = useCallback(
+    (provider: string) => {
+      return `${apiBaseUrl}/route/auth/oauth/${provider}/start?redirectTo=${encodeURIComponent(redirectTo)}`;
+    },
+    [apiBaseUrl, redirectTo],
+  );
+
+  const handleEmailSubmit = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    if (!signIn) return;
+
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const result = await signIn({ email, password });
+
+      if (result && "error" in result) {
+        if (result.error === "INVALID_EMAIL_OR_PASSWORD") {
+          setError("Nieprawidłowy email lub hasło.");
+        } else if (result.error === "EMAIL_NOT_VERIFIED") {
+          setError("Email nie został zweryfikowany.");
+        } else {
+          setError("Wystąpił błąd podczas logowania.");
+        }
+        return;
+      }
+
+      setAccessToken(result.token);
+      setTimeout(() => navigate(redirectTo), 50);
+    } catch (err) {
+      console.error("[AuthPage] signIn error:", err);
+      setError("Nie udało się połączyć z serwerem.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Check for auth_error from OAuth callback
+  const authError = new URLSearchParams(window.location.search).get("auth_error");
+  const displayError = authError
+    ? `Błąd logowania OAuth: ${authError}`
+    : error;
+
+  const includeEmail = mode === "email" || mode === "both";
+
+  const renderProps: AuthPageRenderProps = {
+    ...(includeEmail
+      ? {
+          email,
+          setEmail,
+          password,
+          setPassword,
+          handleEmailSubmit,
+        }
+      : {}),
+    enabledProviders,
+    getOAuthUrl,
+    error: displayError,
+    isLoading,
+    mode,
+  };
+
+  if (render) return <>{render(renderProps)}</>;
+
+  // Default minimal form
+  return (
+    <div
+      style={{
+        display: "flex",
+        minHeight: "100vh",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: 360,
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        <h1 style={{ fontSize: 24, textAlign: "center" }}><Trans>Zaloguj się</Trans></h1>
+
+        {displayError && (
+          <div
+            style={{
+              padding: 12,
+              background: "#fef2f2",
+              border: "1px solid #fecaca",
+              borderRadius: 6,
+              color: "#dc2626",
+              fontSize: 14,
+            }}
+          >
+            {displayError}
+          </div>
+        )}
+
+        {/* OAuth buttons */}
+        {enabledProviders.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {enabledProviders.map((provider) => (
+              <a
+                key={provider}
+                href={getOAuthUrl(provider)}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 8,
+                  padding: "10px 16px",
+                  border: "1px solid #d1d5db",
+                  borderRadius: 6,
+                  textDecoration: "none",
+                  color: "#374151",
+                  fontSize: 14,
+                  cursor: "pointer",
+                }}
+              >
+                Zaloguj się przez {provider === "google" ? "Google" : "Facebook"}
+              </a>
+            ))}
+          </div>
+        )}
+
+        {/* Separator */}
+        {includeEmail && enabledProviders.length > 0 && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              color: "#9ca3af",
+              fontSize: 12,
+            }}
+          >
+            <div style={{ flex: 1, height: 1, background: "#e5e7eb" }} />
+            <Trans>lub</Trans>
+            <div style={{ flex: 1, height: 1, background: "#e5e7eb" }} />
+          </div>
+        )}
+
+        {/* Email/password form */}
+        {includeEmail && (
+          <form
+            onSubmit={handleEmailSubmit}
+            style={{ display: "flex", flexDirection: "column", gap: 16 }}
+          >
+            <input
+              type="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={isLoading}
+              autoComplete="email"
+              style={{
+                padding: 8,
+                border: "1px solid #d1d5db",
+                borderRadius: 6,
+              }}
+            />
+
+            <input
+              type="password"
+              placeholder="Hasło"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              disabled={isLoading}
+              minLength={6}
+              maxLength={32}
+              autoComplete="current-password"
+              style={{
+                padding: 8,
+                border: "1px solid #d1d5db",
+                borderRadius: 6,
+              }}
+            />
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              style={{
+                padding: "8px 16px",
+                background: "#2563eb",
+                color: "white",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+              }}
+            >
+              {isLoading ? "Logowanie..." : "Zaloguj się"}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}