diff --git a/docs/fern/docs.yml b/docs/fern/docs.yml index 6fba04437..5a019bea3 100644 --- a/docs/fern/docs.yml +++ b/docs/fern/docs.yml @@ -77,16 +77,29 @@ navigation: path: ./docs/pages/customization/page-examples/sign-up.mdx - tab: sdk layout: - - section: Next.js SDK + - section: Classes + contents: + - page: CurrentUser + path: ./docs/pages/sdk/current-user.mdx + - page: StackApp + path: ./docs/pages/sdk/stack-app.mdx + - section: Hooks contents: - - page: User - path: ./docs/pages/sdk/user.mdx - - page: useUser - path: ./docs/pages/sdk/use-user.mdx - - page: App - path: ./docs/pages/sdk/app.mdx - page: useStackApp path: ./docs/pages/sdk/use-stack-app.mdx + - page: useUser + path: ./docs/pages/sdk/use-user.mdx + - section: Components + contents: + - page: StackHandler + path: ./docs/pages/sdk/stack-handler.mdx + - page: SignIn + path: ./docs/pages/sdk/sign-in.mdx + - page: SignUp + path: ./docs/pages/sdk/sign-up.mdx + - page: SignOut + path: ./docs/pages/sdk/sign-out.mdx + - tab: api layout: - api: Client API Reference diff --git a/docs/fern/docs/pages/concepts/teams.mdx b/docs/fern/docs/pages/concepts/teams.mdx index cac44135b..ceefba98d 100644 --- a/docs/fern/docs/pages/concepts/teams.mdx +++ b/docs/fern/docs/pages/concepts/teams.mdx @@ -9,7 +9,7 @@ To assign users to a default team upon sign-up, activate the corresponding toggl ## Creating a Team -To create a team, use the `createTeam` method on the `stackServerApp`. Here’s an example: +To create a team, use the `createTeam` method on the `stackServerApp`. Here's an example: ```tsx title="Create a Team" const team = await stackServerApp.createTeam({ diff --git a/docs/fern/docs/pages/getting-started/overview.mdx b/docs/fern/docs/pages/getting-started/overview.mdx index 305e2e0d0..e1b61648b 100644 --- a/docs/fern/docs/pages/getting-started/overview.mdx +++ b/docs/fern/docs/pages/getting-started/overview.mdx @@ -69,7 +69,7 @@ The user data will update in both the frontend and backend automatically. The up You also get pages and components for the authentication flow out-of-the-box. This is the sign-in page you get without writing a single line of code: -![Stack sign up page](../imgs/signup-page.png) +![Stack sign in page](../imgs/sign-in.png) Notice, there's no branding on our components. We believe we should grow by building the best product, not by forcing our brand onto your users. This means we **rely on you to spread the word about Stack**. If you like what you’re reading, please take a moment to tell one or two of your friends about us. diff --git a/docs/fern/docs/pages/getting-started/production.mdx b/docs/fern/docs/pages/getting-started/production.mdx index 2f8499513..30034685a 100644 --- a/docs/fern/docs/pages/getting-started/production.mdx +++ b/docs/fern/docs/pages/getting-started/production.mdx @@ -11,7 +11,7 @@ By default, Stack allows all localhost paths as valid callback URLs. This is con Follow these steps when you're ready to push your application to production: -1. **Add Your Domain**: Navigate to the `Domain & Handlers` tab in the Stack dashboard. If you haven't configured your handler, you can leave it as the default. (Learn more about handlers [here](../sdk/app.mdx)). +1. **Add Your Domain**: Navigate to the `Domain & Handlers` tab in the Stack dashboard. If you haven't configured your handler, you can leave it as the default. (Learn more about handlers [here](../sdk/stack-app.mdx)). 2. **Disable Localhost Callbacks**: For enhanced security, disable the `Allow all localhost callbacks for development` option. diff --git a/docs/fern/docs/pages/getting-started/setup.mdx b/docs/fern/docs/pages/getting-started/setup.mdx index 74118280f..702af4c71 100644 --- a/docs/fern/docs/pages/getting-started/setup.mdx +++ b/docs/fern/docs/pages/getting-started/setup.mdx @@ -64,7 +64,7 @@ npm install @stackframe/stack This will read the environment variables automatically and create a server app that you can later use to access Stack from your Next.js server. - Check out the [`StackServerApp` documentation](../sdk/app.mdx) to learn more about its other options. + Check out the [`StackServerApp` documentation](../sdk/stack-app.mdx) to learn more about its other options. 3. Create a new file in `app/handler/[...stack]/page.tsx` and paste the following code: @@ -115,9 +115,9 @@ npm install @stackframe/stack -That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup), you will see the Stack sign-up page. +That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signin](http://localhost:3000/handler/signin), you will see the Stack sign-up page. -![Stack sign up page](../imgs/signup-page.png) +![Stack sign in page](../imgs/sign-in.png) After signing up/in, you will be redirected back to the home page. We will show you how to add useful information to it in the next section. You can also check out the [http://localhost:3000/handler/account-settings](http://localhost:3000/handler/account-settings) page which looks like this: diff --git a/docs/fern/docs/pages/getting-started/users.mdx b/docs/fern/docs/pages/getting-started/users.mdx index 16a2ec033..bbf2af992 100644 --- a/docs/fern/docs/pages/getting-started/users.mdx +++ b/docs/fern/docs/pages/getting-started/users.mdx @@ -196,7 +196,7 @@ Note the `UserButton` is a component that you normally put in the top right corn You will now be able to see the new profile page on [http://localhost:3000/profile](http://localhost:3000/profile). -To see more examples of how to use the `User` object, check out the [User API documentation](../sdk/user.mdx). +To see more examples of how to use the `User` object, check out the [User API documentation](../sdk/current-user.mdx). ## Custom User Information diff --git a/docs/fern/docs/pages/imgs/sign-in.png b/docs/fern/docs/pages/imgs/sign-in.png new file mode 100644 index 000000000..ba918b329 Binary files /dev/null and b/docs/fern/docs/pages/imgs/sign-in.png differ diff --git a/docs/fern/docs/pages/imgs/sign-up.png b/docs/fern/docs/pages/imgs/sign-up.png new file mode 100644 index 000000000..2b26e801e Binary files /dev/null and b/docs/fern/docs/pages/imgs/sign-up.png differ diff --git a/docs/fern/docs/pages/sdk/user.mdx b/docs/fern/docs/pages/sdk/current-user.mdx similarity index 72% rename from docs/fern/docs/pages/sdk/user.mdx rename to docs/fern/docs/pages/sdk/current-user.mdx index ff2e84d22..cafe790c8 100644 --- a/docs/fern/docs/pages/sdk/user.mdx +++ b/docs/fern/docs/pages/sdk/current-user.mdx @@ -12,16 +12,16 @@ You can call `useUser()` or `stackServerApp.getUser()` to get the `CurrentUser` ### Attributes -- `id`: The user ID. This is the unique identifier of the user. -- `displayName`: The display name of the user. Can be changed by the user. -- `primayEmail`: The primary email of the user. Note: this is not unique. -- `primaryEmailVerified`: Whether the primary email is verified. -- `profileImageUrl`: The profile image URL of the user. -- `signedUpAt`: The Date when the user signed up. -- `authWithEmail`: Whether the user has an email authentication method (magic link or password). -- `hasPassword`: Whether the user has a password set. -- `oauthProviders`: The list of OAuth provider ID s the user has connected. -- `clientMetadata`: The JSON metadata that is visible on the client side. Note that this should not contain information that should be kept private on the server side. +- `id` (string): The user ID. This is the unique identifier of the user. +- `displayName` (string | null): The display name of the user. Can be changed by the user. +- `primayEmail` (string | null): The primary email of the user. Note: this is not unique. +- `primaryEmailVerified` (boolean): Whether the primary email is verified. +- `profileImageUrl` (string | null): The profile image URL of the user. +- `signedUpAt` (Date): The Date when the user signed up. +- `authWithEmail` (boolean): Whether the user has an email authentication method (magic link or password). +- `hasPassword` (boolean): Whether the user has a password set. +- `oauthProviders` (string[]): The list of OAuth provider ID s the user has connected. +- `clientMetadata` (object): The JSON metadata that is visible on the client side. Note that this should not contain information that should be kept private on the server side. ### Methods diff --git a/docs/fern/docs/pages/sdk/sign-in.mdx b/docs/fern/docs/pages/sdk/sign-in.mdx new file mode 100644 index 000000000..66b615eff --- /dev/null +++ b/docs/fern/docs/pages/sdk/sign-in.mdx @@ -0,0 +1,14 @@ +--- +slug: sign-in +--- + +The `SignIn` component is a pre-built UI element that displays all available sign-in methods as configured in the Stack dashboard. + + + 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) + +## Props +- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`. \ No newline at end of file diff --git a/docs/fern/docs/pages/sdk/sign-out.mdx b/docs/fern/docs/pages/sdk/sign-out.mdx new file mode 100644 index 000000000..c6dd69ffb --- /dev/null +++ b/docs/fern/docs/pages/sdk/sign-out.mdx @@ -0,0 +1,12 @@ +--- +slug: sign-out +--- + +The `SignOut` component automatically signs out the current user when rendered. It can serve as a dedicated sign-out page, ensuring users are signed out as soon as they navigate to it. + + + This component does not redirect a not signed-in user. To achieve automatic redirection for not signed-in users, you can use the `useUser` hook to check the user's sign-in status and perform the redirection if necessary. + + +## Props +- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`. \ No newline at end of file diff --git a/docs/fern/docs/pages/sdk/sign-up.mdx b/docs/fern/docs/pages/sdk/sign-up.mdx new file mode 100644 index 000000000..5197486c8 --- /dev/null +++ b/docs/fern/docs/pages/sdk/sign-up.mdx @@ -0,0 +1,14 @@ +--- +slug: sign-up +--- + +The `SignUp` component is a pre-built component that displays all the sign up methods available based on the Stack dashboard configuration. + + + 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) + +## Props +- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`. \ No newline at end of file diff --git a/docs/fern/docs/pages/sdk/app.mdx b/docs/fern/docs/pages/sdk/stack-app.mdx similarity index 99% rename from docs/fern/docs/pages/sdk/app.mdx rename to docs/fern/docs/pages/sdk/stack-app.mdx index b6885ea61..b6a972d17 100644 --- a/docs/fern/docs/pages/sdk/app.mdx +++ b/docs/fern/docs/pages/sdk/stack-app.mdx @@ -1,5 +1,5 @@ --- -slug: app +slug: stack-app --- ## `StackServerApp` and `StackClientApp` diff --git a/docs/fern/docs/pages/sdk/stack-handler.mdx b/docs/fern/docs/pages/sdk/stack-handler.mdx new file mode 100644 index 000000000..696196472 --- /dev/null +++ b/docs/fern/docs/pages/sdk/stack-handler.mdx @@ -0,0 +1,16 @@ +--- +slug: stack-handler +--- + +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`. + + + 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. + + +## 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 diff --git a/docs/fern/docs/pages/sdk/use-stack-app.mdx b/docs/fern/docs/pages/sdk/use-stack-app.mdx index 6c54dbead..83046246d 100644 --- a/docs/fern/docs/pages/sdk/use-stack-app.mdx +++ b/docs/fern/docs/pages/sdk/use-stack-app.mdx @@ -2,7 +2,7 @@ slug: use-stack-app --- -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](./app.mdx) documentation. +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. Example: diff --git a/docs/fern/docs/pages/sdk/use-user.mdx b/docs/fern/docs/pages/sdk/use-user.mdx index cd754c500..1d1d33ed8 100644 --- a/docs/fern/docs/pages/sdk/use-user.mdx +++ b/docs/fern/docs/pages/sdk/use-user.mdx @@ -4,7 +4,7 @@ slug: use-user `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. -If you want to learn more about the `User` object, check out the [User](./user.mdx) documentation. +If you want to learn more about the `User` object, check out the [User](./current-user.mdx) documentation. ## Default Usage