Почему в Clerk не работает afterSignInUrl и afterSignUpUrl?

Question

[dima89e]

'use client'

import {
	ClerkLoaded,
	ClerkLoading,
	SignInButton,
	SignedIn,
	SignedOut,
	UserButton,
	useAuth, 
} from '@clerk/nextjs';
import { Loader } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { Button } from '@/components/ui/button';
// import { links } from '@/config';

export const Header = () => {
	const { userId } = useAuth();

	return (
		<header className='h-20 w-full border-b-2 border-slate-200 px-4'>
			<div className='mx-auto flex h-full items-center justify-between lg:max-w-screen-lg'>
				<Link href='/' className='flex items-center gap-x-3 pb-7 pl-4 pt-8'>
					<Image src='/mascot.svg' alt='Mascot' height={40} width={40} />

					<h1 className='text-2xl font-extrabold tracking-wide text-green-600'>
						Lingo
					</h1>
				</Link>

				<div className='flex gap-x-3'>
					<ClerkLoading>
						<Loader className='h-5 w-5 animate-spin text-muted-foreground' />
					</ClerkLoading>
					<ClerkLoaded>
						<SignedIn>
							<UserButton afterSignOutUrl='/' />
						</SignedIn>

						<SignedOut>
							<SignInButton
								mode='modal'
								afterSignInUrl='/learn'
								afterSignUpUrl='/learn'
							>
								<Button size='lg' variant='ghost'>
									Login
								</Button>
							</SignInButton>
						</SignedOut>

						<Link
							// href={links.sourceCode}
							href='/'
							target='_blank'
							rel='noreferrer noopener'
							className={userId ? 'pt-1.5' : 'pt-3'}
						>
						</Link>
					</ClerkLoaded>
				</div>
			</div>
		</header>
	);
};

Type '{ children: Element; mode: "modal"; afterSignInUrl: string; afterSignUpUrl: string; }' is not assignable to type 'IntrinsicAttributes & Without<WithClerkProp<SignInButtonProps>, "clerk">'.
  Property 'afterSignInUrl' does not exist on type 'IntrinsicAttributes & Without<WithClerkProp<SignInButtonProps>, "clerk">'.

app-index.js:33 Warning: React does not recognize the `afterSignUpUrl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `aftersignupurl` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at button

Comments

[Everything_is_bad]

уже угадываю автора по заголовку, поразительная неспособность что-то сделать самим

Answer 1

[Elaryks]

В новых версиях у <SignInButton /> нет свойств afterSignInUrl и afterSignUpUrl, что подтверждает и документация компонента.

Вот информация, как починить: ссылка. Вместо afterSignXUrl можно использовать signXFallbackRedirectUrl, но предпочтительнее использовать переменные среды.

Comments

[dima89e]

есть только signUpFallbackRedirectUrl, нету signInFallbackRedirectUrl

[Elaryks]

dima89e, зато есть просто fallbackRedirectUrl.

[Алексей Уколов]

dima89e, а это что в документации тогда?

[Elaryks]

Алексей Уколов, да, интересный момент. Видимо, в одной из минорных версий для <SignIn /> убрали префикс signIn в пропсах.

[Алексей Уколов]

А, это разные компоненты - SignIn и SignInButton. И у SignIn реально есть только signUpFallbackRedirectUrl. Зато signInFallbackRedirectUrl есть у SignUp, что логично.

А в документации, выходит, косяк.

[Elaryks]

Алексей Уколов, но, кажется, forceRedirectUrl без префикса подходит:

forceRedirectUrl: If provided, this URL will always be redirected to after the user signs in.

[dima89e]

Алексей Уколов, мне надо не для signin а для SignInButton

'use client'

import {
	ClerkLoaded,
	ClerkLoading,
	SignInButton,
	SignedIn,
	SignedOut,
	UserButton,
	useAuth, 
} from '@clerk/nextjs';
import { Loader } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { Button } from '@/components/ui/button';
// import { links } from '@/config';

export const Header = () => {
	const { userId } = useAuth();

	return (
		<header className='h-20 w-full border-b-2 border-slate-200 px-4'>
			<div className='mx-auto flex h-full items-center justify-between lg:max-w-screen-lg'>
				<Link href='/' className='flex items-center gap-x-3 pb-7 pl-4 pt-8'>
					<Image src='/mascot.svg' alt='Mascot' height={40} width={40} />

					<h1 className='text-2xl font-extrabold tracking-wide text-green-600'>
						Lingo
					</h1>
				</Link>

				<div className='flex gap-x-3'>
					<ClerkLoading>
						<Loader className='h-5 w-5 animate-spin text-muted-foreground' />
					</ClerkLoading>
					<ClerkLoaded>
						<SignedIn>
							<UserButton afterSignOutUrl='/' />
						</SignedIn>

						<SignedOut>
							<SignInButton
								mode='modal'
								// afterSignInUrl='/learn'
								// afterSignUpUrl='/learn'
								signUpFallbackRedirectUrl='/learn'
							>
								<Button size='lg' variant='ghost'>
									Login
								</Button>
							</SignInButton>
						</SignedOut>

						<Link
							// href={links.sourceCode}
							href='/'
							target='_blank'
							rel='noreferrer noopener'
							className={userId ? 'pt-1.5' : 'pt-3'}
						>
						</Link>
					</ClerkLoaded>
				</div>
			</div>
		</header>
	);
};

'use client';

import {
	ClerkLoaded,
	ClerkLoading,
	SignInButton,
	SignUpButton,
	SignedIn,
	SignedOut,
} from '@clerk/nextjs';
import { Loader } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { Button } from '@/components/ui/button';

export default function MarketingPage() {
	return (
		<div className='mx-auto flex w-full max-w-[988px] flex-1 flex-col items-center justify-center gap-2 p-4 lg:flex-row'>
			<div className='relative mb-8 h-[240px] w-[240px] lg:mb-0 lg:h-[424px] lg:w-[424px]'>
				<Image src='/hero.svg' alt='Hero' fill />
			</div>

			<div className='flex flex-col items-center gap-y-8'>
				<h1 className='max-w-[480px] text-center text-xl font-bold text-neutral-600 lg:text-3xl'>
					Learn, practice and master new languages with Lingo.
				</h1>

				<div className='flex w-full max-w-[330px] flex-col items-center gap-y-3'>
					<ClerkLoading>
						<Loader className='h-5 w-5 animate-spin text-muted-foreground' />
					</ClerkLoading>

					<ClerkLoaded>
						<SignedOut>
							<SignUpButton
								mode='modal'
								// afterSignInUrl='/learn'
								// afterSignUpUrl='/learn'
							>
								<Button size='lg' variant='secondary' className='w-full'>
									Get Started
								</Button>
							</SignUpButton>

							<SignInButton
								mode='modal'
								// afterSignInUrl='/learn'
								// afterSignUpUrl='/learn'
								signUpFallbackRedirectUrl='/learn'
							>
								<Button size='lg' variant='primaryOutline' className='w-full'>
									I already have an account
								</Button>
							</SignInButton>
						</SignedOut>

						<SignedIn>
							<Button size='lg' variant='secondary' className='w-full' asChild>
								<Link href='/learn'>Continue Learning</Link>
							</Button>
						</SignedIn>
					</ClerkLoaded>
				</div>
			</div>
		</div>
	);
}

[dima89e]

Elaryks, для signinbutton fallbackRedirectUrl?

[Elaryks]

dima89e, да, попробуйте это.

[Алексей Уколов]

мне надо

Ссылку на документацию вам дали - там всё написано.

[dima89e]

Elaryks, и это будет работать и для логин, регистрации, выхода?

[Elaryks]

dima89e, я с этой библиотекой не работал, поэтому подсказать не могу. Вообще там есть три компонента: SignInButton, SignUpButton и SignOutButton. Судя по всему, они вам и нужны.