refactor(experience): fall back to sign-in page when error

packages/experience/src/pages/SocialSignInWebCallback/index.test.tsx

@@ -1,5 +1,5 @@
 import { waitFor } from '@testing-library/react';
-import { Route, Routes, useSearchParams } from 'react-router-dom';
+import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
 import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
@@ -28,11 +28,33 @@ jest.mock('@/apis/single-sign-on', () => ({
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useSearchParams: jest.fn(),
+  Navigate: jest.fn(() => null),
 }));
 
 const mockUseSearchParameters = useSearchParams as jest.Mock;
+const mockNavigate = Navigate as jest.Mock;
 
 describe('SocialCallbackPage with code', () => {
+  describe('fallback', () => {
+    it('should redirect to /sign-in if connectorId is not found', async () => {
+      mockUseSearchParameters.mockReturnValue([new URLSearchParams('code=foo'), jest.fn()]);
+
+      renderWithPageContext(
+        <SettingsProvider>
+          <Routes>
+            <Route path="/sign-in/social/:connectorId" element={<SocialCallback />} />
+          </Routes>
+        </SettingsProvider>,
+        { initialEntries: ['/sign-in/social/invalid'] }
+      );
+
+      await waitFor(() => {
+        expect(signInWithSocial).not.toBeCalled();
+        expect(mockNavigate.mock.calls[0][0].to).toBe('/sign-in');
+      });
+    });
+  });
+
   describe('signIn with social', () => {
     const connectorId = socialConnectors[0]!.id;
     const state = generateState();

packages/experience/src/pages/SocialSignInWebCallback/index.tsx

@@ -21,7 +21,7 @@ const SocialSignInWebCallback = () => {
   }
 
   // Connector not found, return sign in page
-  return <Navigate to={experience.routes.signIn} />;
+  return <Navigate to={'/' + experience.routes.signIn} />;
 };
 
 export default SocialSignInWebCallback;

packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts

@@ -1,7 +1,7 @@
-import { SignInMode } from '@logto/schemas';
+import { SignInMode, experience } from '@logto/schemas';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { singleSignOnAuthorization, singleSignOnRegistration } from '@/apis/single-sign-on';
 import useApi from '@/hooks/use-api';
@@ -16,11 +16,13 @@ const useSingleSignOnRegister = () => {
   const handleError = useErrorHandler();
   const request = useApi(singleSignOnRegistration);
   const { termsValidation } = useTerms();
+  const navigate = useNavigate();
 
   return useCallback(
     async (connectorId: string) => {
       // Agree to terms and conditions first before proceeding
       if (!(await termsValidation())) {
+        navigate('/' + experience.routes.signIn);
         return;
       }
 
@@ -36,7 +38,7 @@ const useSingleSignOnRegister = () => {
         window.location.replace(result.redirectTo);
       }
     },
-    [handleError, request, termsValidation]
+    [handleError, navigate, request, termsValidation]
   );
 };
 
@@ -59,6 +61,7 @@ const useSingleSignOnListener = (connectorId: string) => {
   const { signInMode } = useSieMethods();
 
   const handleError = useErrorHandler();
+  const navigate = useNavigate();
 
   const singleSignOnAuthorizationRequest = useApi(singleSignOnAuthorization);
   const registerSingleSignOnIdentity = useSingleSignOnRegister();
@@ -78,7 +81,7 @@ const useSingleSignOnListener = (connectorId: string) => {
             // Should not let user register new social account under sign-in only mode
             if (signInMode === SignInMode.SignIn) {
               setToast(error.message);
-
+              navigate('/' + experience.routes.signIn);
               return;
             }
 
@@ -94,6 +97,7 @@ const useSingleSignOnListener = (connectorId: string) => {
     },
     [
       handleError,
+      navigate,
       registerSingleSignOnIdentity,
       setToast,
       signInMode,
@@ -117,13 +121,15 @@ const useSingleSignOnListener = (connectorId: string) => {
     // Validate the state parameter
     if (!state || !stateValidation(state, connectorId)) {
       setToast(t('error.invalid_connector_auth'));
+      navigate('/' + experience.routes.signIn);
       return;
     }
 
     void singleSignOnHandler(connectorId, rest);
   }, [
     connectorId,
     isConsumed,
+    navigate,
     searchParameters,
     setSearchParameters,
     setToast,

packages/experience/src/pages/SocialSignInWebCallback/use-social-sign-in-listener.ts

@@ -1,5 +1,5 @@
 import type { RequestErrorBody } from '@logto/schemas';
-import { SignInMode } from '@logto/schemas';
+import { SignInMode, experience } from '@logto/schemas';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -63,20 +63,28 @@ const useSocialSignInListener = (connectorId: string) => {
         // Should not let user register new social account under sign-in only mode
         if (signInMode === SignInMode.SignIn) {
           setToast(error.message);
-
+          navigate('/' + experience.routes.signIn);
           return;
         }
 
         // Agree to terms and conditions first before proceeding
         if (!(await termsValidation())) {
+          navigate('/' + experience.routes.signIn);
           return;
         }
 
         await accountNotExistErrorHandler(error);
       },
       ...preSignInErrorHandler,
     }),
-    [preSignInErrorHandler, signInMode, termsValidation, accountNotExistErrorHandler, setToast]
+    [
+      preSignInErrorHandler,
+      signInMode,
+      termsValidation,
+      accountNotExistErrorHandler,
+      setToast,
+      navigate,
+    ]
   );
 
   const signInWithSocialHandler = useCallback(
@@ -119,13 +127,15 @@ const useSocialSignInListener = (connectorId: string) => {
 
     if (!state || !stateValidation(state, connectorId)) {
       setToast(t('error.invalid_connector_auth'));
+      navigate('/' + experience.routes.signIn);
       return;
     }
 
     void signInWithSocialHandler(connectorId, rest);
   }, [
     connectorId,
     isConsumed,
+    navigate,
     searchParameters,
     setSearchParameters,
     setToast,

packages/integration-tests/src/tests/experience/direct-sign-in.test.ts

@@ -2,13 +2,15 @@ import crypto from 'node:crypto';
 
 import { ConnectorType } from '@logto/connector-kit';
 import { SignInIdentifier, SsoProviderName } from '@logto/schemas';
+import { appendPath } from '@silverhand/essentials';
 
 import { mockSocialConnectorTarget } from '#src/__mocks__/connectors-mock.js';
 import { updateSignInExperience } from '#src/api/sign-in-experience.js';
 import { createSsoConnector } from '#src/api/sso-connector.js';
 import { demoAppUrl, logtoUrl } from '#src/constants.js';
 import { clearConnectorsByTypes, setSocialConnector } from '#src/helpers/connector.js';
 import ExpectExperience from '#src/ui-helpers/expect-experience.js';
+import { dcls, dmodal } from '#src/utils.js';
 
 const randomString = () => crypto.randomBytes(8).toString('hex');
 
@@ -40,6 +42,8 @@ describe('direct sign-in', () => {
     // eslint-disable-next-line @silverhand/fp/no-mutation
     context.ssoConnectorId = ssoConnector.id;
     await updateSignInExperience({
+      termsOfUseUrl: 'https://example.com/terms',
+      privacyPolicyUrl: 'https://example.com/privacy',
       signUp: { identifiers: [], password: true, verify: false },
       signIn: {
         methods: [
@@ -57,12 +61,26 @@ describe('direct sign-in', () => {
   });
 
   it('should be landed to the social identity provider directly', async () => {
+    const socialUserId = 'foo_' + randomString();
     const experience = new ExpectExperience(await browser.newPage());
     const url = new URL(demoAppUrl);
 
     url.searchParams.set('direct_sign_in', `social:${mockSocialConnectorTarget}`);
     await experience.page.goto(url.href);
-    await experience.toProcessSocialSignIn({ socialUserId: 'foo', clickButton: false });
+    await experience.toProcessSocialSignIn({
+      socialUserId,
+      clickButton: false,
+    });
+
+    // Redirected back to the social callback page
+    experience.toMatchUrl(new RegExp(appendPath(new URL(logtoUrl), 'callback/social/.*').href));
+
+    // Should have popped up the terms of use and privacy policy dialog
+    await experience.toMatchElement([dmodal(), dcls('content')].join(' '), {
+      text: /terms of use/i,
+    });
+    await experience.toClickButton(/agree/i);
+
     experience.toMatchUrl(demoAppUrl);
     await experience.toClick('div[role=button]', /sign out/i);
     await experience.page.close();
@@ -71,11 +89,12 @@ describe('direct sign-in', () => {
   it('should be landed to the sso identity provider directly', async () => {
     const experience = new ExpectExperience(await browser.newPage());
     const url = new URL(demoAppUrl);
+    const socialUserId = 'foo_' + randomString();
 
     url.searchParams.set('direct_sign_in', `sso:${context.ssoConnectorId!}`);
     await experience.page.goto(url.href);
     await experience.toProcessSocialSignIn({
-      socialUserId: 'foo',
+      socialUserId,
       clickButton: false,
       authUrl: ssoOidcIssuer + '/auth',
     });
@@ -84,7 +103,7 @@ describe('direct sign-in', () => {
     // with the code and user ID in the query string.
     const callbackUrl = new URL(experience.page.url());
     expect(callbackUrl.searchParams.get('code')).toBe('mock-code');
-    expect(callbackUrl.searchParams.get('userId')).toBe('foo');
+    expect(callbackUrl.searchParams.get('userId')).toBe(socialUserId);
     expect(new URL(callbackUrl.pathname, callbackUrl.origin).href).toBe(demoAppUrl.href);
 
     await experience.page.close();