Adding auth provider

Author: HuanFengYeh

components/Newsfeed/Newsfeed.tsx

@@ -16,11 +16,12 @@ import {
 import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"
 import { NewsfeedCard } from "components/NewsfeedCard/NewsfeedCard"
 import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
+import { useAuthRedirect } from "components/auth/AuthRedirect"
 
 export default function Newsfeed() {
   const { t } = useTranslation("common")
 
-  const { user } = useAuth()
+  const { user, loading: authLoading } = useAuthRedirect()
   const uid = user?.uid
   const { result: profile, loading } = usePublicProfile(uid)
   const isUser = user?.uid !== undefined
@@ -191,7 +192,7 @@ export default function Newsfeed() {
 
   return (
     <>
-      {loading ? (
+      {authLoading || loading ? (
         <Row>
           <Spinner animation="border" className="mx-auto" />
         </Row>

components/auth/AuthRedirect.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useAuth } from '../auth'; // Adjust this path to your actual useAuth hook
+
+export function useAuthRedirect(isAuthRequired: boolean = true) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading) { // Wait until authentication state is loaded
+      if (isAuthRequired && !user) {
+        const redirectPath = router.asPath;
+        // console.log("Redirecting to login:", redirectPath); // For debugging
+        router.push(`/login?redirect=${encodeURIComponent(redirectPath)}`);
+      }
+    }
+  }, [user, loading, router, isAuthRequired]); // Dependencies for useEffect
+
+  return { user, loading }; // Return these for use in the component if needed
+}

components/auth/Provider.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react"
+import { getAuth, onAuthStateChanged, User } from "firebase/auth"
+import { useDispatch } from "react-redux"
+import { authChanged } from "./redux"
+
+export const Provider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    const auth = getAuth()
+    const unsubscribe = onAuthStateChanged(auth, (user: User | null) => {
+      dispatch(authChanged({ user }))
+    })
+
+    return () => unsubscribe()
+  }, [])
+
+  return <>{children}</>
+}

components/auth/index.ts

@@ -3,3 +3,4 @@ export * from "./service"
 export { default as SignInWithButton } from "./SignInWithButton"
 export { default as SignOut } from "./SignOut"
 export * from "./types"
+export { Provider } from "./Provider"

components/auth/redux.ts

@@ -23,12 +23,14 @@ export interface State {
   /** True iff user is signed in */
   authenticated: boolean
   authFlowStep: AuthFlowStep
+  loading: boolean
 }
 
 const initialState: State = {
   authenticated: false,
   user: undefined,
-  authFlowStep: null
+  authFlowStep: null,
+  loading: true
 }
 
 export const {
@@ -45,6 +47,7 @@ export const {
       state.user = payload.user
       state.claims = payload.claims
       state.authenticated = Boolean(payload.user)
+      state.loading = false
     },
     authStepChanged(state, action: PayloadAction<AuthFlowStep>) {
       state.authFlowStep = action.payload