@carlonicora/nextjs-jsonapi 1.24.2 → 1.25.0

package/src/features/oauth/components/OAuthScopeSelector.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useCallback } from "react";
+import { Checkbox, Label } from "../../../shadcnui";
+import { AVAILABLE_OAUTH_SCOPES, OAuthScopeInfo } from "../interfaces/oauth.interface";
+
+export interface OAuthScopeSelectorProps {
+  /** Currently selected scopes */
+  value: string[];
+  /** Called when selection changes */
+  onChange: (scopes: string[]) => void;
+  /** Available scopes to display (defaults to all) */
+  availableScopes?: OAuthScopeInfo[];
+  /** Whether selector is disabled */
+  disabled?: boolean;
+  /** Error message */
+  error?: string;
+  /** Label text */
+  label?: string;
+}
+
+/**
+ * Checkbox selector for OAuth scopes
+ *
+ * @example
+ * ```tsx
+ * const [scopes, setScopes] = useState<string[]>([]);
+ *
+ * <OAuthScopeSelector
+ *   value={scopes}
+ *   onChange={setScopes}
+ *   error={errors.scopes}
+ * />
+ * ```
+ */
+export function OAuthScopeSelector({
+  value,
+  onChange,
+  availableScopes = AVAILABLE_OAUTH_SCOPES,
+  disabled = false,
+  error,
+  label = "Allowed Scopes",
+}: OAuthScopeSelectorProps) {
+  const handleToggle = useCallback(
+    (scope: string, checked: boolean) => {
+      if (checked) {
+        onChange([...value, scope]);
+      } else {
+        onChange(value.filter((s) => s !== scope));
+      }
+    },
+    [value, onChange]
+  );
+
+  // Group scopes by category (before the colon)
+  const groupedScopes = availableScopes.reduce((acc, scope) => {
+    const [category] = scope.scope.split(":");
+    const groupName = category === scope.scope ? "General" : category;
+
+    if (!acc[groupName]) {
+      acc[groupName] = [];
+    }
+    acc[groupName].push(scope);
+    return acc;
+  }, {} as Record<string, OAuthScopeInfo[]>);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label>{label} *</Label>
+        <p className="text-sm text-muted-foreground">
+          Select the permissions your application needs.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        {Object.entries(groupedScopes).map(([groupName, scopes]) => (
+          <div key={groupName} className="space-y-2">
+            <h4 className="text-sm font-medium capitalize">{groupName}</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 pl-2">
+              {scopes.map((scopeInfo) => {
+                const isChecked = value.includes(scopeInfo.scope);
+                const isAdmin = scopeInfo.scope === "admin";
+
+                return (
+                  <div
+                    key={scopeInfo.scope}
+                    className={`flex items-start space-x-3 p-2 rounded-md border ${
+                      isChecked ? "bg-primary/5 border-primary/20" : "border-transparent"
+                    } ${isAdmin ? "bg-destructive/5" : ""}`}
+                  >
+                    <Checkbox
+                      id={`scope-${scopeInfo.scope}`}
+                      checked={isChecked}
+                      onCheckedChange={(checked) =>
+                        handleToggle(scopeInfo.scope, checked === true)
+                      }
+                      disabled={disabled}
+                    />
+                    <div className="flex-1">
+                      <Label
+                        htmlFor={`scope-${scopeInfo.scope}`}
+                        className="text-sm font-medium cursor-pointer"
+                      >
+                        {scopeInfo.name}
+                        {isAdmin && (
+                          <span className="ml-2 text-xs text-destructive">(Dangerous)</span>
+                        )}
+                      </Label>
+                      <p className="text-xs text-muted-foreground">{scopeInfo.description}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}

package/src/features/oauth/components/consent/OAuthConsentActions.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Button } from "../../../../shadcnui";
+
+export interface OAuthConsentActionsProps {
+  /** Called when user clicks Authorize */
+  onApprove: () => void;
+  /** Called when user clicks Deny */
+  onDeny: () => void;
+  /** Whether an action is in progress */
+  isLoading?: boolean;
+}
+
+/**
+ * Action buttons for OAuth consent screen
+ */
+export function OAuthConsentActions({
+  onApprove,
+  onDeny,
+  isLoading = false,
+}: OAuthConsentActionsProps) {
+  return (
+    <div className="flex flex-col sm:flex-row gap-3">
+      <Button
+        variant="outline"
+        onClick={onDeny}
+        disabled={isLoading}
+        className="flex-1"
+      >
+        Deny
+      </Button>
+      <Button
+        onClick={onApprove}
+        disabled={isLoading}
+        className="flex-1"
+      >
+        {isLoading ? "Authorizing..." : "Authorize"}
+      </Button>
+    </div>
+  );
+}

package/src/features/oauth/components/consent/OAuthConsentHeader.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Shield } from "lucide-react";
+import { OAuthClientInterface } from "../../interfaces/oauth.interface";
+
+export interface OAuthConsentHeaderProps {
+  /** The requesting OAuth client */
+  client: OAuthClientInterface;
+  /** Optional logo URL override */
+  logoUrl?: string;
+  /** Application name (e.g., "Only35") */
+  appName?: string;
+}
+
+/**
+ * Header component for OAuth consent screen
+ * Shows platform logo and requesting app information
+ */
+export function OAuthConsentHeader({
+  client,
+  logoUrl,
+  appName = "Only35",
+}: OAuthConsentHeaderProps) {
+  return (
+    <div className="text-center space-y-4">
+      {/* Platform Logo */}
+      <div className="flex justify-center">
+        {logoUrl ? (
+          <img
+            src={logoUrl}
+            alt={appName}
+            className="h-12 w-auto"
+          />
+        ) : (
+          <div className="h-12 w-12 rounded-full bg-primary flex items-center justify-center">
+            <Shield className="h-6 w-6 text-primary-foreground" />
+          </div>
+        )}
+      </div>
+
+      {/* Authorization Request */}
+      <div className="space-y-2">
+        <h1 className="text-2xl font-bold">Authorize {client.name}</h1>
+        <p className="text-muted-foreground">
+          <span className="font-medium text-foreground">{client.name}</span>
+          {" "}wants to access your {appName} account
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/features/oauth/components/consent/OAuthConsentScreen.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { ExternalLink, AlertTriangle, Loader2 } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  Separator,
+  Alert,
+  AlertDescription,
+} from "../../../../shadcnui";
+import { OAuthConsentHeader } from "./OAuthConsentHeader";
+import { OAuthScopeList } from "./OAuthScopeList";
+import { OAuthConsentActions } from "./OAuthConsentActions";
+import { useOAuthConsent } from "../../hooks/useOAuthConsent";
+import { OAuthConsentRequest } from "../../interfaces/oauth.interface";
+
+export interface OAuthConsentScreenProps {
+  /** OAuth authorization parameters */
+  params: OAuthConsentRequest;
+  /** Optional platform logo URL */
+  logoUrl?: string;
+  /** Platform name */
+  appName?: string;
+  /** Terms of Service URL */
+  termsUrl?: string;
+  /** Privacy Policy URL */
+  privacyUrl?: string;
+}
+
+/**
+ * Main OAuth consent screen component
+ * Displays client info, requested scopes, and approve/deny buttons
+ *
+ * @example
+ * ```tsx
+ * <OAuthConsentScreen
+ *   params={{
+ *     clientId: searchParams.client_id,
+ *     redirectUri: searchParams.redirect_uri,
+ *     scope: searchParams.scope,
+ *     state: searchParams.state,
+ *   }}
+ * />
+ * ```
+ */
+export function OAuthConsentScreen({
+  params,
+  logoUrl,
+  appName = "Only35",
+  termsUrl = "/terms",
+  privacyUrl = "/privacy",
+}: OAuthConsentScreenProps) {
+  const { clientInfo, isLoading, error, approve, deny, isSubmitting } = useOAuthConsent(params);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            <p className="mt-4 text-muted-foreground">Loading authorization request...</p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error || !clientInfo) {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardContent className="py-8">
+            <Alert variant="destructive">
+              <AlertTriangle className="h-4 w-4" />
+              <AlertDescription>
+                {error?.message || "Invalid authorization request. Please try again."}
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const { client, scopes } = clientInfo;
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-muted/30">
+      <Card className="w-full max-w-md">
+        <CardContent className="pt-6 space-y-6">
+          {/* Header */}
+          <OAuthConsentHeader
+            client={client}
+            logoUrl={logoUrl}
+            appName={appName}
+          />
+
+          <Separator />
+
+          {/* Scopes */}
+          <OAuthScopeList scopes={scopes} />
+
+          <Separator />
+
+          {/* Redirect URI Notice */}
+          <div className="flex items-start gap-2 text-sm text-muted-foreground">
+            <ExternalLink className="h-4 w-4 mt-0.5 flex-shrink-0" />
+            <div>
+              <span>Authorizing will redirect you to:</span>
+              <p className="font-mono text-xs mt-1 break-all">{params.redirectUri}</p>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <OAuthConsentActions
+            onApprove={approve}
+            onDeny={deny}
+            isLoading={isSubmitting}
+          />
+        </CardContent>
+
+        {/* Footer */}
+        <CardFooter className="justify-center">
+          <p className="text-xs text-center text-muted-foreground">
+            By authorizing, you agree to the app's{" "}
+            <a href={termsUrl} className="underline hover:text-foreground" target="_blank" rel="noopener">
+              Terms of Service
+            </a>
+            {" "}and{" "}
+            <a href={privacyUrl} className="underline hover:text-foreground" target="_blank" rel="noopener">
+              Privacy Policy
+            </a>
+            .
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/features/oauth/components/consent/OAuthScopeList.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  Eye,
+  Pencil,
+  Image,
+  Upload,
+  Film,
+  FolderPlus,
+  User,
+  Shield,
+  LucideIcon,
+} from "lucide-react";
+import { OAuthScopeInfo } from "../../interfaces/oauth.interface";
+
+export interface OAuthScopeListProps {
+  /** List of requested scopes */
+  scopes: OAuthScopeInfo[];
+}
+
+/** Map scope icons to Lucide components */
+const SCOPE_ICONS: Record<string, LucideIcon> = {
+  eye: Eye,
+  pencil: Pencil,
+  image: Image,
+  upload: Upload,
+  film: Film,
+  "folder-plus": FolderPlus,
+  user: User,
+  shield: Shield,
+};
+
+/**
+ * List of requested OAuth scopes for consent display
+ */
+export function OAuthScopeList({ scopes }: OAuthScopeListProps) {
+  if (scopes.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+        This will allow the application to:
+      </h2>
+      <ul className="space-y-3">
+        {scopes.map((scope) => {
+          const IconComponent = scope.icon ? SCOPE_ICONS[scope.icon] : Eye;
+
+          return (
+            <li
+              key={scope.scope}
+              className="flex items-start gap-3 p-3 rounded-lg bg-muted/50"
+            >
+              <div className="flex-shrink-0 mt-0.5">
+                <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                  {IconComponent && (
+                    <IconComponent className="h-4 w-4 text-primary" />
+                  )}
+                </div>
+              </div>
+              <div className="flex-1">
+                <p className="font-medium">{scope.name}</p>
+                <p className="text-sm text-muted-foreground">{scope.description}</p>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/features/oauth/components/consent/index.ts

@@ -0,0 +1,4 @@
+export * from "./OAuthConsentHeader";
+export * from "./OAuthScopeList";
+export * from "./OAuthConsentActions";
+export * from "./OAuthConsentScreen";

package/src/features/oauth/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./OAuthRedirectUriInput";
+export * from "./OAuthScopeSelector";
+export * from "./OAuthClientSecretDisplay";
+export * from "./OAuthClientCard";
+export * from "./OAuthClientList";
+export * from "./OAuthClientForm";
+export * from "./OAuthClientDetail";
+export * from "./consent";

package/src/features/oauth/data/index.ts

@@ -0,0 +1,2 @@
+export * from "./oauth";
+export * from "./oauth.service";

package/src/features/oauth/data/oauth.service.ts

@@ -0,0 +1,191 @@
+import { AbstractService, EndpointCreator, HttpMethod, Modules, NextRef } from "../../../core";
+import {
+  OAuthClientCreateRequest,
+  OAuthClientCreateResponse,
+  OAuthClientInput,
+  OAuthClientInterface,
+  OAuthConsentInfo,
+  OAuthConsentRequest,
+} from "../interfaces/oauth.interface";
+
+/**
+ * Service for OAuth client management and authorization consent flow.
+ *
+ * Client Management endpoints:
+ * - GET /oauth/clients - List all clients for current user
+ * - GET /oauth/clients/:clientId - Get single client
+ * - POST /oauth/clients - Create new client (returns secret once)
+ * - PATCH /oauth/clients/:clientId - Update client
+ * - DELETE /oauth/clients/:clientId - Delete client
+ * - POST /oauth/clients/:clientId/regenerate-secret - Regenerate client secret
+ *
+ * Consent Flow endpoints:
+ * - GET /oauth/authorize/info - Get client info for consent screen
+ * - POST /oauth/authorize/approve - Approve authorization
+ * - POST /oauth/authorize/deny - Deny authorization
+ */
+export class OAuthService extends AbstractService {
+  // ==========================================
+  // CLIENT MANAGEMENT
+  // ==========================================
+
+  /**
+   * List all OAuth clients for the current user
+   */
+  static async listClients(params?: { next?: NextRef }): Promise<OAuthClientInterface[]> {
+    return this.callApi<OAuthClientInterface[]>({
+      type: Modules.OAuth,
+      method: HttpMethod.GET,
+      endpoint: new EndpointCreator({ endpoint: "oauth/clients" }).generate(),
+      next: params?.next,
+    });
+  }
+
+  /**
+   * Get a single OAuth client by ID
+   */
+  static async getClient(params: { clientId: string }): Promise<OAuthClientInterface> {
+    return this.callApi<OAuthClientInterface>({
+      type: Modules.OAuth,
+      method: HttpMethod.GET,
+      endpoint: new EndpointCreator({ endpoint: "oauth/clients", id: params.clientId }).generate(),
+    });
+  }
+
+  /**
+   * Create a new OAuth client
+   * @returns The created client AND the client secret (shown only once!)
+   */
+  static async createClient(data: OAuthClientCreateRequest): Promise<OAuthClientCreateResponse> {
+    const result = await this.callApiWithMeta<OAuthClientInterface>({
+      type: Modules.OAuth,
+      method: HttpMethod.POST,
+      endpoint: new EndpointCreator({ endpoint: "oauth/clients" }).generate(),
+      input: data,
+    });
+
+    return {
+      client: result.data,
+      clientSecret: result.meta?.clientSecret as string | undefined,
+    };
+  }
+
+  /**
+   * Update an existing OAuth client
+   */
+  static async updateClient(params: {
+    clientId: string;
+    data: Partial<OAuthClientInput>;
+  }): Promise<OAuthClientInterface> {
+    return this.callApi<OAuthClientInterface>({
+      type: Modules.OAuth,
+      method: HttpMethod.PATCH,
+      endpoint: new EndpointCreator({ endpoint: "oauth/clients", id: params.clientId }).generate(),
+      input: { id: params.clientId, ...params.data },
+    });
+  }
+
+  /**
+   * Delete an OAuth client
+   */
+  static async deleteClient(params: { clientId: string }): Promise<void> {
+    await this.callApi({
+      type: Modules.OAuth,
+      method: HttpMethod.DELETE,
+      endpoint: new EndpointCreator({ endpoint: "oauth/clients", id: params.clientId }).generate(),
+    });
+  }
+
+  /**
+   * Regenerate the client secret
+   * @returns The new client secret (shown only once!)
+   */
+  static async regenerateSecret(params: { clientId: string }): Promise<{ clientSecret: string }> {
+    const result = await this.callApiWithMeta<OAuthClientInterface>({
+      type: Modules.OAuth,
+      method: HttpMethod.POST,
+      endpoint: new EndpointCreator({
+        endpoint: "oauth/clients",
+        id: params.clientId,
+        childEndpoint: "regenerate-secret",
+      }).generate(),
+    });
+
+    return {
+      clientSecret: result.meta?.clientSecret as string,
+    };
+  }
+
+  // ==========================================
+  // CONSENT FLOW
+  // ==========================================
+
+  /**
+   * Get client information for the consent screen
+   * Called when user is redirected to /oauth/authorize
+   */
+  static async getAuthorizationInfo(params: OAuthConsentRequest): Promise<OAuthConsentInfo> {
+    const endpoint = new EndpointCreator({ endpoint: "oauth/authorize/info" });
+
+    // Add query parameters
+    endpoint.addAdditionalParam("client_id", params.clientId);
+    endpoint.addAdditionalParam("redirect_uri", params.redirectUri);
+    endpoint.addAdditionalParam("scope", params.scope);
+    if (params.state) endpoint.addAdditionalParam("state", params.state);
+    if (params.codeChallenge) endpoint.addAdditionalParam("code_challenge", params.codeChallenge);
+    if (params.codeChallengeMethod) endpoint.addAdditionalParam("code_challenge_method", params.codeChallengeMethod);
+
+    return this.callApi<OAuthConsentInfo>({
+      type: Modules.OAuth,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+
+  /**
+   * Approve the authorization request
+   * @returns Redirect URL with authorization code
+   */
+  static async approveAuthorization(params: OAuthConsentRequest): Promise<{ redirectUrl: string }> {
+    const result = await this.callApiWithMeta<unknown>({
+      type: Modules.OAuth,
+      method: HttpMethod.POST,
+      endpoint: new EndpointCreator({ endpoint: "oauth/authorize/approve" }).generate(),
+      input: {
+        client_id: params.clientId,
+        redirect_uri: params.redirectUri,
+        scope: params.scope,
+        state: params.state,
+        code_challenge: params.codeChallenge,
+        code_challenge_method: params.codeChallengeMethod,
+      },
+      overridesJsonApiCreation: true,
+    });
+
+    return {
+      redirectUrl: result.meta?.redirectUrl as string,
+    };
+  }
+
+  /**
+   * Deny the authorization request
+   * @returns Redirect URL with error=access_denied
+   */
+  static async denyAuthorization(params: OAuthConsentRequest): Promise<{ redirectUrl: string }> {
+    const result = await this.callApiWithMeta<unknown>({
+      type: Modules.OAuth,
+      method: HttpMethod.POST,
+      endpoint: new EndpointCreator({ endpoint: "oauth/authorize/deny" }).generate(),
+      input: {
+        client_id: params.clientId,
+        redirect_uri: params.redirectUri,
+        state: params.state,
+      },
+      overridesJsonApiCreation: true,
+    });
+
+    return {
+      redirectUrl: result.meta?.redirectUrl as string,
+    };
+  }
+}