From 73566699fd2514ba78fa774fc5b66613d9f32241 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Fri, 27 Sep 2024 16:16:11 +0800
Subject: [PATCH 1/2] feat(react-sample): add sso direct sign-in landing page

add sso direct sign-in landing page
---
 packages/react-sample/src/App.tsx             |  3 ++
 .../src/pages/SsoDirectSignIn/index.tsx       | 29 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 packages/react-sample/src/pages/SsoDirectSignIn/index.tsx

diff --git a/packages/react-sample/src/App.tsx b/packages/react-sample/src/App.tsx
index 23e0fdc92..1845a8ce6 100644
--- a/packages/react-sample/src/App.tsx
+++ b/packages/react-sample/src/App.tsx
@@ -9,11 +9,13 @@ 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 = {
     appId,
     endpoint,
+    resources: ['https://api.auth.logto.gg/'],
     scopes: [
       UserScope.Email,
       UserScope.Phone,
@@ -29,6 +31,7 @@ export const App = () => {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/callback" element={<Callback />} />
+          <Route path="/sso/:connectorId" element={<SsoDirectSignIn />} />
           <Route path="/protected" element={<RequireAuth />}>
             <Route index element={<ProtectedResource />} />
             <Route path="react-query" element={<ReactQuery />} />
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..d63d076df
--- /dev/null
+++ b/packages/react-sample/src/pages/SsoDirectSignIn/index.tsx
@@ -0,0 +1,29 @@
+import { useLogto } from '@logto/react';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { redirectUrl } from '../../consts';
+
+const SsoDirectSignIn = () => {
+  const { isAuthenticated, signIn } = useLogto();
+  const { connectorId } = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isAuthenticated || !connectorId) {
+      navigate('/');
+    } else {
+      void signIn({
+        redirectUri: redirectUrl,
+        directSignIn: {
+          method: 'sso',
+          target: connectorId,
+        },
+      });
+    }
+  }, [connectorId, isAuthenticated, navigate, signIn]);
+
+  return null;
+};
+
+export default SsoDirectSignIn;

From fe4dc0aef22f234f00c5a83315f31a2fa06af249 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Thu, 17 Oct 2024 15:32:15 +0800
Subject: [PATCH 2/2] chore: update react sample

update react sample
---
 packages/react-sample/src/App.tsx              |  3 +--
 packages/react-sample/src/consts/index.ts      |  4 ++--
 .../src/pages/SsoDirectSignIn/index.tsx        | 18 +++++++++++-------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/react-sample/src/App.tsx b/packages/react-sample/src/App.tsx
index 1845a8ce6..c5b16948f 100644
--- a/packages/react-sample/src/App.tsx
+++ b/packages/react-sample/src/App.tsx
@@ -15,7 +15,6 @@ export const App = () => {
   const config: LogtoConfig = {
     appId,
     endpoint,
-    resources: ['https://api.auth.logto.gg/'],
     scopes: [
       UserScope.Email,
       UserScope.Phone,
@@ -31,7 +30,7 @@ export const App = () => {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/callback" element={<Callback />} />
-          <Route path="/sso/:connectorId" element={<SsoDirectSignIn />} />
+          <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
index d63d076df..836260e3e 100644
--- a/packages/react-sample/src/pages/SsoDirectSignIn/index.tsx
+++ b/packages/react-sample/src/pages/SsoDirectSignIn/index.tsx
@@ -1,27 +1,31 @@
-import { useLogto } from '@logto/react';
+import { Prompt, useLogto } from '@logto/react';
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { redirectUrl } from '../../consts';
 
 const SsoDirectSignIn = () => {
   const { isAuthenticated, signIn } = useLogto();
-  const { connectorId } = useParams();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   useEffect(() => {
-    if (isAuthenticated || !connectorId) {
-      navigate('/');
-    } else {
+    const connectorId = searchParams.get('ssoConnectorId');
+
+    if (connectorId) {
       void signIn({
         redirectUri: redirectUrl,
+        prompt: Prompt.Login,
         directSignIn: {
           method: 'sso',
           target: connectorId,
         },
       });
+      return;
     }
-  }, [connectorId, isAuthenticated, navigate, signIn]);
+
+    navigate('/');
+  }, [searchParams, isAuthenticated, navigate, signIn]);
 
   return null;
 };