| null>`
+
+- **`users`**: AsyncStoreProperty for managing users.
+
+- **`team`**: AsyncStoreProperty for managing a single team.
+
+- **`teams`**: AsyncStoreProperty for managing multiple teams.
+
+## Example
+
+```tsx
+import { StackServerApp } from '@stackframe/stack';
+
+const app: StackServerApp = {
+ async createTeam(data) {
+ // Implementation
+ },
+ async getUser(options) {
+ // Implementation
+ },
+ async createUser(options) {
+ // Implementation
+ },
+ useUser(options) {
+ // Implementation
+ },
+ // ... other properties and methods
+};
+
+// Using the app
+const newTeam = await app.createTeam({ name: 'My Team' });
+const currentUser = await app.getUser();
+```
\ No newline at end of file
diff --git a/docs/fern/docs/pages/sdk/stack-theme.mdx b/docs/fern/docs/pages/sdk/stack-theme.mdx
new file mode 100644
index 0000000000..bea920ad0c
--- /dev/null
+++ b/docs/fern/docs/pages/sdk/stack-theme.mdx
@@ -0,0 +1,44 @@
+---
+title: StackTheme
+---
+
+# StackTheme
+
+A component to apply a custom theme to your Stack application.
+
+## Props
+
+- `theme` (optional): `ThemeConfig` - Custom theme configuration.
+ - `light`: Object containing light theme colors.
+ - `dark`: Object containing dark theme colors.
+ - `radius`: Custom border radius value.
+- `children`: `React.ReactNode` - Child components to be wrapped by the theme.
+- `nonce` (optional): `string` - A nonce for the inline script and style tags.
+
+## Example
+
+```tsx
+import { StackTheme } from '@stackframe/stack';
+
+function App() {
+ const customTheme = {
+ light: {
+ background: '#ffffff',
+ foreground: '#000000',
+ // ... other light theme colors
+ },
+ dark: {
+ background: '#000000',
+ foreground: '#ffffff',
+ // ... other dark theme colors
+ },
+ radius: '0.5rem',
+ };
+
+ return (
+
+ {/* Your app components */}
+
+ );
+}
+```
\ No newline at end of file
diff --git a/docs/fern/docs/pages/sdk/use-stack-app.mdx b/docs/fern/docs/pages/sdk/use-stack-app.mdx
index 19c9965186..d97eff5dd2 100644
--- a/docs/fern/docs/pages/sdk/use-stack-app.mdx
+++ b/docs/fern/docs/pages/sdk/use-stack-app.mdx
@@ -1,16 +1,42 @@
---
-slug: sdk/use-stack-app
+title: useStackApp
---
-The `useStackApp` hook returns the `StackClientApp` object that you can use to interact with the Stack API. If you want to learn more about the `StackClientApp` object, check out the [App](./stack-app.mdx) documentation.
+# useStackApp
-Example:
+Returns the StackServerApp instance for the current project. Must be used within a StackProvider.
-```jsx
-import { useStackApp } from "@stackframe/stack";
+## Parameters
+
+- `options` (optional): An object with the following properties:
+ - `projectIdMustMatch` (optional): `ProjectId` - If provided, ensures the returned app matches this project ID.
+
+## Example
+
+```tsx
+import { useStackApp, StackServerApp } from '@stackframe/stack';
+
+// Initialize the StackServerApp
+export const stackServerApp = new StackServerApp({
+ tokenStore: "nextjs-cookie",
+});
function MyComponent() {
- const stackApp = useStackApp();
- return Sign In URL: {stackApp.urls.signIn}
;
+ // Basic usage
+ const app = useStackApp();
+
+ // With project ID check
+ const app = useStackApp({ projectIdMustMatch: 'my-project-id' });
+
+ // Using the app
+ const user = app.auth.useUser();
+ const project = app.projects.useProject();
+
+ // Redirect example
+ const handleSignOut = () => {
+ app.auth.signOut();
+ };
+
+ // ... rest of your component
}
```
\ No newline at end of file
diff --git a/docs/fern/docs/pages/sdk/use-user.mdx b/docs/fern/docs/pages/sdk/use-user.mdx
index f64d84cd3b..8a6ffaeafb 100644
--- a/docs/fern/docs/pages/sdk/use-user.mdx
+++ b/docs/fern/docs/pages/sdk/use-user.mdx
@@ -1,46 +1,45 @@
---
-slug: sdk/use-user
+title: useUser
---
-`useUser` is a hook that returns the user object if the user is authenticated; otherwise, it returns `null` by default. However, if you pass in `{ or: "redirect" }` or `{ or: "throw" }` as an option, it will redirect to the login page or throw an error respectively when the user is not authenticated.
+# useUser
-If you want to learn more about the `User` object, check out the [User](./current-user.mdx) documentation.
+Retrieves the current user information based on the provided options.
-## Default Usage
+## Parameters
-Check if the user is authenticated and display the user's name.
-```jsx
-import { useUser } from "@stackframe/stack";
+- `options` (optional): `GetUserOptions` - Configuration options for user retrieval.
+ - `or`: `'redirect' | 'throw' | 'return-null'` - Specifies behavior when user is not found.
+ - `tokenStore`: `'cookie' | 'nextjs-cookie' | 'memory' | { headers: { get: {} } } | { accessToken: string, refreshToken: string }` - Defines how to store authentication tokens.
+ - `projectIdMustMatch`: `string` - Ensures the project ID matches the specified value.
-function MyComponent() {
- const user = useUser(); // user can be null
- if (!user) {
- return Not authenticated
;
- }
- return Hello, {user.name}
;
-}
-```
+## Example
-## Redirect when not authenticated
-By passing `{ or: "redirect" }` to the hook, it will redirect to the login page if the user is not authenticated. You can configure the login page in the StackApp component.
-```jsx
-import { useUser } from "@stackframe/stack";
+```tsx
+import { useUser } from '@stackframe/stack';
-function MyComponent() {
- const user = useUser({ or: "redirect" }); // user is garanteed to be non-null
- return Hello, {user.name}
;
-}
-```
+// Basic usage
+const user = useUser();
-The same hook can also be used to protect a page. (You might also want to check out the server-side version [here](../getting-started/users.mdx))
-```jsx
-import { useUser } from "@stackframe/stack";
+// With options
+const internalUser = useUser({
+ or: 'throw',
+ tokenStore: 'cookie',
+ projectIdMustMatch: 'internal'
+});
+
+// Accessing user properties
+if (user) {
+ console.log(user.displayName);
+ console.log(user.primaryEmail);
+}
-function MyProtectedPage() {
- useUser({ or: "redirect" });
- return You can only see this if you are authenticated
;
+// Using user methods
+if (internalUser) {
+ await internalUser.setDisplayName('New Name');
+ const team = await internalUser.createTeam({ name: 'New Team' });
}
-```
+``````
## Throw an error when not authenticated
diff --git a/docs/fern/docs/pages/sdk/user-button.mdx b/docs/fern/docs/pages/sdk/user-button.mdx
new file mode 100644
index 0000000000..86ec464ccc
--- /dev/null
+++ b/docs/fern/docs/pages/sdk/user-button.mdx
@@ -0,0 +1,35 @@
+---
+title: UserButton
+---
+
+# UserButton
+
+Renders a user button component with customizable options.
+
+## Props
+
+- `showUserInfo`: `boolean` - Determines whether to display user information.
+- `colorModeToggle`: `object` - Configuration for the color mode toggle.
+- `extraItems`: `Array<{ text: string, icon: React.ReactNode, onClick: Function }>` - Additional items to be displayed in the user menu.
+
+## Example
+
+```tsx
+import { UserButton } from '@stackframe/stack';
+
+function MyComponent() {
+ return (
+ ,
+ onClick: () => console.log('Settings clicked')
+ }
+ ]}
+ />
+ );
+}
+```
\ No newline at end of file