stack/docs/src/components/api/api-page-wrapper.tsx
Madison a5734defba
Adds oauth providers, fixes bottom page navigation with mobile suppor… (#726)
<!--

Fixes generation script, adds new oauth docs pages, fixes bottom
navigation, adds mobile support, sidebar changes.

-->

<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> This PR adds OAuth provider documentation, enhances mobile navigation,
and updates Python-specific documentation for Stack Auth.
> 
>   - **OAuth Providers**:
> - Adds documentation for GitHub, Google, Facebook, Microsoft, Spotify,
Discord, GitLab, Apple, Bitbucket, LinkedIn, and X (Twitter) in
`docs/templates/concepts/auth-providers/`.
> - Updates `docs/docs-platform.yml` to include new OAuth provider
pages.
>   - **Mobile Support**:
> - Enhances bottom navigation for mobile devices in
`docs/src/app/(home)/layout.tsx` and `docs/src/app/api/layout.tsx`.
> - Introduces `AIChatDrawer` and `AuthPanel` components for
mobile-friendly interactions.
>   - **Documentation Enhancements**:
> - Adds Python-specific documentation for user authentication and team
management in `docs/templates-python/concepts/`.
> - Updates `docs/templates-python/meta.json` to include new Python
documentation pages.
> - Refines search functionality and UI components for better user
experience.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for bf759151d8. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
2025-07-08 19:51:24 -07:00

91 lines
2.9 KiB
TypeScript

'use client';
import { createContext, ReactNode, useContext, useState } from 'react';
import { useSidebar } from '../layouts/sidebar-context';
// Stack Auth required headers
const STACK_AUTH_HEADERS = {
'Content-Type': 'application/json',
'X-Stack-Access-Type': '', // client or server
'X-Stack-Project-Id': '', // project UUID
'X-Stack-Publishable-Client-Key': '', // pck_...
'X-Stack-Secret-Server-Key': '', // ssk_...
'X-Stack-Access-Token': '', // user's access token
};
// Type for API error objects
type APIError = {
message?: string,
error?: string,
details?: string,
code?: string | number,
[key: string]: unknown,
}
// Context for sharing headers across all API components on the page
type APIPageContextType = {
sharedHeaders: Record<string, string>,
updateSharedHeaders: (headers: Record<string, string>) => void,
reportError: (status: number, error: APIError) => void,
lastError: { status: number, error: APIError } | null,
highlightMissingHeaders: boolean,
}
const APIPageContext = createContext<APIPageContextType | null>(null);
// Hook to access API page context - returns null when not used within APIPageWrapper
export function useAPIPageContext() {
const context = useContext(APIPageContext);
// Return null instead of throwing error when context is not available
// This makes it safe to use in components that might be rendered outside of APIPageContextProvider
return context;
}
type APIPageWrapperProps = {
children: ReactNode,
}
export function APIPageWrapper({ children }: APIPageWrapperProps) {
const sidebarContext = useSidebar();
const [sharedHeaders, setSharedHeaders] = useState<Record<string, string>>(STACK_AUTH_HEADERS);
const [lastError, setLastError] = useState<{ status: number, error: APIError } | null>(null);
const [highlightMissingHeaders, setHighlightMissingHeaders] = useState(false);
// Use default functions if sidebar context is not available
const { isAuthOpen, toggleAuth } = sidebarContext || {
isAuthOpen: false,
toggleAuth: () => {}
};
const updateSharedHeaders = (headers: Record<string, string>) => {
setSharedHeaders(headers);
// Clear error highlighting when headers are updated
if (highlightMissingHeaders) {
setHighlightMissingHeaders(false);
}
};
const reportError = (status: number, error: APIError) => {
setLastError({ status, error });
// Auto-open panel and highlight missing headers on 400/401/403 errors
if ([400, 401, 403].includes(status)) {
if (!isAuthOpen) {
toggleAuth();
}
setHighlightMissingHeaders(true);
// Auto-hide highlighting after 10 seconds
setTimeout(() => {
setHighlightMissingHeaders(false);
}, 10000);
}
};
return (
<APIPageContext.Provider value={{ sharedHeaders, updateSharedHeaders, reportError, lastError, highlightMissingHeaders }}>
{children}
</APIPageContext.Provider>
);
}