diff --git a/.changeset/handle-sso-callback-protect-error.md b/.changeset/handle-sso-callback-protect-error.md new file mode 100644 index 00000000000..02802ea34e2 --- /dev/null +++ b/.changeset/handle-sso-callback-protect-error.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/react': patch +--- + +Fix `` dropping the error when a Clerk Protect challenge fails on the SSO callback. The error is now available on `errors` from `useSignIn()` or `useSignUp()`, and a failed sign-up challenge calls `navigateToSignUp` instead of `navigateToSignIn`. diff --git a/integration/templates/custom-flows-react-vite/src/main.tsx b/integration/templates/custom-flows-react-vite/src/main.tsx index b133724280a..91268401ddc 100644 --- a/integration/templates/custom-flows-react-vite/src/main.tsx +++ b/integration/templates/custom-flows-react-vite/src/main.tsx @@ -2,11 +2,12 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter, Route, Routes } from 'react-router'; import './index.css'; -import { AuthenticateWithRedirectCallback, ClerkProvider } from '@clerk/react'; +import { ClerkProvider } from '@clerk/react'; import { Home } from './routes/Home'; import { SignIn } from './routes/SignIn'; import { SignUp } from './routes/SignUp'; import { Protected } from './routes/Protected'; +import { SSOCallback } from './routes/SSOCallback'; import { Waitlist } from './routes/Waitlist'; createRoot(document.getElementById('root')!).render( @@ -46,12 +47,7 @@ createRoot(document.getElementById('root')!).render( /> - } + element={} /> diff --git a/integration/templates/custom-flows-react-vite/src/routes/SSOCallback.tsx b/integration/templates/custom-flows-react-vite/src/routes/SSOCallback.tsx new file mode 100644 index 00000000000..3bca319b1f4 --- /dev/null +++ b/integration/templates/custom-flows-react-vite/src/routes/SSOCallback.tsx @@ -0,0 +1,21 @@ +import { HandleSSOCallback } from '@clerk/react'; +import { useNavigate } from 'react-router'; + +export function SSOCallback() { + const navigate = useNavigate(); + + return ( + { + const destination = decorateUrl('/protected'); + if (destination.startsWith('http')) { + window.location.href = destination; + return; + } + navigate(destination); + }} + navigateToSignIn={() => navigate('/sign-in')} + navigateToSignUp={() => navigate('/sign-up')} + /> + ); +} diff --git a/integration/templates/custom-flows-react-vite/src/routes/SignUp.tsx b/integration/templates/custom-flows-react-vite/src/routes/SignUp.tsx index b506c46ecb0..d1d513d9b64 100644 --- a/integration/templates/custom-flows-react-vite/src/routes/SignUp.tsx +++ b/integration/templates/custom-flows-react-vite/src/routes/SignUp.tsx @@ -86,6 +86,9 @@ export function SignUp({ className, ...props }: React.ComponentProps<'div'>) { /> {errors.fields.code &&
{errors.fields.code.message}
} + {errors.global && ( +

{errors.global[0].longMessage ?? errors.global[0].message}

+ )}