From bf878473af50066dcbcb9cf2141eb518e729ec23 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Mon, 21 Mar 2022 01:36:31 -0700 Subject: [PATCH] client: change all auth redirects to middleware --- client/components/header/index.tsx | 40 +++-------------------- client/lib/hooks/use-signed-in.ts | 52 +++++++----------------------- client/pages/_middleware.tsx | 8 ++++- client/pages/new.tsx | 10 +++--- 4 files changed, 27 insertions(+), 83 deletions(-) diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx index e5a69135..d8feabce 100644 --- a/client/components/header/index.tsx +++ b/client/components/header/index.tsx @@ -5,7 +5,6 @@ import { useEffect, useMemo, useState } from "react"; import styles from './header.module.css'; import { useRouter } from "next/router"; import useSignedIn from "../../lib/hooks/use-signed-in"; -import Cookies from 'js-cookie' type Tab = { name: string @@ -23,7 +22,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => { const [expanded, setExpanded] = useState(false) const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true }) const isMobile = useMediaQuery('xs', { match: 'down' }) - const { isLoading, isSignedIn, signout } = useSignedIn({ redirectIfNotAuthed: false }) + const isSignedIn = useSignedIn() const [pages, setPages] = useState([]) useEffect(() => { @@ -42,7 +41,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => { name: "Home", href: "/", icon: , - condition: true, + condition: !isSignedIn, value: "home" }, { @@ -59,34 +58,9 @@ const Header = ({ changeTheme, theme }: DriftProps) => { condition: isSignedIn, value: "mine" }, - // { - // name: "Settings", - // href: "/settings", - // icon: , - // condition: isSignedIn - // }, { name: "Sign out", - onClick: () => { - if (typeof window !== 'undefined') { - localStorage.clear(); - - // // send token to API blacklist - // fetch('/api/auth/signout', { - // method: 'POST', - // headers: { - // 'Content-Type': 'application/json' - // }, - // body: JSON.stringify({ - // token: Cookies.get("drift-token") - // }) - // }) - - signout(); - router.push("/signin"); - } - }, - href: "#signout", + href: "/signout", icon: , condition: isSignedIn, value: "signout" @@ -126,12 +100,8 @@ const Header = ({ changeTheme, theme }: DriftProps) => { } ] - if (isLoading) { - return setPages([]) - } - setPages(pageList.filter(page => page.condition)) - }, [changeTheme, isLoading, isMobile, isSignedIn, router, signout, theme]) + }, [changeTheme, isMobile, isSignedIn, theme]) // useEffect(() => { // setSelectedTab(pages.find((page) => { @@ -161,7 +131,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => { hideDivider hideBorder onChange={onTabChange}> - {!isLoading && pages.map((tab) => { + {pages.map((tab) => { return {tab.icon} {tab.name}} diff --git a/client/lib/hooks/use-signed-in.ts b/client/lib/hooks/use-signed-in.ts index b8cedc94..c19faeb4 100644 --- a/client/lib/hooks/use-signed-in.ts +++ b/client/lib/hooks/use-signed-in.ts @@ -1,48 +1,18 @@ -import { useRouter } from "next/router"; -import { useCallback, useEffect } from "react" -import useSharedState from "./use-shared-state"; -import Cookies from 'js-cookie' +import Cookies from "js-cookie"; +import { useEffect, useState } from "react"; -const useSignedIn = ({ redirectIfNotAuthed = false }: { redirectIfNotAuthed?: boolean }) => { - const [isSignedIn, setSignedIn] = useSharedState('isSignedIn', false) - const [isLoading, setLoading] = useSharedState('isLoading', true) - const signout = useCallback(() => { - Cookies.remove('drift-token') - setSignedIn(false) - }, [setSignedIn]) - - const router = useRouter(); - if (redirectIfNotAuthed && !isLoading && isSignedIn === false) { - router.push('/signin') - } +const useSignedIn = () => { + const [signedIn, setSignedIn] = useState(typeof window === 'undefined' ? false : !!Cookies.get("drift-token")); useEffect(() => { - async function checkToken() { - const token = Cookies.get('drift-token') - if (token) { - const response = await fetch('/server-api/auth/verify-token', { - method: 'GET', - headers: { - 'Authorization': `Bearer ${token}` - } - }) - if (response.ok) { - setSignedIn(true) - } - } - setLoading(false) + if (Cookies.get("drift-token")) { + setSignedIn(true); + } else { + setSignedIn(false); } - setLoading(true) - checkToken() + }, []); - const interval = setInterval(() => { - checkToken() - }, 10000); - - return () => clearInterval(interval); - }, [setLoading, setSignedIn]) - - return { isSignedIn, isLoading, signout } + return signedIn; } -export default useSignedIn +export default useSignedIn; diff --git a/client/pages/_middleware.tsx b/client/pages/_middleware.tsx index d397e5af..a7909c91 100644 --- a/client/pages/_middleware.tsx +++ b/client/pages/_middleware.tsx @@ -18,6 +18,8 @@ export function middleware(req: NextRequest, ev: NextFetchEvent) { if (signedIn) { const resp = NextResponse.redirect(getURL('')); resp.clearCookie('drift-token'); + resp.clearCookie('drift-userid'); + return resp } } else if (pathname === '/') { @@ -30,10 +32,14 @@ export function middleware(req: NextRequest, ev: NextFetchEvent) { return NextResponse.redirect(getURL('')) } // If you're signed in we redirect the sign in page to the home page (which is the new page) - } else if (pathname === '/signin') { + } else if (pathname === '/signin' || pathname === '/signup') { if (signedIn) { return NextResponse.redirect(getURL('')) } + } else if (pathname === '/new') { + if (!signedIn) { + return NextResponse.redirect(getURL('')) + } } return NextResponse.next() diff --git a/client/pages/new.tsx b/client/pages/new.tsx index 9c66928b..b8966fc6 100644 --- a/client/pages/new.tsx +++ b/client/pages/new.tsx @@ -7,12 +7,10 @@ import { ThemeProps } from './_app' import { useRouter } from 'next/router' import PageSeo from '@components/page-seo' -const Home = ({ theme, changeTheme }: ThemeProps) => { +const New = ({ theme, changeTheme }: ThemeProps) => { const router = useRouter() - const { isSignedIn, isLoading } = useSignedIn({ redirectIfNotAuthed: true }) - if (!isSignedIn && !isLoading) { - router.push("/signin") - } + const isSignedIn = useSignedIn() + return ( @@ -28,4 +26,4 @@ const Home = ({ theme, changeTheme }: ThemeProps) => { ) } -export default Home +export default New