# Source: https://neon.com/llms/neon-auth-components-stack-provider.txt

# <StackProvider />

> The `<StackProvider />` documentation outlines the implementation and usage of the StackProvider component in Neon's authentication system, detailing its role in managing and organizing authentication-related components within the application stack.

## Source

- [<StackProvider /> HTML](https://neon.com/docs/neon-auth/components/stack-provider): The original HTML version of this documentation

A React component that provides Neon Auth context to its children.

For detailed usage instructions, see the manual section of the [setup guide](https://neon.com/docs/neon-auth).

## Props

- `children`: `React.ReactNode` — The child components to be wrapped by the StackProvider.
- `app`: `StackClientApp | StackServerApp` — The Neon Auth app instance to be used.
- `lang` (optional): `"en-US" | "de-DE" | "es-419" | "es-ES" | "fr-CA" | "fr-FR" | "it-IT" | "pt-BR" | "pt-PT"` — The language to be used for translations.
- `translationOverrides` (optional): `Record<string, string>` — A mapping of English translations to translated equivalents. These will take priority over the translations from the language specified in the `lang` property. Note that the keys are case-sensitive. You can find a full list of supported strings [on GitHub](https://github.com/stack-auth/stack-auth/blob/dev/packages/template/src/generated/quetzal-translations.ts).

## Example

```tsx
import { StackProvider } from '@stackframe/stack';
import { stackServerApp } from '@/stack/server';

function App() {
  return (
    <StackProvider
      app={stackServerApp}
      lang="de-DE"
      translationOverrides={{
        'Sign in': 'Einloggen',
        'Sign In': 'Einloggen',
      }}
    >
      {/* Your app content */}
    </StackProvider>
  );
}
```