From a768174753250484cbd08d84617ec99196d8b5fc Mon Sep 17 00:00:00 2001
From: Htoo Pyae Lwin <htoopyae.dev@gmail.com>
Date: Thu, 8 May 2025 06:12:48 +0700
Subject: [PATCH] fix: auth page flash message (#628)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

Fixes https://github.com/stack-auth/stack-auth/issues/625

<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Fixes flash message display by consolidating redirection logic in
`Inner` function of `auth-page.tsx`.
>
>   - **Behavior**:
> - Consolidates conditions for automatic redirection in `Inner`
function of `auth-page.tsx` to ensure correct flash message display.
> - Adds check for `!props.automaticRedirect` when rendering
`PredefinedMessageCard` for signed-in users.
>   - **Formatting**:
>     - Removes unnecessary whitespace in `Inner` function.
>     - Adds space before self-closing tags in `Inner` function.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 8162ea2f9c03b5b7e44428b8a30d871fee920a59. It will automatically
update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->
---
 .../pages-template/components/sign-in.mdx     |  2 +-
 .../pages-template/components/sign-up.mdx     |  2 +-
 .../src/components-page/auth-page.tsx         | 22 +++++++++----------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/fern/docs/pages-template/components/sign-in.mdx b/docs/fern/docs/pages-template/components/sign-in.mdx
index 2a12c6e72..a2a911248 100644
--- a/docs/fern/docs/pages-template/components/sign-in.mdx
+++ b/docs/fern/docs/pages-template/components/sign-in.mdx
@@ -14,7 +14,7 @@ For more information, please refer to the [custom pages guide](../customization/
 ## Props
 
 - `fullPage` (optional): `boolean` - If true, renders the sign-in page in full-page mode.
-- `automaticRedirect` (optional): `boolean` - If true, redirect to `afterSignIn` URL if the user is already signed-in.
+- `automaticRedirect` (optional): `boolean` - If true, redirect to afterSignIn/afterSignUp URL when user is already signed in without showing the 'You are signed in' message.
 - `extraInfo` (optional): `React.ReactNode` - Additional content to be displayed on the sign-in page.
 - `firstTab` (optional): `'magic-link' | 'password'` - Determines which tab is initially active. Defaults to 'magic-link' if not specified.
 
diff --git a/docs/fern/docs/pages-template/components/sign-up.mdx b/docs/fern/docs/pages-template/components/sign-up.mdx
index 8c44899b0..324e64b3e 100644
--- a/docs/fern/docs/pages-template/components/sign-up.mdx
+++ b/docs/fern/docs/pages-template/components/sign-up.mdx
@@ -14,7 +14,7 @@ For more information, please refer to the [custom pages guide](../customization/
 ## Props
 
 - `fullPage` (optional): `boolean` - If true, renders the sign-up page in full-page mode.
-- `automaticRedirect` (optional): `boolean` - If true, redirect to `afterSignUp` URL if the user is already signed-in.
+- `automaticRedirect` (optional): `boolean` - If true, redirect to afterSignIn/afterSignUp URL when user is already signed in without showing the 'You are signed in' message.
 - `noPasswordRepeat` (optional): `boolean` - If true, removes the password confirmation field.
 - `extraInfo` (optional): `React.ReactNode` - Additional information to display on the sign-up page.
 - `firstTab` (optional): `'magic-link' | 'password' - Determines which tab is initially active. Defaults to 'magic-link' if not specified.
diff --git a/packages/template/src/components-page/auth-page.tsx b/packages/template/src/components-page/auth-page.tsx
index 04eb959f0..88683f697 100644
--- a/packages/template/src/components-page/auth-page.tsx
+++ b/packages/template/src/components-page/auth-page.tsx
@@ -63,23 +63,23 @@ function Fallback(props: Props) {
   );
 }
 
-function Inner (props: Props) {
+function Inner(props: Props) {
   const stackApp = useStackApp();
   const user = useUser();
   const projectFromHook = stackApp.useProject();
   const project = props.mockProject || projectFromHook;
   const { t } = useTranslation();
 
-
   useEffect(() => {
-    if (props.automaticRedirect) {
-      if (user && !props.mockProject) {
-        runAsynchronously(props.type === 'sign-in' ? stackApp.redirectToAfterSignIn({ replace: true }) : stackApp.redirectToAfterSignUp({ replace: true }));
-      }
+    if (props.automaticRedirect && user && !props.mockProject) {
+      runAsynchronously(props.type === 'sign-in'
+        ? stackApp.redirectToAfterSignIn({ replace: true })
+        : stackApp.redirectToAfterSignUp({ replace: true })
+      );
     }
   }, [user, props.mockProject, stackApp, props.automaticRedirect]);
 
-  if (user && !props.mockProject) {
+  if (user && !props.mockProject && !props.automaticRedirect) {
     return <PredefinedMessageCard type='signedIn' fullPage={props.fullPage} />;
   }
 
@@ -135,16 +135,16 @@ function Inner (props: Props) {
               <TabsTrigger value='password' className='flex-1'>{t("Email & Password")}</TabsTrigger>
             </TabsList>
             <TabsContent value='magic-link'>
-              <MagicLinkSignIn/>
+              <MagicLinkSignIn />
             </TabsContent>
             <TabsContent value='password'>
-              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>}
+              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn />}
             </TabsContent>
           </Tabs>
         ) : project.config.credentialEnabled ? (
-          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>
+          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn />
         ) : project.config.magicLinkEnabled ? (
-          <MagicLinkSignIn/>
+          <MagicLinkSignIn />
         ) : !(hasOAuthProviders || hasPasskey) ? <Typography variant={"destructive"} className="text-center">{t("No authentication method enabled.")}</Typography> : null}
         {props.extraInfo && (
           <div className={cn('flex flex-col items-center text-center text-sm text-gray-500', {