@arcote.tech/arc-auth 0.4.1

package/src/react/auth-provider.tsx

@@ -0,0 +1,82 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+export interface AuthContextType {
+  token: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  setAccessToken: (token: string) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export interface AuthProviderProps {
+  children: ReactNode;
+  /** Callback to set token on the arc model (setAuthToken from reactModel) */
+  onTokenChange?: (token: string | null) => void;
+  /** Initial token from scope (loaded by adapter.loadPersisted on model init) */
+  initialToken?: string | null;
+}
+
+export function AuthProvider({ children, onTokenChange, initialToken }: AuthProviderProps) {
+  const [token, setToken] = useState<string | null>(initialToken ?? null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Check for token in URL (OAuth callback redirect)
+    const params = new URLSearchParams(window.location.search);
+    const urlToken = params.get("token");
+    if (urlToken) {
+      setToken(urlToken);
+      onTokenChange?.(urlToken); // scope.setToken → adapter auto-persists
+      // Clean token from URL
+      const url = new URL(window.location.href);
+      url.searchParams.delete("token");
+      window.history.replaceState({}, "", url.toString());
+      setIsLoading(false);
+      return;
+    }
+
+    // Token loaded by adapter.loadPersisted() on model init → initialToken
+    if (initialToken) {
+      onTokenChange?.(initialToken);
+    }
+    setIsLoading(false);
+  }, []);
+
+  const setAccessToken = (newToken: string) => {
+    setToken(newToken);
+    onTokenChange?.(newToken); // scope.setToken → adapter auto-persists
+  };
+
+  const logout = () => {
+    setToken(null);
+    onTokenChange?.(null); // scope.setToken(null) → adapter clears this scope
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        token,
+        isAuthenticated: !!token,
+        isLoading,
+        setAccessToken,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
+  return ctx;
+}

package/src/react/index.ts

@@ -0,0 +1,11 @@
+export { AuthProvider, useAuth } from "./auth-provider";
+export type { AuthContextType, AuthProviderProps } from "./auth-provider";
+
+export { ProtectedRoute } from "./protected-route";
+export type { ProtectedRouteProps } from "./protected-route";
+
+export { SignInPage } from "./sign-in-page";
+export type { SignInPageProps, SignInRenderProps } from "./sign-in-page";
+
+export { AuthPage } from "./auth-page";
+export type { AuthPageProps, AuthPageRenderProps } from "./auth-page";

package/src/react/protected-route.tsx

@@ -0,0 +1,60 @@
+import { useEffect, type ReactNode } from "react";
+import { useAuth } from "./auth-provider";
+
+export interface ProtectedRouteProps {
+  children: ReactNode;
+  /** Current path — used for redirectTo param */
+  currentPath: string;
+  /** Navigate function — called to redirect to sign-in */
+  navigate: (path: string) => void;
+  /** Sign-in path, defaults to "/sign-in" */
+  signInPath?: string;
+  /** Loading fallback */
+  loadingFallback?: ReactNode;
+}
+
+export function ProtectedRoute({
+  children,
+  currentPath,
+  navigate,
+  signInPath = "/sign-in",
+  loadingFallback,
+}: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated && !currentPath.startsWith(signInPath)) {
+      navigate(`${signInPath}?redirectTo=${encodeURIComponent(currentPath)}`);
+    }
+  }, [isLoading, isAuthenticated, currentPath, navigate, signInPath]);
+
+  if (isLoading) {
+    return (
+      loadingFallback ?? (
+        <div
+          style={{
+            display: "flex",
+            minHeight: "100vh",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <div
+            style={{
+              width: 32,
+              height: 32,
+              border: "2px solid #ccc",
+              borderTopColor: "transparent",
+              borderRadius: "50%",
+              animation: "spin 1s linear infinite",
+            }}
+          />
+        </div>
+      )
+    );
+  }
+
+  if (!isAuthenticated) return null;
+
+  return <>{children}</>;
+}

package/src/react/sign-in-page.tsx

@@ -0,0 +1,161 @@
+import { Trans } from "@arcote.tech/platform";
+import { useState, type ReactNode } from "react";
+import { useAuth } from "./auth-provider";
+
+export interface SignInPageProps {
+  /** signIn command from useCommands().accounts.signIn */
+  signIn: (params: { email: string; password: string }) => Promise<any>;
+  /** Navigate function */
+  navigate: (path: string) => void;
+  /** Custom render — receives form state and handlers, return your own UI */
+  render?: (props: SignInRenderProps) => ReactNode;
+}
+
+export interface SignInRenderProps {
+  email: string;
+  setEmail: (v: string) => void;
+  password: string;
+  setPassword: (v: string) => void;
+  error: string;
+  isLoading: boolean;
+  handleSubmit: (e: { preventDefault: () => void }) => void;
+}
+
+/**
+ * Reusable sign-in page logic.
+ * Handles form state, error mapping, token setting, and redirect.
+ *
+ * Pass `render` for custom UI, or use the default minimal form.
+ */
+export function SignInPage({ signIn, navigate, render }: SignInPageProps) {
+  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 handleSubmit = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    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("[SignInPage] signIn error:", err);
+      setError("Nie udało się połączyć z serwerem.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const renderProps: SignInRenderProps = {
+    email,
+    setEmail,
+    password,
+    setPassword,
+    error,
+    isLoading,
+    handleSubmit,
+  };
+
+  if (render) return <>{render(renderProps)}</>;
+
+  // Default minimal form (no design system dependency)
+  return (
+    <div
+      style={{
+        display: "flex",
+        minHeight: "100vh",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+      }}
+    >
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          width: "100%",
+          maxWidth: 360,
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        <h1 style={{ fontSize: 24, textAlign: "center" }}><Trans>Zaloguj się</Trans></h1>
+
+        {error && (
+          <div
+            style={{
+              padding: 12,
+              background: "#fef2f2",
+              border: "1px solid #fecaca",
+              borderRadius: 6,
+              color: "#dc2626",
+              fontSize: 14,
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        <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>
+  );
+}

package/src/routes/oauth-routes.ts

@@ -0,0 +1,276 @@
+import { route, type ArcAggregateElement } from "@arcote.tech/arc";
+import type { AccountAggregate } from "../aggregates/account";
+import type { OAuthIdentityAggregate } from "../aggregates/oauth-identity";
+import {
+  DEFAULT_FACEBOOK_SCOPES,
+  facebookProvider,
+} from "../providers/facebook";
+import { DEFAULT_GOOGLE_SCOPES, googleProvider } from "../providers/google";
+import type {
+  OAuthProviderAdapter,
+  OAuthProvidersConfig,
+} from "../providers/types";
+import type { Token } from "../tokens/token";
+
+export type OAuthRoutesData = {
+  providers: OAuthProvidersConfig;
+  baseUrl: string;
+  token: Token;
+  accountElement: ArcAggregateElement<AccountAggregate>;
+  oauthIdentityElement: ArcAggregateElement<OAuthIdentityAggregate>;
+};
+
+const providerAdapters: Record<string, OAuthProviderAdapter> = {
+  google: googleProvider,
+  facebook: facebookProvider,
+};
+
+const defaultScopes: Record<string, string[]> = {
+  google: DEFAULT_GOOGLE_SCOPES,
+  facebook: DEFAULT_FACEBOOK_SCOPES,
+};
+
+function generateState(): string {
+  const bytes = new Uint8Array(32);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+export function createOAuthRoutes(data: OAuthRoutesData) {
+  const { providers, baseUrl, token, accountElement, oauthIdentityElement } =
+    data;
+
+  const enabledProviders = Object.keys(providers).filter(
+    (p) => providers[p as keyof OAuthProvidersConfig],
+  );
+
+  const oauthStart = route("oauthStart")
+    .path("/auth/oauth/:provider/start")
+    .public()
+    .handle({
+      GET: async (_ctx, _req, params, url) => {
+        const providerName = params.provider;
+        const adapter = providerAdapters[providerName];
+        const config = providers[providerName as keyof OAuthProvidersConfig];
+
+        if (!adapter || !config || !enabledProviders.includes(providerName)) {
+          return Response.json(
+            { error: `Unknown or disabled provider: ${providerName}` },
+            { status: 400 },
+          );
+        }
+
+        const state = generateState();
+        const redirectTo = url.searchParams.get("redirectTo") || "/";
+
+        const redirectUri = `${baseUrl}/route/auth/oauth/${providerName}/callback`;
+        const scopes = config.scopes || defaultScopes[providerName] || [];
+
+        const authorizationUrl = adapter.buildAuthorizationUrl({
+          clientId: config.clientId,
+          redirectUri,
+          state: `${state}:${encodeURIComponent(redirectTo)}`,
+          scopes,
+        });
+
+        const response = Response.redirect(authorizationUrl, 302);
+        // Set state cookie for CSRF protection
+        const headers = new Headers(response.headers);
+        headers.append(
+          "Set-Cookie",
+          `oauth_state=${state}; HttpOnly; SameSite=Lax; Path=/; Max-Age=600`,
+        );
+        return new Response(response.body, {
+          status: 302,
+          headers,
+        });
+      },
+    });
+
+  const oauthCallback = route("oauthCallback")
+    .path("/auth/oauth/:provider/callback")
+    .public()
+    .mutate([accountElement, oauthIdentityElement])
+    .handle({
+      GET: async (ctx, req, params, url) => {
+        const providerName = params.provider;
+        const adapter = providerAdapters[providerName];
+        const config = providers[providerName as keyof OAuthProvidersConfig];
+
+        if (!adapter || !config || !enabledProviders.includes(providerName)) {
+          return Response.json(
+            { error: `Unknown or disabled provider: ${providerName}` },
+            { status: 400 },
+          );
+        }
+
+        // --- CSRF validation ---
+        const stateParam = url.searchParams.get("state");
+        if (!stateParam) {
+          return Response.json(
+            { error: "Missing state parameter" },
+            { status: 400 },
+          );
+        }
+
+        const cookieHeader = req.headers.get("cookie") || "";
+        const stateCookie = parseCookie(cookieHeader, "oauth_state");
+
+        const [stateValue, redirectTo] = stateParam.split(":");
+        if (!stateCookie || stateCookie !== stateValue) {
+          return Response.json(
+            { error: "Invalid state — possible CSRF attack" },
+            { status: 403 },
+          );
+        }
+
+        // --- Check for provider error ---
+        const errorParam = url.searchParams.get("error");
+        if (errorParam) {
+          const decodedRedirect = decodeURIComponent(redirectTo || "/");
+          return Response.redirect(
+            `${baseUrl}${decodedRedirect}?auth_error=${encodeURIComponent(errorParam)}`,
+            302,
+          );
+        }
+
+        // --- Exchange code for tokens ---
+        const code = url.searchParams.get("code");
+        if (!code) {
+          return Response.json(
+            { error: "Missing authorization code" },
+            { status: 400 },
+          );
+        }
+
+        const redirectUri = `${baseUrl}/route/auth/oauth/${providerName}/callback`;
+
+        let tokenResponse;
+        try {
+          tokenResponse = await adapter.exchangeCode({
+            code,
+            clientId: config.clientId,
+            clientSecret: config.clientSecret,
+            redirectUri,
+          });
+        } catch (err) {
+          console.error(
+            `[OAuth] Token exchange failed for ${providerName}:`,
+            err,
+          );
+          return Response.json(
+            { error: "OAuth token exchange failed" },
+            { status: 502 },
+          );
+        }
+
+        // --- Fetch user profile ---
+        let profile;
+        try {
+          profile = await adapter.fetchUserProfile(
+            tokenResponse.accessToken,
+            tokenResponse.idToken,
+          );
+        } catch (err) {
+          console.error(
+            `[OAuth] Profile fetch failed for ${providerName}:`,
+            err,
+          );
+          return Response.json(
+            { error: "Failed to fetch user profile from provider" },
+            { status: 502 },
+          );
+        }
+
+        // --- Find or create account ---
+        const accounts = ctx.mutate(accountElement);
+        const oauthIdentityQueries = ctx.query(oauthIdentityElement);
+        const oauthIdentities = ctx.mutate(oauthIdentityElement);
+
+        // 1. Check if this OAuth identity already exists
+        const existingIdentity = await oauthIdentityQueries.findByProvider({
+          provider: providerName,
+          providerUserId: profile.providerUserId,
+        });
+
+        let jwtToken: string;
+
+        if (existingIdentity) {
+          // Returning user — sign in and update last used
+          const signInResult = await accounts.signInViaOAuth({
+            email: profile.email,
+            provider: providerName,
+            providerUserId: profile.providerUserId,
+          });
+
+          if ("error" in signInResult) {
+            return Response.json(
+              { error: signInResult.error },
+              { status: 400 },
+            );
+          }
+
+          jwtToken = signInResult.token;
+
+          await oauthIdentities.markUsed({
+            oauthIdentityId: existingIdentity._id,
+          });
+        } else {
+          // Try to register — registerViaOAuth uses internal $query (bypasses protectBy)
+          // and returns EMAIL_ALREADY_TAKEN with accountId if account exists
+          const registerResult = await accounts.registerViaOAuth({
+            email: profile.email,
+            provider: providerName,
+            providerUserId: profile.providerUserId,
+            ...(profile.displayName
+              ? { displayName: profile.displayName }
+              : {}),
+            ...(profile.avatarUrl
+              ? { avatarUrl: profile.avatarUrl }
+              : {}),
+          });
+
+          // Both branches return accountId — extract it directly
+          const accountId = registerResult.accountId;
+
+          // Link the OAuth identity
+          await oauthIdentities.linkIdentity({
+            accountId,
+            provider: providerName,
+            providerUserId: profile.providerUserId,
+            providerEmail: profile.email,
+          });
+
+          // Generate JWT
+          jwtToken = token.generateJWT({ accountId });
+        }
+
+        // --- Redirect with token ---
+        const decodedRedirect = decodeURIComponent(redirectTo || "/");
+        const targetUrl = new URL(decodedRedirect, baseUrl);
+        targetUrl.searchParams.set("token", jwtToken);
+
+        // Clear state cookie
+        const response = Response.redirect(targetUrl.toString(), 302);
+        const headers = new Headers(response.headers);
+        headers.append(
+          "Set-Cookie",
+          `oauth_state=; HttpOnly; SameSite=Lax; Path=/; Max-Age=0`,
+        );
+        return new Response(response.body, {
+          status: 302,
+          headers,
+        });
+      },
+    });
+
+  return { oauthStart, oauthCallback, enabledProviders };
+}
+
+function parseCookie(cookieHeader: string, name: string): string | null {
+  const match = cookieHeader
+    .split(";")
+    .map((c) => c.trim())
+    .find((c) => c.startsWith(`${name}=`));
+  return match ? match.slice(name.length + 1) : null;
+}

package/src/tokens/token.ts

@@ -0,0 +1,15 @@
+import { string, token } from "@arcote.tech/arc";
+
+export type TokenData = {
+  name: string;
+  secret: string | undefined;
+};
+
+export const createToken = <const Data extends TokenData>(data: Data) =>
+  token(`${data.name}Account`, {
+    accountId: string(),
+  }).secret(data.secret);
+
+export type Token<Data extends TokenData = TokenData> = ReturnType<
+  typeof createToken<Data>
+>;

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*"]
+}