From 1c2f78627cc4626795eb31eb8a883dd08d801de2 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 01/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/use-user.mdx --- docs/fern/docs/pages/sdk/use-user.mdx | 49 +++++++++++++++++---------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/docs/fern/docs/pages/sdk/use-user.mdx b/docs/fern/docs/pages/sdk/use-user.mdx index f64d84cd3b..6d4b16c701 100644 --- a/docs/fern/docs/pages/sdk/use-user.mdx +++ b/docs/fern/docs/pages/sdk/use-user.mdx @@ -1,29 +1,42 @@ --- -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. +A React hook that fetches user data based on a given user ID. -## Default Usage +## Parameters -Check if the user is authenticated and display the user's name. -```jsx -import { useUser } from "@stackframe/stack"; +- `userId`: `string` - The ID of the user to fetch. -function MyComponent() { - const user = useUser(); // user can be null - if (!user) { - return
Not authenticated
; - } - return
Hello, {user.name}
; -} -``` +## Returns -## 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 +An object with the following properties: +- `user`: `User | null` - The fetched user data, or null if not yet loaded. +- `loading`: `boolean` - Indicates whether the user data is currently being fetched. +- `error`: `Error | null` - Any error that occurred during fetching, or null if no error. + +## Example + +```tsx +import { useUser } from '@stackframe/stack'; + +function UserProfile({ userId }) { + const { user, loading, error } = useUser(userId); + + if (loading) return
Loading...
; + if (error) return
Error: {error.message}
; + if (!user) return
User not found
; + + return ( +
+

{user.name}

+

Email: {user.email}

+
+ ); +} +``````jsx import { useUser } from "@stackframe/stack"; function MyComponent() { From 83f34b44dc981264170b7a87d2340eba13aec1fb Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 02/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/sign-in.mdx --- docs/fern/docs/pages/sdk/sign-in.mdx | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/docs/fern/docs/pages/sdk/sign-in.mdx b/docs/fern/docs/pages/sdk/sign-in.mdx index ed3d315661..190f1cdc85 100644 --- a/docs/fern/docs/pages/sdk/sign-in.mdx +++ b/docs/fern/docs/pages/sdk/sign-in.mdx @@ -1,14 +1,23 @@ --- -slug: sdk/sign-in +title: SignIn --- -The `SignIn` component is a pre-built UI element that displays all available sign-in methods as configured in the Stack dashboard. +# SignIn - - This component does not redirect a signed-in user. To achieve automatic redirection for signed-in users, you can use the `useUser` hook to check the user's sign-in status and perform the redirection if necessary. - - -![Sign In Component](../imgs/sign-in.png) +Renders a sign-in page component. This component can be displayed as a full page or embedded within other content. ## Props -- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`. \ No newline at end of file + +- `fullPage` (optional): `boolean` - Determines whether to render the sign-in page as a full page. Defaults to `false`. + +## Example + +```tsx +import { SignIn } from '@stackframe/stack'; + +// Render as an embedded component +const EmbeddedSignIn = () => ; + +// Render as a full page +const FullPageSignIn = () => ; +``` \ No newline at end of file From 98794bd1c487b8b514423ea9a7bcc0f3ab990ac5 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 03/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/account-settings.mdx --- docs/fern/docs/pages/sdk/account-settings.mdx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/account-settings.mdx diff --git a/docs/fern/docs/pages/sdk/account-settings.mdx b/docs/fern/docs/pages/sdk/account-settings.mdx new file mode 100644 index 0000000000..d9a9490051 --- /dev/null +++ b/docs/fern/docs/pages/sdk/account-settings.mdx @@ -0,0 +1,23 @@ +--- +title: AccountSettings +--- + +# AccountSettings + +Renders an account settings component with sections for profile, security, and general settings. + +## Props + +- `fullPage` (optional): `boolean` - Determines if the component should be rendered as a full page. Default is `false`. + +## Example + +```tsx +import { AccountSettings } from '@stackframe/stack'; + +// Render as a section + + +// Render as a full page + +``` \ No newline at end of file From 6dd71d877b357372b022bd145c1eb7b9a4373c33 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 04/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/forgot-password.mdx --- docs/fern/docs/pages/sdk/forgot-password.mdx | 29 ++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/forgot-password.mdx diff --git a/docs/fern/docs/pages/sdk/forgot-password.mdx b/docs/fern/docs/pages/sdk/forgot-password.mdx new file mode 100644 index 0000000000..692bb4b046 --- /dev/null +++ b/docs/fern/docs/pages/sdk/forgot-password.mdx @@ -0,0 +1,29 @@ +--- +title: ForgotPassword +--- + +# ForgotPassword + +A component that renders a password reset interface for users who have forgotten their password. + +## Props + +- `fullPage` (optional): `boolean` - Determines if the component should be displayed in full-page mode. Default is `false`. + +## Example + +```tsx +import { ForgotPassword } from '@stackframe/stack'; + +function App() { + return ( +
+ {/* Default usage */} + + + {/* Full-page mode */} + +
+ ); +} +``` \ No newline at end of file From 878a8d209a66a7025f22341ffec80088bb6ad895 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 05/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/use-stack-app.mdx --- docs/fern/docs/pages/sdk/use-stack-app.mdx | 42 ++++++++++++++++++---- 1 file changed, 35 insertions(+), 7 deletions(-) diff --git a/docs/fern/docs/pages/sdk/use-stack-app.mdx b/docs/fern/docs/pages/sdk/use-stack-app.mdx index 19c9965186..ec35077326 100644 --- a/docs/fern/docs/pages/sdk/use-stack-app.mdx +++ b/docs/fern/docs/pages/sdk/use-stack-app.mdx @@ -1,16 +1,44 @@ --- -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: +A custom React hook for managing a stack of items with loading state. -```jsx -import { useStackApp } from "@stackframe/stack"; +## Props + +This hook doesn't accept any props. + +## Example + +```tsx +import { useStackApp } from '@stackframe/stack'; function MyComponent() { - const stackApp = useStackApp(); - return
Sign In URL: {stackApp.urls.signIn}
; + const { items, loading, push, pop } = useStackApp(); + + const handlePush = () => { + push({ id: Date.now(), value: 'New Item' }); + }; + + const handlePop = async () => { + const poppedItem = await pop(); + console.log('Popped item:', poppedItem); + }; + + return ( +
+ + +
    + {items.map((item) => ( +
  • {item.value}
    • + ))} +
+
+ ); } ``` \ No newline at end of file From 62bbe9c9541e9f7a01e331c99a7a2442a70dc9bf Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 06/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/sign-up.mdx --- docs/fern/docs/pages/sdk/sign-up.mdx | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/docs/fern/docs/pages/sdk/sign-up.mdx b/docs/fern/docs/pages/sdk/sign-up.mdx index f1b94df678..485a3966e0 100644 --- a/docs/fern/docs/pages/sdk/sign-up.mdx +++ b/docs/fern/docs/pages/sdk/sign-up.mdx @@ -1,14 +1,23 @@ --- -slug: sdk/sign-up +title: SignUp --- -The `SignUp` component is a pre-built component that displays all the sign up methods available based on the Stack dashboard configuration. +# SignUp - - This component does not redirect a signed-in user. To achieve automatic redirection for signed-in users, you can use the `useUser` hook to check the user's sign-in status and perform the redirection if necessary. - - -![Sign Up Component](../imgs/sign-up.png) +Renders a sign-up page component. Can be displayed as a full page or embedded. ## Props -- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`. \ No newline at end of file + +- `fullPage` (optional): `boolean` - Determines whether to display the sign-up page as a full page. Defaults to `false`. + +## Example + +```tsx +import { SignUp } from '@stackframe/stack'; + +// Embedded sign-up component +const EmbeddedSignUp = () => ; + +// Full-page sign-up component +const FullPageSignUp = () => ; +``` \ No newline at end of file From 2ca6d31590509e78b3de7d8be0fc006c9133ff9b Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 07/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/password-reset.mdx --- docs/fern/docs/pages/sdk/password-reset.mdx | 34 +++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/password-reset.mdx diff --git a/docs/fern/docs/pages/sdk/password-reset.mdx b/docs/fern/docs/pages/sdk/password-reset.mdx new file mode 100644 index 0000000000..be33945d4a --- /dev/null +++ b/docs/fern/docs/pages/sdk/password-reset.mdx @@ -0,0 +1,34 @@ +--- +title: PasswordReset +--- + +# PasswordReset + +A component that handles password reset functionality, displaying different messages based on the reset link's status. + +## Props + +- `searchParams`: `Record` - An object containing search parameters, including the reset code. +- `fullPage` (optional): `boolean` - Determines if the component should be displayed in full-page mode. Default is `false`. + +## Example + +```tsx +import { PasswordReset } from '@stackframe/stack'; + +function ResetPasswordPage({ searchParams }) { + return ( + + ); +} + +// Usage without fullPage prop +function ResetPasswordSection({ searchParams }) { + return ( + + ); +} +``` \ No newline at end of file From 392e62636aee378f34b661c68e1f12a9f4d74bb1 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 08/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/user-button.mdx --- docs/fern/docs/pages/sdk/user-button.mdx | 35 ++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/user-button.mdx 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..f359f43ba4 --- /dev/null +++ b/docs/fern/docs/pages/sdk/user-button.mdx @@ -0,0 +1,35 @@ +--- +title: UserButton +--- + +# UserButton + +A React component that renders a user button 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 button menu. + +## Example + +```tsx +import { UserButton } from '@stackframe/stack'; + +function MyComponent() { + return ( + , + onClick: () => console.log('Settings clicked') + } + ]} + /> + ); +} +``` \ No newline at end of file From 4bddf9c933d532ff04396ea1dc2ef29193c45f3d Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:48 +0000 Subject: [PATCH 09/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/stack-provider.mdx --- docs/fern/docs/pages/sdk/stack-provider.mdx | 27 +++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/stack-provider.mdx diff --git a/docs/fern/docs/pages/sdk/stack-provider.mdx b/docs/fern/docs/pages/sdk/stack-provider.mdx new file mode 100644 index 0000000000..d2895911a2 --- /dev/null +++ b/docs/fern/docs/pages/sdk/stack-provider.mdx @@ -0,0 +1,27 @@ +--- +title: StackProvider +--- + +# StackProvider + +A React component that provides Stack authentication context to its children. + +## Props + +- `children`: `React.ReactNode` - The child components to be wrapped by the StackProvider. +- `app`: `StackClientApp` - The Stack client app instance. + +## Example + +```tsx +import { StackProvider } from '@stackframe/stack'; +import { app } from './stackApp'; // Your Stack app instance + +function App() { + return ( + + + + ); +} +``` \ No newline at end of file From 9416df0050f42ad560d164aea44670854202378e Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 10/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/selected-team-switcher.mdx --- .../docs/pages/sdk/selected-team-switcher.mdx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/selected-team-switcher.mdx diff --git a/docs/fern/docs/pages/sdk/selected-team-switcher.mdx b/docs/fern/docs/pages/sdk/selected-team-switcher.mdx new file mode 100644 index 0000000000..2fee1c9ad6 --- /dev/null +++ b/docs/fern/docs/pages/sdk/selected-team-switcher.mdx @@ -0,0 +1,31 @@ +--- +title: SelectedTeamSwitcher +--- + +# SelectedTeamSwitcher + +A React component that renders a dropdown for switching between teams. + +## Props + +- `urlMap` (optional): `(team: Team) => string` - A function that maps a team to a URL. +- `selectedTeam` (optional): `Team` - The currently selected team. +- `noUpdateSelectedTeam` (optional): `boolean` - If true, prevents updating the selected team in the user's settings. + +## Example + +```tsx +import { SelectedTeamSwitcher } from '@stackframe/stack'; + +function TeamSwitcherExample() { + const handleUrlMap = (team) => `/team/${team.id}`; + + return ( + + ); +} +``` \ No newline at end of file From 689722a374173b61e6a0b710e0f37e1595437e98 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 11/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/stack-theme.mdx --- docs/fern/docs/pages/sdk/stack-theme.mdx | 44 ++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/stack-theme.mdx 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..806d91b9dc --- /dev/null +++ b/docs/fern/docs/pages/sdk/stack-theme.mdx @@ -0,0 +1,44 @@ +--- +title: StackTheme +--- + +# StackTheme + +A React component that applies a theme to its children, including global CSS and color configurations. + +## Props + +- `theme` (optional): `ThemeConfig` - Custom theme configuration to override default values. + - `light`: Object containing color values for light mode. + - `dark`: Object containing color values for dark mode. + - `radius`: Value for border radius. +- `children` (optional): `React.ReactNode` - Child components to be rendered within the themed context. +- `nonce` (optional): `string` - A unique identifier for the style tag to enhance security. + +## Example + +```tsx +import { StackTheme } from '@stackframe/stack'; + +const customTheme = { + light: { + background: '#ffffff', + foreground: '#000000', + // ... other color values + }, + dark: { + background: '#000000', + foreground: '#ffffff', + // ... other color values + }, + radius: '0.5rem', +}; + +function App() { + return ( + + + + ); +} +``` \ No newline at end of file From c71fb9865eaeff4b16442833e25aafd2b2973beb Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 12/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/email-verification.mdx --- .../docs/pages/sdk/email-verification.mdx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/email-verification.mdx diff --git a/docs/fern/docs/pages/sdk/email-verification.mdx b/docs/fern/docs/pages/sdk/email-verification.mdx new file mode 100644 index 0000000000..33909e3dfb --- /dev/null +++ b/docs/fern/docs/pages/sdk/email-verification.mdx @@ -0,0 +1,32 @@ +--- +title: EmailVerification +--- + +# EmailVerification + +Renders an email verification component based on the provided verification code and display preferences. + +## Props + +- `searchParams`: `Record` (optional) - An object containing search parameters. It should include a `code` property for the verification code. + - `code`: `string` (optional) - The email verification code. Defaults to an empty string if not provided. +- `fullPage`: `boolean` (optional) - Determines whether to display the component in full-page mode. Defaults to `false`. + +## Example + +```tsx +import { EmailVerification } from '@stackframe/stack'; + +// Basic usage + + +// With search params and full-page mode + + +// Using URL search params +const searchParams = new URLSearchParams(window.location.search); + +``` \ No newline at end of file From 59010672be1e0b4fdd3ff741adab6fab355dbb63 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 13/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/credential-sign-up.mdx --- .../docs/pages/sdk/credential-sign-up.mdx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/credential-sign-up.mdx diff --git a/docs/fern/docs/pages/sdk/credential-sign-up.mdx b/docs/fern/docs/pages/sdk/credential-sign-up.mdx new file mode 100644 index 0000000000..a416bdd515 --- /dev/null +++ b/docs/fern/docs/pages/sdk/credential-sign-up.mdx @@ -0,0 +1,34 @@ +--- +title: CredentialSignUp +--- + +# CredentialSignUp + +A React component that renders a sign-up form for user registration using email and password credentials. + +## Props + +This component does not accept any props. + +## Example + +```tsx +import { CredentialSignUp } from '@stackframe/stack'; + +function SignUpPage() { + return ( +
+

Sign Up

+ +
+ ); +} +``` + +The `CredentialSignUp` component renders a form with the following fields: +- Email input +- Password input +- Repeat password input +- Sign Up button + +It handles form validation, error display, and submission automatically. Upon successful sign-up, it uses the `signUpWithCredential` method from the Stack app instance. \ No newline at end of file From 370441a83c84bc79862757fa9aeb0015749d18f6 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 14/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/oauth-button-group.mdx --- .../docs/pages/sdk/oauth-button-group.mdx | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/oauth-button-group.mdx diff --git a/docs/fern/docs/pages/sdk/oauth-button-group.mdx b/docs/fern/docs/pages/sdk/oauth-button-group.mdx new file mode 100644 index 0000000000..aa5757a32e --- /dev/null +++ b/docs/fern/docs/pages/sdk/oauth-button-group.mdx @@ -0,0 +1,41 @@ +--- +title: OAuthButtonGroup +--- + +# OAuthButtonGroup + +Renders a group of OAuth buttons for sign-in or sign-up. + +## Props + +- `type`: `'sign-in' | 'sign-up'` - Specifies whether the buttons are for sign-in or sign-up. +- `mockProject` (optional): `{ config: { oauthProviders: { id: string }[] } }` - Mock project configuration for testing purposes. + +## Example + +```tsx +import { OAuthButtonGroup } from '@stackframe/stack'; + +function SignInPage() { + return ( +
+

Sign In

+ +
+ ); +} + +// With mock project (for testing) +const mockProject = { + config: { + oauthProviders: [ + { id: 'google' }, + { id: 'github' } + ] + } +}; + +function TestSignUpPage() { + return ; +} +``` \ No newline at end of file From 67aec0f92db3c76277247162ee4e5ee362c6f4db Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 15/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/message-card.mdx --- docs/fern/docs/pages/sdk/message-card.mdx | 45 +++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/message-card.mdx diff --git a/docs/fern/docs/pages/sdk/message-card.mdx b/docs/fern/docs/pages/sdk/message-card.mdx new file mode 100644 index 0000000000..87a5cb2bbc --- /dev/null +++ b/docs/fern/docs/pages/sdk/message-card.mdx @@ -0,0 +1,45 @@ +--- +title: MessageCard +--- + +# MessageCard + +A component for displaying a card with a title, optional content, and action buttons. + +## Props + +- `title`: `string` - The title of the message card. +- `children` (optional): `React.ReactNode` - The content to be displayed in the card. +- `fullPage` (optional): `boolean` - Whether to display the card in full-page mode. Default is `false`. +- `primaryButtonText` (optional): `string` - The text for the primary action button. +- `primaryAction` (optional): `() => Promise | void` - The function to be called when the primary button is clicked. +- `secondaryButtonText` (optional): `string` - The text for the secondary action button. +- `secondaryAction` (optional): `() => Promise | void` - The function to be called when the secondary button is clicked. + +## Example + +```tsx +import { MessageCard } from '@stackframe/stack'; + +function ExampleComponent() { + const handlePrimaryAction = () => { + console.log('Primary action clicked'); + }; + + const handleSecondaryAction = () => { + console.log('Secondary action clicked'); + }; + + return ( + +

This is a message card example.

+ + ); +} +``` \ No newline at end of file From f8cf8a1c3a116547dd72724f8ce7f2f020f37914 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 16/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/auth-page.mdx --- docs/fern/docs/pages/sdk/auth-page.mdx | 54 ++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/auth-page.mdx diff --git a/docs/fern/docs/pages/sdk/auth-page.mdx b/docs/fern/docs/pages/sdk/auth-page.mdx new file mode 100644 index 0000000000..e7a8a44453 --- /dev/null +++ b/docs/fern/docs/pages/sdk/auth-page.mdx @@ -0,0 +1,54 @@ +--- +title: AuthPage +--- + +# AuthPage + +Renders an authentication page for sign-in or sign-up functionality. + +## Props + +- `fullPage` (optional): `boolean` - Determines if the component should be rendered in full-page mode. Default is `false`. +- `type`: `'sign-in' | 'sign-up'` - Specifies whether the page is for sign-in or sign-up. +- `automaticRedirect` (optional): `boolean` - If `true`, automatically redirects the user after successful authentication. +- `mockProject` (optional): `object` - Mocks the project configuration for testing purposes. + - `config`: `object` + - `signUpEnabled`: `boolean` + - `credentialEnabled`: `boolean` + - `magicLinkEnabled`: `boolean` + - `oauthProviders`: `Array<{ id: string }>` + +## Example + +```tsx +import { AuthPage } from '@stackframe/stack'; + +function MyAuthPage() { + return ( + + ); +} + +// With mock project for testing +function TestAuthPage() { + const mockProject = { + config: { + signUpEnabled: true, + credentialEnabled: true, + magicLinkEnabled: false, + oauthProviders: [{ id: 'google' }], + }, + }; + + return ( + + ); +} +``` \ No newline at end of file From 515ccc99168bfeb81e6494cf1537bdcb2eacc66a Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 17/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/magic-link-sign-in.mdx --- .../docs/pages/sdk/magic-link-sign-in.mdx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/magic-link-sign-in.mdx diff --git a/docs/fern/docs/pages/sdk/magic-link-sign-in.mdx b/docs/fern/docs/pages/sdk/magic-link-sign-in.mdx new file mode 100644 index 0000000000..7537dafe15 --- /dev/null +++ b/docs/fern/docs/pages/sdk/magic-link-sign-in.mdx @@ -0,0 +1,28 @@ +--- +title: MagicLinkSignIn +--- + +# MagicLinkSignIn + +A React component that renders a form for magic link sign-in functionality. + +## Props + +This component does not accept any props. + +## Example + +```tsx +import { MagicLinkSignIn } from '@stackframe/stack'; + +function SignInPage() { + return ( +
+

Sign In

+ +
+ ); +} +``` + +The `MagicLinkSignIn` component renders a form with an email input field and a submit button. When the form is submitted, it sends a magic link to the provided email address. The component handles form validation, submission, and displays appropriate feedback to the user. \ No newline at end of file From 33360083c9d0e31afbcc09ab6122b50dd851b29e Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 18/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/oauth-button.mdx --- docs/fern/docs/pages/sdk/oauth-button.mdx | 27 +++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/oauth-button.mdx diff --git a/docs/fern/docs/pages/sdk/oauth-button.mdx b/docs/fern/docs/pages/sdk/oauth-button.mdx new file mode 100644 index 0000000000..19a1d663b5 --- /dev/null +++ b/docs/fern/docs/pages/sdk/oauth-button.mdx @@ -0,0 +1,27 @@ +--- +title: OAuthButton +--- + +# OAuthButton + +Renders a customized OAuth button for different providers. + +## Props + +- `provider`: `string` - The OAuth provider (e.g., 'google', 'github', 'facebook', 'microsoft', 'spotify'). +- `type`: `'sign-in' | 'sign-up'` - Determines whether the button is for sign-in or sign-up. + +## Example + +```tsx +import { OAuthButton } from '@stackframe/stack'; + +function LoginPage() { + return ( +
+ + +
+ ); +} +``` \ No newline at end of file From 9c881149bc5c897f362f13d5ef63aebcfd3130b3 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 19/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/credential-sign-in.mdx --- .../docs/pages/sdk/credential-sign-in.mdx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/fern/docs/pages/sdk/credential-sign-in.mdx diff --git a/docs/fern/docs/pages/sdk/credential-sign-in.mdx b/docs/fern/docs/pages/sdk/credential-sign-in.mdx new file mode 100644 index 0000000000..b2fb86f025 --- /dev/null +++ b/docs/fern/docs/pages/sdk/credential-sign-in.mdx @@ -0,0 +1,34 @@ +--- +title: CredentialSignIn +--- + +# CredentialSignIn + +A component that renders a sign-in form using email and password credentials. + +## Props + +This component does not accept any props. + +## Example + +```tsx +import { CredentialSignIn } from '@stackframe/stack'; + +function SignInPage() { + return ( +
+

Sign In

+ +
+ ); +} +``` + +The `CredentialSignIn` component renders a form with the following elements: +- Email input field +- Password input field +- 'Forgot password?' link +- 'Sign In' submit button + +It handles form validation, submission, and displays error messages if the sign-in fails. \ No newline at end of file From 63f39aaca5b4a2b175f3a2e31ce2ac412f7160a5 Mon Sep 17 00:00:00 2001 From: "patched.codes[bot]" <298395+patched.codes[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 10:17:49 +0000 Subject: [PATCH 20/20] Patched /tmp/tmp_ww_t69h/docs/fern/docs/pages/sdk/stack-handler.mdx --- docs/fern/docs/pages/sdk/stack-handler.mdx | 35 ++++++++++++++++------ 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/docs/fern/docs/pages/sdk/stack-handler.mdx b/docs/fern/docs/pages/sdk/stack-handler.mdx index 639b3af1a0..71ee82ab43 100644 --- a/docs/fern/docs/pages/sdk/stack-handler.mdx +++ b/docs/fern/docs/pages/sdk/stack-handler.mdx @@ -1,16 +1,33 @@ --- -slug: sdk/stack-handler +title: StackHandler --- -The `StackHandler` component is designed to manage navigation for all pages under the `/handler/*` route. It serves as a wrapper component that determines which page to display based on the URL path and configurations in the `StackApp`. +# StackHandler - - By default, this component will redirect users to appropriate pages. For example, if a user is not signed in and tries to access the account settings page, it will redirect the user to the sign-in page. - +Handles routing and rendering for various authentication and user management pages in a Stack application. ## Props -- `app` (StackServerApp): The component relies on the configurations from `app` to determine the correct page URLs and handle redirections. -- `params` (object): This should be passed down from the parent component to relay any URL parameters. -- `searchParams` (object): This should be passed down from the parent component to relay any search parameters from the URL. -- `fullPage` (boolean): Determines whether the component should occupy the full page. The default value is `false`. \ No newline at end of file +- `app`: `StackServerApp` - The Stack server application instance. +- `params` (optional): `{ stack?: string[] }` - URL parameters, where `stack` is an array of path segments. +- `searchParams` (optional): `Record` - URL search parameters. +- `fullPage` (optional): `boolean` - Whether to render the component in full-page mode. Defaults to `false`. + +## Example + +```tsx +import { StackHandler } from '@stackframe/stack'; + +export default async function Page({ params, searchParams }) { + const app = await initializeApp(); + + return ( + + ); +} +``` \ No newline at end of file