Skip to content

feat(clerk-react): Replace signOutCallback with redirectUrl in SignOutButton#2348

Merged
LekoArts merged 7 commits into
mainfrom
lekoarts/sdk-1073-replace-signoutcallback-with-redirecturl-in-signoutbutton
Dec 15, 2023
Merged

feat(clerk-react): Replace signOutCallback with redirectUrl in SignOutButton#2348
LekoArts merged 7 commits into
mainfrom
lekoarts/sdk-1073-replace-signoutcallback-with-redirecturl-in-signoutbutton

Conversation

@LekoArts

@LekoArts LekoArts commented Dec 14, 2023

Copy link
Copy Markdown
Contributor

Description

Replace the signOutCallback prop on the <SignOutButton /> with redirectUrl. This aligns the API surface with other UI components provided by @clerk/clerk-react.

If you previously used the signOutCallback prop to navigate to another page, you can migrate as shown below.

Before:

import { SignOutButton } from "@clerk/clerk-react";

export const Signout = () => {
  return (
    <SignOutButton signOutCallback={() => { window.location.href = "/your-path" }}>
      <button>Sign Out</button>
    </SignOutButton>
  )
}

After:

import { SignOutButton } from "@clerk/clerk-react";

export const Signout = () => {
  return (
    <SignOutButton redirectUrl="/your-path">
      <button>Sign Out</button>
    </SignOutButton>
  )
}

Related to #1981 which uncovered a bug. With the redirectUrl people could more easily (and aligned with our other APIs) decide where to redirect.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-bot Bot commented Dec 14, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9cf0f8c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@clerk/clerk-react Major
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch
gatsby-plugin-clerk Patch
@clerk/nextjs Patch
@clerk/remix Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@LekoArts LekoArts changed the title feat(clerk-react): Replace signOutCallback with redirectUrl in SignOutButton feat(clerk-react): Replace signOutCallback with redirectUrl in SignOutButton Dec 14, 2023
@LekoArts LekoArts marked this pull request as ready for review December 14, 2023 13:04
export const SignOutButton = withClerk(
({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {
const { signOutCallback, signOutOptions, ...rest } = props;
const { redirectUrl = '/', signOutOptions, ...rest } = props;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Open to suggestions to moving this default to somewhere else (if necessary)

@dimkl dimkl Dec 14, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 I would suggest we open a ticket and move all the defaults (we have defaults for afterSignInUrl, afterSingUpUrl) to a separate module to have all the default settings in a centralized place. For now, it seems fine to leave it there.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in SDK-1079

export const SignOutButton = withClerk(
({ clerk, children, ...props }: React.PropsWithChildren<WithClerkProp<SignOutButtonProps>>) => {
const { signOutCallback, signOutOptions, ...rest } = props;
const { redirectUrl = '/', signOutOptions, ...rest } = props;

@dimkl dimkl Dec 14, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 I would suggest we open a ticket and move all the defaults (we have defaults for afterSignInUrl, afterSingUpUrl) to a separate module to have all the default settings in a centralized place. For now, it seems fine to leave it there.

Comment thread packages/react/src/components/SignOutButton.tsx
@LekoArts LekoArts added this pull request to the merge queue Dec 15, 2023
Merged via the queue into main with commit 2a67f72 Dec 15, 2023
@LekoArts LekoArts deleted the lekoarts/sdk-1073-replace-signoutcallback-with-redirecturl-in-signoutbutton branch December 15, 2023 07:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants