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 8162ea2f9c. It will automatically
update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->
This commit is contained in:
Htoo Pyae Lwin 2025-05-08 06:12:48 +07:00 committed by GitHub
parent 466c891fab
commit a768174753
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 13 deletions

View File

@ -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.

View File

@ -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.

View File

@ -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', {