diff --git a/packages/react-sample/src/App.tsx b/packages/react-sample/src/App.tsx
index 23e0fdc92..c5b16948f 100644
--- a/packages/react-sample/src/App.tsx
+++ b/packages/react-sample/src/App.tsx
@@ -9,6 +9,7 @@ import Organizations from './pages/Organizations';
 import ProtectedResource from './pages/ProtectedResource';
 import './App.module.scss';
 import ReactQuery from './pages/ReactQuery';
+import SsoDirectSignIn from './pages/SsoDirectSignIn';
 
 export const App = () => {
   const config: LogtoConfig = {
@@ -29,6 +30,7 @@ export const App = () => {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/callback" element={<Callback />} />
+          <Route path="/sso/callback" element={<SsoDirectSignIn />} />
           <Route path="/protected" element={<RequireAuth />}>
             <Route index element={<ProtectedResource />} />
             <Route path="react-query" element={<ReactQuery />} />
diff --git a/packages/react-sample/src/consts/index.ts b/packages/react-sample/src/consts/index.ts
index 4f6d37bd3..bb7e9ad59 100644
--- a/packages/react-sample/src/consts/index.ts
+++ b/packages/react-sample/src/consts/index.ts
@@ -1,5 +1,5 @@
 export const baseUrl = window.location.origin;
 export const redirectUrl = `${baseUrl}/callback`;
 
-export const appId = 'sampleId'; // Register the sample app in Logto dashboard
-export const endpoint = 'http://localhost:3001'; // Replace with your own Logto endpoint
+export const appId = '9j663nddroang0en1c5px'; // Register the sample app in Logto dashboard
+export const endpoint = 'https://wiy9fq.app.logto.dev/'; // Replace with your own Logto endpoint
diff --git a/packages/react-sample/src/pages/SsoDirectSignIn/index.tsx b/packages/react-sample/src/pages/SsoDirectSignIn/index.tsx
new file mode 100644
index 000000000..836260e3e
--- /dev/null
+++ b/packages/react-sample/src/pages/SsoDirectSignIn/index.tsx
@@ -0,0 +1,33 @@
+import { Prompt, useLogto } from '@logto/react';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { redirectUrl } from '../../consts';
+
+const SsoDirectSignIn = () => {
+  const { isAuthenticated, signIn } = useLogto();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const connectorId = searchParams.get('ssoConnectorId');
+
+    if (connectorId) {
+      void signIn({
+        redirectUri: redirectUrl,
+        prompt: Prompt.Login,
+        directSignIn: {
+          method: 'sso',
+          target: connectorId,
+        },
+      });
+      return;
+    }
+
+    navigate('/');
+  }, [searchParams, isAuthenticated, navigate, signIn]);
+
+  return null;
+};
+
+export default SsoDirectSignIn;