Merge pull request #381 from mit-27/fix-protected-route

Fix protected route redirect
panoratech · Apr 20, 2024 · c91e681 · c91e681
2 parents 41a1b1f + cc59c05
commit c91e681
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 26 deletions.
diff --git a/apps/client-ts/src/app/api-keys/layout.tsx b/apps/client-ts/src/app/api-keys/layout.tsx
@@ -12,13 +12,13 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { session } = useStytchSession();
+  const { session,isInitialized } = useStytchSession();
   const router = useRouter();
   useEffect(() => {
-    if(config.DISTRIBUTION !== "selfhost" && !session){
+    if(config.DISTRIBUTION !== "selfhosted" && isInitialized && !session){
       router.replace("/b2c/login");
     }
-  }, [session, router]);
+  }, [session,isInitialized, router]);
 
   return (
     <>

diff --git a/apps/client-ts/src/app/b2c/profile/layout.tsx b/apps/client-ts/src/app/b2c/profile/layout.tsx
@@ -11,13 +11,13 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { session } = useStytchSession();
+  const { session,isInitialized } = useStytchSession();
   const router = useRouter();
   useEffect(() => {
-    if (!session) {
+    if (isInitialized && !session) {
       router.replace("/b2c/login");
     }
-  }, [session, router]);
+  }, [session, isInitialized, router]);
   console.log('WEBAPP DOMAIN is '+ process.env.NEXT_PUBLIC_WEBAPP_DOMAIN)
 
   return (

diff --git a/apps/client-ts/src/app/configuration/layout.tsx b/apps/client-ts/src/app/configuration/layout.tsx
@@ -12,13 +12,14 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { session } = useStytchSession();
+  const { session,isInitialized } = useStytchSession();
+
   const router = useRouter();
-  useEffect(() => {
-    if(config.DISTRIBUTION !== "selfhost" && !session){
+  useEffect(() => {    
+    if(config.DISTRIBUTION !== "selfhosted" && isInitialized && !session){
       router.push("/b2c/login");
     }
-  }, [session, router]);
+  }, [session, isInitialized, router]);
 
   return (
     <>

diff --git a/apps/client-ts/src/app/connections/layout.tsx b/apps/client-ts/src/app/connections/layout.tsx
@@ -14,14 +14,13 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { session } = useStytchSession();
-  console.log("session inside connections page is "+ JSON.stringify(session))
+  const { session,isInitialized } = useStytchSession();
   const router = useRouter();
   useEffect(() => {
-    if(config.DISTRIBUTION !== "selfhost" && !session){
+    if(config.DISTRIBUTION !== "selfhosted" && isInitialized && !session){
       router.push("/b2c/login");
     }
-  }, [session, router]);
+  }, [session,isInitialized, router]);
 
   return (
     <>

diff --git a/apps/client-ts/src/app/dashboard/layout.tsx b/apps/client-ts/src/app/dashboard/layout.tsx
@@ -14,13 +14,13 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { session } = useStytchSession();
+  const { session,isInitialized } = useStytchSession();
   const router = useRouter();
   useEffect(() => {
-    if(config.DISTRIBUTION !== "selfhost" && !session){
+    if(config.DISTRIBUTION !== "selfhosted" && isInitialized && !session){
       router.replace("/b2c/login");
     }
-  }, [session, router]);
+  }, [session,isInitialized, router]);
 
   return (
     <>

diff --git a/apps/client-ts/src/app/events/layout.tsx b/apps/client-ts/src/app/events/layout.tsx
@@ -18,10 +18,10 @@ export default function Layout({
   const router = useRouter();
   useEffect(() => {
 
-    if(config.DISTRIBUTION !== "selfhost" && !session){
+    if(config.DISTRIBUTION !== "selfhosted" && isInitialized && !session){
       router.replace("/b2c/login");
     }
-  }, [session, router]);
+  }, [session,isInitialized, router]);
 
   return (
     <>

diff --git a/apps/client-ts/src/components/Nav/user-nav.tsx b/apps/client-ts/src/components/Nav/user-nav.tsx
@@ -16,12 +16,15 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import useProfile from "@/hooks/useProfile";
 import useProfileStore from "@/state/profileStore";
-import { useStytchUser } from "@stytch/nextjs";
+import { useStytchUser,useStytch } from "@stytch/nextjs";
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { useEffect } from "react";
 
 export function UserNav() {
+  const stytch = useStytch();
   const { user } = useStytchUser();
+  const router = useRouter();
   const {data, isLoading} = useProfile(user?.user_id!);
   if(!data) {
     console.log("loading profiles");
@@ -40,6 +43,10 @@ export function UserNav() {
     }
   }, [data, setProfile]);
 
+  const onLogout = () => {
+    stytch.session.revoke()
+    router.push('/b2c/login');
+  }
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -59,7 +66,7 @@ export function UserNav() {
           </div>
         </DropdownMenuLabel>
         <DropdownMenuGroup>
-          <Link href={"/profile"}>
+          <Link href={"/b2c/profile"}>
             <DropdownMenuItem>
               Profile
             </DropdownMenuItem>
@@ -72,11 +79,9 @@ export function UserNav() {
       </DropdownMenuItem>*/}
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Link href={"/api/logout"}>
+            <DropdownMenuItem onClick={() => onLogout()} >
             Log out
-          </Link>
-        </DropdownMenuItem>
+            </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )

diff --git a/apps/client-ts/src/components/RootLayout/index.tsx b/apps/client-ts/src/components/RootLayout/index.tsx
@@ -65,7 +65,7 @@ export const RootLayout = () => {
               onLinkClick={handlePageChange}
             />
             {
-              config.DISTRIBUTION == "managed" && 
+              config.DISTRIBUTION === "managed" && 
               (
                 <div className='ml-auto flex lg:flex-col items-center space-x-4 w-full'>
                   <UserNav />