From 194822b670ed4958a10558b534df3a0d1b87cdc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krystian=20Kie=C5=82basa?= Date: Sun, 22 Dec 2024 20:25:19 +0100 Subject: [PATCH] fix: #142 fix logout process --- src/app/api/logout/route.ts | 20 ---- src/app/auth/logout/page.tsx | 13 --- src/app/auth/logout/route.ts | 20 ++++ src/app/page.tsx | 5 +- src/components/auth/AuthProvidersBtns.tsx | 15 ++- src/components/home/HomePageContent.tsx | 20 +++- .../layout/navbar/right/UserDropDownMenu.tsx | 106 +++++++++--------- src/utils/methods/index.ts | 5 + tailwind.config.ts | 2 + 9 files changed, 111 insertions(+), 95 deletions(-) delete mode 100755 src/app/api/logout/route.ts delete mode 100644 src/app/auth/logout/page.tsx create mode 100755 src/app/auth/logout/route.ts diff --git a/src/app/api/logout/route.ts b/src/app/api/logout/route.ts deleted file mode 100755 index b52a169..0000000 --- a/src/app/api/logout/route.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { HttpStatusCode } from 'axios'; -import { NextRequest, NextResponse } from 'next/server'; - -import AuthService from '@/services/auth/authService'; - -const ACCESS_TOKEN_COOKIE = 'AUTH_CONTEXT'; -// const REFRESH_TOKEN_COOKIE = 'AUTH_PERSIST'; - -const accessCookie = `${ACCESS_TOKEN_COOKIE}=; Path=/; Max-Age=0; SameSite=Lax;`; -const refreshCookie = `${ACCESS_TOKEN_COOKIE}=; Path=/; Max-Age=0; SameSite=Lax;`; - -export function GET(req: NextRequest) { - const headers: HeadersInit = { - 'Set-Cookie': `${accessCookie}, ${refreshCookie}`, - }; - - AuthService.logout(); - - return NextResponse.rewrite(req.nextUrl.origin, { status: HttpStatusCode.PermanentRedirect, headers }); -} diff --git a/src/app/auth/logout/page.tsx b/src/app/auth/logout/page.tsx deleted file mode 100644 index 632706c..0000000 --- a/src/app/auth/logout/page.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Metadata } from 'next'; - -import LogoutPageContent from '@/components/auth/logout/LogoutPageContent'; -import { PAGE_TITLE } from '@/utils/constant'; - -export const metadata: Metadata = { - title: PAGE_TITLE.SIGN_OUT, -}; - -export default function AuthPage() { - return ; -} diff --git a/src/app/auth/logout/route.ts b/src/app/auth/logout/route.ts new file mode 100755 index 0000000..a7c3a5d --- /dev/null +++ b/src/app/auth/logout/route.ts @@ -0,0 +1,20 @@ +import { NextRequest } from 'next/server'; +import AuthService from '@/services/auth/authService'; + +const ACCESS_TOKEN_COOKIE = 'AUTH_CONTEXT'; +const REFRESH_TOKEN_COOKIE = 'AUTH_PERSIST'; + +export async function GET(req: NextRequest) { + const domain = req.headers.get('host')?.split(':')[0]; + const headers: HeadersInit = new Headers(); + headers.append('Set-Cookie', `${ACCESS_TOKEN_COOKIE}=; Domain=${domain}; Path=/; Max-Age=0; SameSite=Lax; HttpOnly`); + headers.append('Set-Cookie', `${REFRESH_TOKEN_COOKIE}=; Domain=${domain}; Path=/; Max-Age=0; SameSite=Lax; HttpOnly`); + + //await AuthService.logout(); + + const redirectUrl = new URL(req.nextUrl.origin); + redirectUrl.searchParams.append('logout', ''); + + //return NextResponse.redirect(req.nextUrl.origin, { status: HttpStatusCode.PermanentRedirect, headers }); + return Response.json({ message: redirectUrl.toString() }); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index bac3b75..58fca60 100755 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,11 +2,12 @@ import { Metadata } from 'next'; import HomePageContent from '@/components/home/HomePageContent'; import { PAGE_TITLE } from '@/utils/constant'; +import PageQueryProps from '@/utils/types/page/pageQueryProps'; export const metadata: Metadata = { title: PAGE_TITLE.HOME, }; -export default function Home() { - return ; +export default async function Home({ searchParams }: PageQueryProps<{ logout: string }>) { + return ; } diff --git a/src/components/auth/AuthProvidersBtns.tsx b/src/components/auth/AuthProvidersBtns.tsx index 47807ef..5154202 100644 --- a/src/components/auth/AuthProvidersBtns.tsx +++ b/src/components/auth/AuthProvidersBtns.tsx @@ -10,6 +10,7 @@ import AuthService from '@/services/auth/authService'; import { ProviderLiResponse } from '@/services/auth/types'; import { TEXT } from '@/utils/constant'; import useFetchState, { Status } from '@/utils/hooks/useFetchState'; +import { capitalize } from '@/utils/methods'; const PROVIDERS: { name: string; icoType: IconType; icoColor: string }[] = [ { @@ -51,13 +52,15 @@ export default function AuthProvidersBtns() { ))} diff --git a/src/components/home/HomePageContent.tsx b/src/components/home/HomePageContent.tsx index b8f5476..0bcf00d 100644 --- a/src/components/home/HomePageContent.tsx +++ b/src/components/home/HomePageContent.tsx @@ -1,10 +1,26 @@ -import React from 'react'; +'use client'; +import React, { useEffect } from 'react'; +import { useRouter } from 'next/navigation'; import HomeShowSection from '@/components/home/HomeShowSection'; import Container from '@/components/layout/Container'; import PageContent from '@/components/layout/PageContent'; -export default function HomePageContent() { +interface HomePageContentProps { + searchParams?: { logout: string }; +} + +export default function HomePageContent({ searchParams }: HomePageContentProps) { + const router = useRouter(); + + useEffect(() => { + if (searchParams?.logout !== undefined) { + const url = new URL(window.location.href + '/auth'); + url.searchParams.delete('logout'); + router.replace(url.toString()); + } + }, [searchParams, router]); + return ( diff --git a/src/components/layout/navbar/right/UserDropDownMenu.tsx b/src/components/layout/navbar/right/UserDropDownMenu.tsx index bbb22a6..c812865 100644 --- a/src/components/layout/navbar/right/UserDropDownMenu.tsx +++ b/src/components/layout/navbar/right/UserDropDownMenu.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { IconType } from 'react-icons'; import { IoDocumentOutline, @@ -32,57 +32,59 @@ interface UserDropDownMenuProps { export default function UserDropDownMenu({ menuClassName }: UserDropDownMenuProps) { const { session } = useSessionContext(); - const menus: MenuLink[] = [ - { - type: Menu.LINK, - label: USER_NAV_MENU.LINK.USER_ACCOUNT, - icon: IoPersonOutline, - href: `/users/${session?.user.id}`, - }, - { - type: Menu.HEADER, - label: 'ZAWARTOŚĆ', - }, - { - type: Menu.LINK, - label: USER_NAV_MENU.LINK.YOUR_MATERIALS, - icon: IoDocumentOutline, - href: `/materials/users/${session?.user.id}`, - isParsed: true, - }, - { - type: Menu.HEADER, - label: 'ADMINISTRACJA', - }, - { - type: Menu.LINK, - label: USER_NAV_MENU.LINK.USERS_MATERIALS, - icon: IoFileTrayOutline, - href: '/materials/manage', - }, - { - type: Menu.LINK, - label: USER_NAV_MENU.LINK.USERS, - icon: IoPersonOutline, - href: '/users/manage', - }, - { - type: Menu.HEADER, - label: 'KONTO', - }, - { - type: Menu.LINK, - label: USER_NAV_MENU.LINK.SETTINGS, - icon: IoSettingsOutline, - href: '/settings', - }, - { - type: Menu.LINK, - label: USER_NAV_MENU.LINK.LOGOUT, - icon: IoLogOutOutline, - href: '/api/logout', - }, - ]; + const menus: MenuLink[] = useMemo(() => { + return [ + { + type: Menu.LINK, + label: USER_NAV_MENU.LINK.USER_ACCOUNT, + icon: IoPersonOutline, + href: `/users/${session?.user.id}`, + }, + { + type: Menu.HEADER, + label: 'ZAWARTOŚĆ', + }, + { + type: Menu.LINK, + label: USER_NAV_MENU.LINK.YOUR_MATERIALS, + icon: IoDocumentOutline, + href: `/materials/users/${session?.user.id}`, + isParsed: true, + }, + { + type: Menu.HEADER, + label: 'ADMINISTRACJA', + }, + { + type: Menu.LINK, + label: USER_NAV_MENU.LINK.USERS_MATERIALS, + icon: IoFileTrayOutline, + href: '/materials/manage', + }, + { + type: Menu.LINK, + label: USER_NAV_MENU.LINK.USERS, + icon: IoPersonOutline, + href: '/users/manage', + }, + { + type: Menu.HEADER, + label: 'KONTO', + }, + { + type: Menu.LINK, + label: USER_NAV_MENU.LINK.SETTINGS, + icon: IoSettingsOutline, + href: '/settings', + }, + { + type: Menu.LINK, + label: USER_NAV_MENU.LINK.LOGOUT, + icon: IoLogOutOutline, + href: '/auth/logout', + }, + ]; + }, [session?.user.id]); return (
diff --git a/src/utils/methods/index.ts b/src/utils/methods/index.ts index dc47c53..1ae1711 100755 --- a/src/utils/methods/index.ts +++ b/src/utils/methods/index.ts @@ -117,3 +117,8 @@ export function calculateTimeDifference(createdDate: string) { return 'Mniej niż 1 minutę temu'; } } + +export const capitalize = (text: string) => { + if (!text) return ''; + return text.charAt(0).toUpperCase() + text.slice(1); +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 52f04f9..2225a9a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -41,6 +41,7 @@ const config: Config = { nav: '3.75rem', fullContent: 'calc(100vh - 3.5rem - 0.5rem - 0.5rem)', navMenu: '2.625rem', + '13': '3.25rem', }, inset: { nav: '3.75rem', @@ -67,6 +68,7 @@ const config: Config = { fullContent: 'calc(100vh - 3.5rem - 0.5rem - 0.5rem)', }, padding: { + '0.25': '0.0625rem', '1/2': '50%', '1/4': '25%', nav: '3.75rem',