feat: DAH-2876 useRedirect for authenticated pages

app/assets/json/translations/react/en.json

@@ -1594,6 +1594,7 @@
   "signIn.fillInFaster": "Fill in applications faster",
   "signIn.forgotPassword": "Forgot password?",
   "signIn.loggedOutDueToInactivity": "We care about your security. We logged you out due to inactivity. Please sign in to continue.",
+  "signIn.loginRequired": "You must be signed in to see this page. Sign in to continue.",
   "signIn.newAccount.p1": "We sent a link to %{email}.",
   "signIn.newAccount.p2": "Follow the link in your email to finish creating your account. It expires after 24 hours.",
   "signIn.newAccount.sendEmailAgainButton": "Send email again",

app/javascript/__tests__/authentication/withAuthentication.test.tsx

@@ -0,0 +1,141 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { withAuthentication } from "../../authentication/withAuthentication"
+import UserContext, { ContextProps } from "../../authentication/context/UserContext"
+import { isTokenValid } from "../../authentication/token"
+import { getLocalizedPath } from "../../util/routeUtil"
+import { getCurrentLanguage } from "../../util/languageUtil"
+
+jest.mock("../../authentication/token", () => ({
+  isTokenValid: jest.fn(),
+}))
+
+jest.mock("../../util/languageUtil", () => ({
+  getCurrentLanguage: jest.fn(() => "en"),
+  getPathWithoutLanguagePrefix: jest.fn((path) => path),
+}))
+
+jest.mock("../../util/routeUtil", () => ({
+  getLocalizedPath: jest.fn((path) => path),
+}))
+
+describe("withAuthentication", () => {
+  let originalLocation: Location
+  let mockContextValue: ContextProps
+  const TestComponent = () => <div>Protected Component</div>
+  const WrappedComponent = withAuthentication(TestComponent)
+
+  beforeEach(() => {
+    originalLocation = window.location
+    mockContextValue = {
+      profile: {
+        uid: "123",
+        email: "[email protected]",
+        created_at: new Date(),
+        updated_at: new Date(),
+      },
+      signIn: jest.fn(),
+      signOut: jest.fn(),
+      timeOut: jest.fn(),
+      saveProfile: jest.fn(),
+      loading: false,
+      initialStateLoaded: true,
+    }
+
+    // Reset all mocks before each test
+    jest.clearAllMocks()
+    ;(getCurrentLanguage as jest.Mock).mockReturnValue("en")
+
+    // Mock window.location
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any).location
+    window.location = {
+      ...originalLocation,
+      href: "http://test.com",
+      assign: jest.fn(),
+      replace: jest.fn(),
+      reload: jest.fn(),
+      toString: jest.fn(),
+    }
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    window.location = originalLocation
+  })
+
+  it("renders the wrapped component when authenticated", () => {
+    ;(isTokenValid as jest.Mock).mockReturnValue(true)
+
+    const { getByText } = render(
+      <UserContext.Provider value={mockContextValue}>
+        <WrappedComponent />
+      </UserContext.Provider>
+    )
+
+    expect(getByText("Protected Component")).toBeInTheDocument()
+  })
+
+  it("redirects to sign-in when token is invalid", () => {
+    ;(isTokenValid as jest.Mock).mockReturnValue(false)
+    ;(getLocalizedPath as jest.Mock).mockReturnValue("/sign-in")
+
+    render(
+      <UserContext.Provider value={mockContextValue}>
+        <WrappedComponent />
+      </UserContext.Provider>
+    )
+
+    expect(getLocalizedPath).toHaveBeenCalledWith("/sign-in", "en", "")
+    expect(window.location.href).toBe("/sign-in")
+  })
+
+  it("redirects to sign-in with redirect param when specified", () => {
+    ;(isTokenValid as jest.Mock).mockReturnValue(false)
+    ;(getLocalizedPath as jest.Mock).mockReturnValue("/sign-in?redirect=test-path")
+    const WrappedWithRedirect = withAuthentication(TestComponent, { redirectPath: "test-path" })
+
+    render(
+      <UserContext.Provider value={mockContextValue}>
+        <WrappedWithRedirect />
+      </UserContext.Provider>
+    )
+
+    expect(getLocalizedPath).toHaveBeenCalledWith("/sign-in", "en", "?redirect=test-path")
+    expect(window.location.href).toBe("/sign-in?redirect=test-path")
+  })
+
+  it("returns null while loading", () => {
+    ;(isTokenValid as jest.Mock).mockReturnValue(true)
+    mockContextValue.loading = true
+
+    const { container } = render(
+      <UserContext.Provider value={mockContextValue}>
+        <WrappedComponent />
+      </UserContext.Provider>
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it("returns null when profile is undefined", () => {
+    ;(isTokenValid as jest.Mock).mockReturnValue(true)
+    mockContextValue.profile = undefined
+
+    const { container } = render(
+      <UserContext.Provider value={mockContextValue}>
+        <WrappedComponent />
+      </UserContext.Provider>
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it("sets display name for debugging", () => {
+    const TestComponentWithName = () => <div>Named Component</div>
+    TestComponentWithName.displayName = "TestComponentWithName"
+    const WrappedWithName = withAuthentication(TestComponentWithName)
+
+    expect(WrappedWithName.displayName).toBe("WithAuthentication(TestComponentWithName)")
+  })
+})

app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
             name="google-site-verification"
           />
           <meta
-            content="http://localhost/"
+            content="/sign-in?redirect=settings"
             property="og:url"
           />
           <meta
@@ -897,7 +897,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
           name="google-site-verification"
         />
         <meta
-          content="http://localhost/"
+          content="/sign-in?redirect=settings"
           property="og:url"
         />
         <meta
@@ -1819,7 +1819,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
             name="google-site-verification"
           />
           <meta
-            content="http://localhost/"
+            content="/sign-in?redirect=settings"
             property="og:url"
           />
           <meta
@@ -2660,7 +2660,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
           name="google-site-verification"
         />
         <meta
-          content="http://localhost/"
+          content="/sign-in?redirect=settings"
           property="og:url"
         />
         <meta

app/javascript/__tests__/pages/account/account-settings.test.tsx

@@ -31,10 +31,13 @@ describe("<AccountSettingsPage />", () => {
     let originalUseContext
     let promise
     let renderResult
+    let originalLocation: Location
 
     beforeEach(async () => {
       document.documentElement.lang = "en"
       originalUseContext = React.useContext
+      originalLocation = window.location
+
       const mockContextValue: ContextProps = {
         profile: mockProfile,
         signIn: jest.fn(),
@@ -45,6 +48,17 @@ describe("<AccountSettingsPage />", () => {
         initialStateLoaded: true,
       }
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      delete (window as any)?.location
+      ;(window as Window).location = {
+        ...originalLocation,
+        href: "http://dahlia.com",
+        assign: jest.fn(),
+        replace: jest.fn(),
+        reload: jest.fn(),
+        toString: jest.fn(),
+      }
+
       jest.spyOn(React, "useContext").mockImplementation((context) => {
         if (context === UserContext) {
           return mockContextValue
@@ -772,7 +786,7 @@ describe("<AccountSettingsPage />", () => {
     it("redirects to the sign in page", async () => {
       const { queryByText } = await renderAndLoadAsync(<AccountSettingsPage assetPaths={{}} />)
 
-      expect(window.location.href).toBe("/sign-in")
+      expect(window.location.href).toBe("/sign-in?redirect=settings")
       expect(queryByText("Account Settings")).toBeNull()
     })
   })

app/javascript/__tests__/pages/account/my-account.test.tsx

@@ -13,9 +13,11 @@ describe("<MyAccount />", () => {
   describe("when the user is signed in", () => {
     let getByTestId
     let originalUseContext
+    let originalLocation: Location
 
     beforeEach(async () => {
       originalUseContext = React.useContext
+      originalLocation = window.location
       const mockContextValue: ContextProps = {
         profile: {
           uid: "abc123",
@@ -38,6 +40,17 @@ describe("<MyAccount />", () => {
         return originalUseContext(context)
       })
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      delete (window as any)?.location
+      ;(window as Window).location = {
+        ...originalLocation,
+        href: "http://dahlia.com",
+        assign: jest.fn(),
+        replace: jest.fn(),
+        reload: jest.fn(),
+        toString: jest.fn(),
+      }
+
       const renderResult = await renderAndLoadAsync(<MyAccount assetPaths={{}} />)
       getByTestId = renderResult.getByTestId
     })
@@ -94,17 +107,6 @@ describe("<MyAccount />", () => {
         return originalUseContext(context)
       })
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      delete (window as any)?.location
-      ;(window as Window).location = {
-        ...originalLocation,
-        href: "http://dahlia.com",
-        assign: jest.fn(),
-        replace: jest.fn(),
-        reload: jest.fn(),
-        toString: jest.fn(),
-      }
-
       await renderAndLoadAsync(<MyAccount assetPaths={{}} />)
     })
 

app/javascript/__tests__/pages/account/my-applications.test.tsx

@@ -112,7 +112,7 @@ describe("<MyApplications />", () => {
     it("redirects to the sign in page", async () => {
       const { queryByText } = await renderAndLoadAsync(<MyApplications assetPaths={{}} />)
 
-      expect(window.location.href).toBe("http://dahlia.com/sign-in")
+      expect(window.location.href).toBe("http://dahlia.com/sign-in?redirect=applications")
       expect(queryByText("My applications")).toBeNull()
     })
   })

app/javascript/authentication/SignInForm.tsx

@@ -9,11 +9,12 @@ import {
   Icon,
   AlertBox,
   LinkButton,
+  NavigationContext,
 } from "@bloom-housing/ui-components"
 import { Link, Heading } from "@bloom-housing/ui-seeds"
 import { FieldValues, SubmitHandler, useForm } from "react-hook-form"
 
-import { getForgotPasswordPath, getMyAccountPath } from "../util/routeUtil"
+import { getForgotPasswordPath, getSignInRedirectUrl } from "../util/routeUtil"
 import EmailFieldset from "../pages/account/components/EmailFieldset"
 import PasswordFieldset from "../pages/account/components/PasswordFieldset"
 import "../pages/account/styles/account.scss"
@@ -31,6 +32,11 @@ const getExpiredConfirmedEmail = () => {
   return expiredUnconfirmedEmail
 }
 
+const getRedirectFromUrl = () => {
+  const urlParams = new URLSearchParams(window.location.search)
+  return urlParams.get("redirect")
+}
+
 const SignInFormCard = ({
   onSubmit,
   requestError,
@@ -111,6 +117,8 @@ const SignInForm = () => {
 
   const { signIn } = useContext(UserContext)
 
+  const { router } = useContext(NavigationContext)
+
   const handleRequestError = (error: AxiosError<{ error: string; email: string }>) => {
     if (error.response.data.error === "not_confirmed") {
       setNewAccountNotConfirmedModal(error.response.data.email)
@@ -130,7 +138,8 @@ const SignInForm = () => {
 
     signIn(email, password)
       .then(() => {
-        window.location.href = getMyAccountPath()
+        const redirectUrl = getRedirectFromUrl()
+        router.push(getSignInRedirectUrl(redirectUrl || ""))
         window.scrollTo(0, 0)
       })
       .catch((error: AxiosError<{ error: string; email: string }>) => {
@@ -139,6 +148,10 @@ const SignInForm = () => {
   }
 
   useEffect(() => {
+    const redirectUrl = getRedirectFromUrl()
+    if (redirectUrl) {
+      setRequestError(t("signIn.loginRequired"))
+    }
     const newAccountEmail: string | null = window.sessionStorage.getItem("newAccount")
     const expiredConfirmedEmail = getExpiredConfirmedEmail()
     const expiredUnconfirmedEmail = getExpiredUnconfirmedEmail()

app/javascript/authentication/withAuthentication.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { isTokenValid } from "./token"
+import UserContext from "./context/UserContext"
+import { getLocalizedPath } from "../util/routeUtil"
+import { getCurrentLanguage } from "../util/languageUtil"
+
+interface WithAuthenticationProps {
+  redirectPath?: string
+}
+
+/**
+ * Higher-order component that handles authentication for protected routes.
+ * It will:
+ * 1. Check for a valid token on mount
+ * 2. Show nothing while profile is loading
+ * 3. Redirect to sign-in if no valid token or no profile
+ * 4. Render the wrapped component only when authenticated
+ *
+ * @param WrappedComponent The component to protect
+ * @param redirectPath Optional path to redirect back to after sign-in
+ */
+export const withAuthentication = <P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  { redirectPath }: WithAuthenticationProps = {}
+) => {
+  const WithAuthenticationComponent = (props: P) => {
+    const { profile, loading } = React.useContext(UserContext)
+
+    React.useEffect(() => {
+      if (!isTokenValid()) {
+        const redirectParam = redirectPath ? `?redirect=${redirectPath}` : ""
+        const language = getCurrentLanguage()
+        const signInPath = getLocalizedPath("/sign-in", language, redirectParam)
+        window.location.href = signInPath
+      }
+    }, [])
+
+    if (loading) {
+      return null
+    }
+
+    if (!profile) {
+      return null
+    }
+
+    return <WrappedComponent {...props} />
+  }
+
+  // Set display name for easier debugging
+  WithAuthenticationComponent.displayName = `WithAuthentication(${
+    WrappedComponent.displayName || WrappedComponent.name || "Component"
+  })`
+
+  return WithAuthenticationComponent
+}