1795 auth redirect newsfeed

components/Newsfeed/Newsfeed.tsx

@@ -7,6 +7,7 @@ import { Col, Row, Spinner } from "../bootstrap"
 import { Profile, useProfile, usePublicProfile } from "../db"
 import { NotificationProps, Notifications } from "./NotificationProps"
 import notificationQuery from "./notification-query"
+
 import {
   BillCol,
   Header,
@@ -16,6 +17,8 @@ import {
 import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"
 import { NewsfeedCard } from "components/NewsfeedCard/NewsfeedCard"
 import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
+import { useAppDispatch } from "components/hooks"
+import { authStepChanged } from "components/auth/redux"
 
 export default function Newsfeed() {
   const { t } = useTranslation("common")
@@ -31,6 +34,26 @@ export default function Newsfeed() {
   const [allResults, setAllResults] = useState<Notifications>([])
   const [filteredResults, setFilteredResults] = useState<Notifications>([])
 
+  const dispatch = useAppDispatch()
+
+  const [initialLoadComplete, setInitialLoadComplete] = useState(false)
+
+  useEffect(() => {
+    if (!loading) {
+      setInitialLoadComplete(true)
+    }
+  }, [loading])
+
+  useEffect(() => {
+    if (!initialLoadComplete) return
+
+    if (!profile) {
+      dispatch(authStepChanged("protectedpage"))
+    } else {
+      dispatch(authStepChanged(null))
+    }
+  }, [dispatch, profile, initialLoadComplete])
+
   useEffect(() => {
     const results = allResults.filter(result => {
       if (isShowingOrgs && result.type == `testimony`) return true
@@ -251,7 +274,7 @@ export default function Newsfeed() {
               </StyledContainer>
             </div>
           ) : (
-            <ErrorPage statusCode={404} withDarkMode={false} />
+            <ErrorPage statusCode={401} withDarkMode={false} />
           )}
         </>
       )}

components/auth/AuthModal.tsx

@@ -7,41 +7,51 @@ import VerifyEmailModal from "./VerifyEmailModal"
 import ProfileTypeModal from "./ProfileTypeModal"
 import { AuthFlowStep, authStepChanged, useAuth } from "./redux"
 import { useAppDispatch } from "components/hooks"
+import { useRouter } from "next/router"
 
 export default function AuthModal() {
   const dispatch = useAppDispatch()
-  const { authFlowStep: currentModal } = useAuth()
+  const router = useRouter()
+  const { authFlowStep: currentModal, isFromProtectedPage } = useAuth()
   const setCurrentModal = (step: AuthFlowStep) =>
     dispatch(authStepChanged(step))
-  const close = () => dispatch(authStepChanged(null))
-
+  const close = () => {
+    dispatch(authStepChanged(null))
+    window.location.reload()
+  }
+  const closeModal = () => {
+    dispatch(authStepChanged(null))
+    if (isFromProtectedPage) {
+      router.push("/")
+    }
+  }
   return (
     <>
       <StartModal
-        show={currentModal === "start"}
-        onHide={close}
+        show={currentModal === "start" || currentModal === "protectedpage"}
+        onHide={closeModal}
         onSignInClick={() => setCurrentModal("signIn")}
         onSignUpClick={() => setCurrentModal("chooseProfileType")}
       />
       <ProfileTypeModal
         show={currentModal === "chooseProfileType"}
-        onHide={close}
+        onHide={closeModal}
         onIndividualUserClick={() => setCurrentModal("userSignUp")}
         onOrgUserClick={() => setCurrentModal("orgSignUp")}
       />
       <SignInModal
         show={currentModal === "signIn"}
-        onHide={close}
+        onHide={closeModal}
         onForgotPasswordClick={() => setCurrentModal("forgotPassword")}
       />
       <UserSignUpModal
         show={currentModal === "userSignUp"}
-        onHide={close}
+        onHide={closeModal}
         onSuccessfulSubmit={() => setCurrentModal("verifyEmail")}
       />
       <OrgSignUpModal
         show={currentModal === "orgSignUp"}
-        onHide={close}
+        onHide={closeModal}
         onSuccessfulSubmit={() => setCurrentModal("verifyEmail")}
       />
       <VerifyEmailModal show={currentModal === "verifyEmail"} onHide={close} />

components/auth/redux.ts

@@ -12,6 +12,7 @@ export type AuthFlowStep =
   | "forgotPassword"
   | "verifyEmail"
   | "chooseProfileType"
+  | "protectedpage"
   | null
 
 export interface State {
@@ -23,12 +24,14 @@ export interface State {
   /** True iff user is signed in */
   authenticated: boolean
   authFlowStep: AuthFlowStep
+  isFromProtectedPage: boolean
 }
 
 const initialState: State = {
   authenticated: false,
   user: undefined,
-  authFlowStep: null
+  authFlowStep: null,
+  isFromProtectedPage: false
 }
 
 export const {
@@ -48,6 +51,11 @@ export const {
     },
     authStepChanged(state, action: PayloadAction<AuthFlowStep>) {
       state.authFlowStep = action.payload
+      if (action.payload === "protectedpage") {
+        state.isFromProtectedPage = true
+      } else if (action.payload === "start") {
+        state.isFromProtectedPage = false
+      }
     }
   }
 })

components/auth/service.tsx

@@ -92,6 +92,6 @@ export function requireAuth(
  * Redirects user after logging out.
  */
 export async function signOutAndRedirectToHome() {
+  await Router.push("/")
   await auth.signOut()
-  Router.push("/")
 }

public/locales/en/auth.json

@@ -55,6 +55,4 @@
   "verifyEmail": "Verify your email address",
   "verifyLinkSent": "Please verify your email for your account by clicking the verification link we sent to your email. You will be required to verify your email before submitting testimony.",
   "setUpProfile": "Set Up Your Profile"
-
-
 }