i was trying to integrate clerk authentication to my react-typescript website created using vite, but i am having trouble with the property afterSignOutUrl
giving errors.i have tried to follow the docs correctly to implement it.
here is the code
import { useState } from "react";
import { SignInButton, SignOutButton, SignedIn, SignedOut } from "@clerk/clerk-react";
import "./App.css";
function App() {
return (
<>
<SignedOut>
<SignInButton />
<p>This content is public. Only signed out users can see this.</p>
</SignedOut>
<SignedIn>
<SignOutButton afterSignOutUrl="/" />
<p>This content is private. Only signed in users can see this.</p>
</SignedIn>
</>
);
}
export default App;
here is what the error says in vscode
Type '{ afterSignOutUrl: string; }' is not assignable to type 'IntrinsicAttributes & Omit<PropsWithChildren<WithClerkProp<SignOutButtonProps>>, "clerk">'.
Property 'afterSignOutUrl' does not exist on type 'IntrinsicAttributes & Omit<PropsWithChildren<WithClerkProp<SignOutButtonProps>>, "clerk">'.ts(2322)
(property) afterSignOutUrl: string
here is what the error says in browser's console
chunk-ZKMK3N6I.js?v=d42226ec:519
Warning: React does not recognize the `afterSignOutUrl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `aftersignouturl` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at button
at http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:4187:6
at LoadedGuarantee (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:2514:26)
at HOC (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:2527:19)
at SignedIn (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:3974:19)
at App (http://localhost:5173/src/App.tsx:23:29)
at SWRConfig (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:1174:11)
at OrganizationProvider (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:1938:3)
at ClerkContextProvider (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:3658:11)
at ClerkProviderBase (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:3730:11)
at Hoc (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:614:5)
printWarning @ chunk-ZKMK3N6I.js?v=d42226ec:519
error @ chunk-ZKMK3N6I.js?v=d42226ec:503
validateProperty$1 @ chunk-ZKMK3N6I.js?v=d42226ec:3425
warnUnknownProperties @ chunk-ZKMK3N6I.js?v=d42226ec:3457
validateProperties$2 @ chunk-ZKMK3N6I.js?v=d42226ec:3476
validatePropertiesInDevelopment @ chunk-ZKMK3N6I.js?v=d42226ec:7347
setInitialProperties @ chunk-ZKMK3N6I.js?v=d42226ec:7538
finalizeInitialChildren @ chunk-ZKMK3N6I.js?v=d42226ec:8354
completeWork @ chunk-ZKMK3N6I.js?v=d42226ec:16280
completeUnitOfWork @ chunk-ZKMK3N6I.js?v=d42226ec:19218
performUnitOfWork @ chunk-ZKMK3N6I.js?v=d42226ec:19200
workLoopSync @ chunk-ZKMK3N6I.js?v=d42226ec:19131
renderRootSync @ chunk-ZKMK3N6I.js?v=d42226ec:19110
performConcurrentWorkOnRoot @ chunk-ZKMK3N6I.js?v=d42226ec:18672
workLoop @ chunk-ZKMK3N6I.js?v=d42226ec:195
flushWork @ chunk-ZKMK3N6I.js?v=d42226ec:174
performWorkUntilDeadline @ chunk-ZKMK3N6I.js?v=d42226ec:382
Show 17 more frames
Show less
well, the docs is incorrect i guess, because it seems that afterSignOutUrl proper only exists on UserButton component