diff --git a/docs/fern/docs/pages-template/customization/custom-pages.mdx b/docs/fern/docs/pages-template/customization/custom-pages.mdx index 113e301d9..47cbd64c0 100644 --- a/docs/fern/docs/pages-template/customization/custom-pages.mdx +++ b/docs/fern/docs/pages-template/customization/custom-pages.mdx @@ -2,9 +2,9 @@ slug: customization/custom-pages --- -If you want to have full control over the layout and logic flow, you can build your own pages using our built-in components or low-level functions. +Custom pages allow you to take full control over the layout and logic flow of authentication pages in your application. Instead of using the default pages provided by Stack Auth, you can build your own using our built-in components or low-level functions. -By default, `StackHandler` creates all pages you need, however, you can replace them with your own pages. +By default, `StackHandler` creates all authentication pages you need, however, you can replace them with your own custom implementations for a more tailored user experience. ## Simple Example @@ -35,12 +35,14 @@ export const stackServerApp = new StackServerApp({ }); ``` -You are now all set! If you visit the `/signin` page, you should see your custom sign in page. If your user visits a protected page or the old `/handler/sign-in` URL, they will be redirected to your new sign-in page. +You are now all set! If you visit the `/signin` page, you should see your custom sign in page. When users attempt to access a protected page or navigate to the default `/handler/sign-in` URL, they will automatically be redirected to your new custom sign-in page. For more examples, please refer to the [Examples](../customization/custom-pages.mdx). -## From scratch +## Building From Scratch + +While the simple approach above lets you customize the layout while using Stack's pre-built components, sometimes you need complete control over both the UI and authentication logic. We also provide the low-level functions powering our components, so that you can build your own logic. For example, to build a custom OAuth sign-in button, create a file at `app/signin/page.tsx`: @@ -55,7 +57,7 @@ export default function CustomOAuthSignIn() {

My Custom Sign In page

) } diff --git a/docs/fern/docs/pages-template/customization/internationalization.mdx b/docs/fern/docs/pages-template/customization/internationalization.mdx index a9d31d083..7d36ed8d4 100644 --- a/docs/fern/docs/pages-template/customization/internationalization.mdx +++ b/docs/fern/docs/pages-template/customization/internationalization.mdx @@ -2,6 +2,8 @@ slug: customization/internationalization --- +Internationalization (i18n) allows your application to support multiple languages, making it accessible to users worldwide. Stack Auth provides built-in internationalization support for its components, enabling you to offer a localized authentication experience with minimal effort. + ## Setup Internationalization with Stack is very straightforward. Simply pass the `lang` prop to the `StackProvider` component, and all the pages will be translated to the specified language. @@ -16,7 +18,7 @@ Internationalization with Stack is very straightforward. Simply pass the `lang` By default, if no language is provided, it will be set to `en-US`. -You can choose which languages to use by employing your own methods, such as storing the language in `localStorage` or using the user's browser language. +You can choose which languages to use by employing your own methods, such as storing the language in `localStorage` or using the user's browser language. ## Supported languages @@ -28,4 +30,4 @@ You can choose which languages to use by employing your own methods, such as sto - `fr-FR`: French (France) - `it-IT`: Italian (Italy) - `pt-BR`: Portuguese (Brazil) -- `pt-PT`: Portuguese (Portugal) \ No newline at end of file +- `pt-PT`: Portuguese (Portugal) diff --git a/docs/fern/docs/pages-template/customization/page-examples/forgot-password.mdx b/docs/fern/docs/pages-template/customization/page-examples/forgot-password.mdx index 8531ac257..ffa8bc59c 100644 --- a/docs/fern/docs/pages-template/customization/page-examples/forgot-password.mdx +++ b/docs/fern/docs/pages-template/customization/page-examples/forgot-password.mdx @@ -2,20 +2,44 @@ slug: customization/page-examples/forgot-password --- +This page provides examples of how to create custom "forgot password" pages for your application. The forgot password functionality allows users to request a password reset email when they can't remember their current password. + ## Custom page with `ForgotPassword` component +The `ForgotPassword` component provides a complete form for users to request a password reset email. When a user submits their email, Stack Auth will send them an email with a link to reset their password. + ```tsx 'use client'; import { ForgotPassword } from "@stackframe/stack"; -export default function DefaultPasswordReset() { +export default function DefaultForgotPassword() { return ; } ``` +## Integration with Application Routing + +To integrate the forgot password page with your application's routing: + +1. Create a route for your forgot password page (e.g., `/forgot-password`) +2. Configure Stack Auth to use your custom route in your `stack.ts` file: + +```tsx +export const stackServerApp = new StackServerApp({ + // ... + urls: { + forgotPassword: '/forgot-password', + } +}); +``` + +This ensures that links to the forgot password page will direct users to your custom implementation. When a user submits their email, Stack Auth will send them an email with a link to the password reset page configured in your application. + ## Custom forgot password form +If you need more control over the forgot password process, you can build your own form. This approach allows you to customize the UI and error handling to match your application's design. + ```tsx 'use client'; @@ -29,11 +53,25 @@ export default function CustomForgotPasswordForm() { const app = useStackApp(); const onSubmit = async () => { + if (!email) { + setError('Please enter your email address'); + return; + } + try { - await app.sendForgotPasswordEmail(email); - setMessage('Password reset email sent! Please check your inbox.'); + const result = await app.sendForgotPasswordEmail(email); + if (result?.status === 'error') { + if (result.error.code === 'user_not_found') { + // For security reasons, don't reveal if a user exists or not + setMessage('If an account exists with this email, a password reset link has been sent.'); + } else { + setError(`Error: ${result.error.message}`); + } + } else { + setMessage('Password reset email sent! Please check your inbox.'); + } } catch (err) { - setError(err.message); + setError(`An unexpected error occurred: ${err.message}`); } }; diff --git a/docs/fern/docs/pages-template/customization/page-examples/password-reset.mdx b/docs/fern/docs/pages-template/customization/page-examples/password-reset.mdx index 8722f2a20..3897367fa 100644 --- a/docs/fern/docs/pages-template/customization/page-examples/password-reset.mdx +++ b/docs/fern/docs/pages-template/customization/page-examples/password-reset.mdx @@ -2,8 +2,12 @@ slug: customization/page-examples/password-reset --- +This page provides examples of how to create custom password reset pages for your application. Password reset functionality allows users to securely create a new password when they've forgotten their current one. + ## Custom page with `PasswordReset` component +The `PasswordReset` component provides a complete password reset form with built-in validation and error handling. This is the simplest way to add password reset functionality to your application. + ```tsx 'use client'; import { PasswordReset } from "@stackframe/stack"; @@ -13,9 +17,32 @@ export default function DefaultPasswordReset() { } ``` +## Integration with Application Routing + +To integrate the password reset page with your application's routing: + +1. Create a route handler that extracts the reset code from the URL (e.g., `/reset-password?code=xyz123`) +2. Pass the code to your password reset component +3. Configure Stack Auth to use your custom route in your `stack.ts` file: + +```tsx +export const stackServerApp = new StackServerApp({ + // ... + urls: { + passwordReset: '/reset-password', + } +}); +``` + +This ensures that password reset links in emails will direct users to your custom page. + ## Custom password reset form +If you need more control over the password reset process, you can build your own form using the Stack Auth API. This approach allows you to customize the UI and error handling to match your application's design. + +The `code` parameter used below is typically extracted from the URL query parameters. This code is sent to the user's email when they request a password reset and is required to validate the reset request. + ```tsx 'use client'; @@ -43,7 +70,7 @@ export default function CustomPasswordResetForm({ code }: { code: string }) { } setSuccess(true); } catch (err) { - setError(err.message); + setError(`An unexpected error occurred: ${err.message}`); } }; diff --git a/docs/fern/docs/pages-template/customization/page-examples/sign-in.mdx b/docs/fern/docs/pages-template/customization/page-examples/sign-in.mdx index f09e4189d..e17989b91 100644 --- a/docs/fern/docs/pages-template/customization/page-examples/sign-in.mdx +++ b/docs/fern/docs/pages-template/customization/page-examples/sign-in.mdx @@ -1,7 +1,11 @@ --- -slug: customization/page-examples/signin +slug: customization/page-examples/sign-in --- +# Sign-In Page Examples + +This page provides examples of how to create custom sign-in pages for your application using Stack Auth components and functions. + ## Custom page with `SignIn` component ```tsx @@ -16,16 +20,16 @@ export default function DefaultSignIn() { } ``` -You can also use `useUser` at the beginning of the sign in page to check if wether the user is already signed in and redirect them to some other page if they are. +You can also use `useUser` at the beginning of the sign-in page to check whether the user is already signed in and redirect them to another page if they are. ## Other useful components -`CredentialSignIn`: A component that contains a form for signing in with email and password. +`CredentialSignIn`: A component that renders a complete form for signing in with email and password. It handles validation, error states, and submission automatically. -`OAuthGroup`: A list of available OAuth provider signin buttons components. The available provider list is fetched from the server. +`OAuthGroup`: A component that displays a list of available OAuth provider sign-in buttons. The available provider list is automatically fetched from the server based on your project configuration. -`OAuthButton`: A single OAuth sign in button. +`OAuthButton`: A component that renders a single OAuth sign-in button for a specific provider. Use this when you only want to offer specific OAuth providers. ## Custom OAuth Sign In @@ -41,7 +45,7 @@ export default function CustomOAuthSignIn() {

My Custom Sign In page

-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. +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 depend on your help 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. If you prefer a fully customized UI, you can use our low-level functions like `signInWithOAuth` or `signInWithCredential` to build your own sign-in page: @@ -104,6 +104,6 @@ Best of all, Stack is **100% open-source**. This means the client, server, dashb This is just a glimpse of what Stack can do. Stack also handles many other tasks like backend integration, data storage, emails, teams, permissions, and more, which you will learn about later in the documentation. -If this sounds interesting, [get started](./getting-started/setup.mdx) with our interactive setup wizard, or join [our Discord community](https://discord.stack-auth.com) to ask questions and get help from our team. +If this sounds interesting, [get started](/getting-started/setup) with our interactive setup wizard, or join [our Discord community](https://discord.stack-auth.com) to ask questions and get help from our team. We're excited to have you on board! 🚀