client: change all auth redirects to middleware
This commit is contained in:
parent
abe419daba
commit
bf878473af
4 changed files with 27 additions and 83 deletions
|
@ -5,7 +5,6 @@ import { useEffect, useMemo, useState } from "react";
|
||||||
import styles from './header.module.css';
|
import styles from './header.module.css';
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import useSignedIn from "../../lib/hooks/use-signed-in";
|
import useSignedIn from "../../lib/hooks/use-signed-in";
|
||||||
import Cookies from 'js-cookie'
|
|
||||||
|
|
||||||
type Tab = {
|
type Tab = {
|
||||||
name: string
|
name: string
|
||||||
|
@ -23,7 +22,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
|
||||||
const [expanded, setExpanded] = useState<boolean>(false)
|
const [expanded, setExpanded] = useState<boolean>(false)
|
||||||
const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true })
|
const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true })
|
||||||
const isMobile = useMediaQuery('xs', { match: 'down' })
|
const isMobile = useMediaQuery('xs', { match: 'down' })
|
||||||
const { isLoading, isSignedIn, signout } = useSignedIn({ redirectIfNotAuthed: false })
|
const isSignedIn = useSignedIn()
|
||||||
const [pages, setPages] = useState<Tab[]>([])
|
const [pages, setPages] = useState<Tab[]>([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -42,7 +41,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
|
||||||
name: "Home",
|
name: "Home",
|
||||||
href: "/",
|
href: "/",
|
||||||
icon: <HomeIcon />,
|
icon: <HomeIcon />,
|
||||||
condition: true,
|
condition: !isSignedIn,
|
||||||
value: "home"
|
value: "home"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -59,34 +58,9 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
|
||||||
condition: isSignedIn,
|
condition: isSignedIn,
|
||||||
value: "mine"
|
value: "mine"
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// name: "Settings",
|
|
||||||
// href: "/settings",
|
|
||||||
// icon: <SettingsIcon />,
|
|
||||||
// condition: isSignedIn
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
name: "Sign out",
|
name: "Sign out",
|
||||||
onClick: () => {
|
href: "/signout",
|
||||||
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",
|
|
||||||
icon: <SignoutIcon />,
|
icon: <SignoutIcon />,
|
||||||
condition: isSignedIn,
|
condition: isSignedIn,
|
||||||
value: "signout"
|
value: "signout"
|
||||||
|
@ -126,12 +100,8 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return setPages([])
|
|
||||||
}
|
|
||||||
|
|
||||||
setPages(pageList.filter(page => page.condition))
|
setPages(pageList.filter(page => page.condition))
|
||||||
}, [changeTheme, isLoading, isMobile, isSignedIn, router, signout, theme])
|
}, [changeTheme, isMobile, isSignedIn, theme])
|
||||||
|
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
// setSelectedTab(pages.find((page) => {
|
// setSelectedTab(pages.find((page) => {
|
||||||
|
@ -161,7 +131,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
|
||||||
hideDivider
|
hideDivider
|
||||||
hideBorder
|
hideBorder
|
||||||
onChange={onTabChange}>
|
onChange={onTabChange}>
|
||||||
{!isLoading && pages.map((tab) => {
|
{pages.map((tab) => {
|
||||||
return <Tabs.Item
|
return <Tabs.Item
|
||||||
font="14px"
|
font="14px"
|
||||||
label={<>{tab.icon} {tab.name}</>}
|
label={<>{tab.icon} {tab.name}</>}
|
||||||
|
|
|
@ -1,48 +1,18 @@
|
||||||
import { useRouter } from "next/router";
|
import Cookies from "js-cookie";
|
||||||
import { useCallback, useEffect } from "react"
|
import { useEffect, useState } from "react";
|
||||||
import useSharedState from "./use-shared-state";
|
|
||||||
import Cookies from 'js-cookie'
|
|
||||||
|
|
||||||
const useSignedIn = ({ redirectIfNotAuthed = false }: { redirectIfNotAuthed?: boolean }) => {
|
const useSignedIn = () => {
|
||||||
const [isSignedIn, setSignedIn] = useSharedState('isSignedIn', false)
|
const [signedIn, setSignedIn] = useState(typeof window === 'undefined' ? false : !!Cookies.get("drift-token"));
|
||||||
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')
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function checkToken() {
|
if (Cookies.get("drift-token")) {
|
||||||
const token = Cookies.get('drift-token')
|
setSignedIn(true);
|
||||||
if (token) {
|
} else {
|
||||||
const response = await fetch('/server-api/auth/verify-token', {
|
setSignedIn(false);
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`
|
|
||||||
}
|
}
|
||||||
})
|
}, []);
|
||||||
if (response.ok) {
|
|
||||||
setSignedIn(true)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
setLoading(true)
|
|
||||||
checkToken()
|
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
return signedIn;
|
||||||
checkToken()
|
|
||||||
}, 10000);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [setLoading, setSignedIn])
|
|
||||||
|
|
||||||
return { isSignedIn, isLoading, signout }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default useSignedIn
|
export default useSignedIn;
|
||||||
|
|
|
@ -18,6 +18,8 @@ export function middleware(req: NextRequest, ev: NextFetchEvent) {
|
||||||
if (signedIn) {
|
if (signedIn) {
|
||||||
const resp = NextResponse.redirect(getURL(''));
|
const resp = NextResponse.redirect(getURL(''));
|
||||||
resp.clearCookie('drift-token');
|
resp.clearCookie('drift-token');
|
||||||
|
resp.clearCookie('drift-userid');
|
||||||
|
|
||||||
return resp
|
return resp
|
||||||
}
|
}
|
||||||
} else if (pathname === '/') {
|
} else if (pathname === '/') {
|
||||||
|
@ -30,10 +32,14 @@ export function middleware(req: NextRequest, ev: NextFetchEvent) {
|
||||||
return NextResponse.redirect(getURL(''))
|
return NextResponse.redirect(getURL(''))
|
||||||
}
|
}
|
||||||
// If you're signed in we redirect the sign in page to the home page (which is the new page)
|
// 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) {
|
if (signedIn) {
|
||||||
return NextResponse.redirect(getURL(''))
|
return NextResponse.redirect(getURL(''))
|
||||||
}
|
}
|
||||||
|
} else if (pathname === '/new') {
|
||||||
|
if (!signedIn) {
|
||||||
|
return NextResponse.redirect(getURL(''))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return NextResponse.next()
|
return NextResponse.next()
|
||||||
|
|
|
@ -7,12 +7,10 @@ import { ThemeProps } from './_app'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import PageSeo from '@components/page-seo'
|
import PageSeo from '@components/page-seo'
|
||||||
|
|
||||||
const Home = ({ theme, changeTheme }: ThemeProps) => {
|
const New = ({ theme, changeTheme }: ThemeProps) => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { isSignedIn, isLoading } = useSignedIn({ redirectIfNotAuthed: true })
|
const isSignedIn = useSignedIn()
|
||||||
if (!isSignedIn && !isLoading) {
|
|
||||||
router.push("/signin")
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<Page className={styles.container} width="100%">
|
<Page className={styles.container} width="100%">
|
||||||
<PageSeo title="Drift - New" />
|
<PageSeo title="Drift - New" />
|
||||||
|
@ -28,4 +26,4 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Home
|
export default New
|
||||||
|
|
Loading…
Reference in a new issue