CODEWITHSUNDEEP
reactjstypescriptauthenticationreact-typescriptclerk
ayex
ayex

Reputation: 482

clerk Authentication afterSignOutUrl property not known typescript error in React

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

Upvotes: 0

Views: 2762

Answers (5)

baohouse
baohouse

Reputation: 500

The error

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.

means that SignOutButton is not being recognized as a React component. It could be that the @clerk/clerk-react is not installed correctly. I noticed in your sample code you're missing the ClerkProvider component that needs to wrap around all the other Clerk components. You're better off just cloning Clerk's React Quickstart repo.

Upvotes: 0

user2325204
user2325204

Reputation: 1

you can use fallbackRedirectUrl

Upvotes: 0

LOUIS BUI
LOUIS BUI

Reputation: 1

Try "afterSwitchSessionUrl" instead.

Upvotes: 0

Edward Anthony Escudero Bowie
Edward Anthony Escudero Bowie

Reputation: 19

A workaround for this is to simply use the 'signoutCallback' property of Clerk's SignOut button component, by doing this you're able to pass a callback function that redirects the user to whatever URL you specify.

Example:

<SignOutButton signOutCallback={()=> { router.replace("/"); }} >
  <button>Cheers, I hope this helps :)</button>
</SignOutButton>

Upvotes: 1

ayex
ayex

Reputation: 482

well, the docs is incorrect i guess, because it seems that afterSignOutUrl proper only exists on UserButton component

Upvotes: 1

Related Questions