fix user context

app/actions/login.ts

@@ -26,7 +26,7 @@ export async function prepareLogin() {
   url.searchParams.set('client_id', process.env.REACT_APP_OSU_CLIENT_ID as string);
   url.searchParams.set('redirect_uri', process.env.REACT_APP_OSU_CALLBACK_URL as string);
   url.searchParams.set('response_type', 'code');
-  url.searchParams.set('scope', 'public+friends.read');
+  url.searchParams.set('scope', 'public friends.read');
   url.searchParams.set('state', state);
 
   return redirect(url.toString());
@@ -86,7 +86,7 @@ export async function logout(getSessionParams?: GetSessionParams) {
   await clearCookies(getSessionParams?.res?.cookies);
 
   if (!getSessionParams) {
-    return redirect(new URL('/', process.env.REACT_APP_ORIGIN_URL).toString());
+    return redirect(new URL('/unauthorized', process.env.REACT_APP_ORIGIN_URL).toString());
   }
 }
 

app/unauthorized/page.tsx

@@ -8,7 +8,7 @@ import styles from './page.module.css';
 
 export default function Unauthorized() {
   const router = useRouter();
-  const user = useUser();
+  const { user } = useUser();
   const setError = useSetError();
 
   // TODO: Use an enum for scopes instead of checking against a string literal

components/Button/LoginButton.tsx

@@ -4,7 +4,7 @@ import { prepareLogin } from '@/app/actions/login';
 import { useUser } from '@/util/hooks';
 
 export default function LoginButton() {
-  const user = useUser();
+  const { user } = useUser();
 
   if (!user?.isLogged)
     return (

components/Leaderboard/Leaderboard.tsx

@@ -16,7 +16,7 @@ export default function Leaderboard({
   params: {};
   data: {};
 }) {
-  const user = useUser();
+  const { user } = useUser();
 
   return (
     <div className={styles.leaderboardContainer} id="leaderboard">

components/NavBar/Routes/Routes.tsx

@@ -6,7 +6,7 @@ import styles from '../NavBar.module.css';
 
 export default function Routes() {
   let pathname = usePathname();
-  const user = useUser();
+  const { user } = useUser();
 
   return (
     <div className={styles.routes}>

components/NavBar/UserLogged/UserLogged.tsx

@@ -7,13 +7,16 @@ import styles from '../NavBar.module.css';
 import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
 import Tooltip from './../Tooltip/Tooltip';
 
-const tooltipContent = (
+const tooltipContent = (contextLogout: (() => void)) => (
   <>
     {/* <div>Friends</div> */}
     <div>
-      <form action={logout}>
-        <button>Sign out</button>
-      </form>
+      <button onClick={() => {
+        contextLogout();
+        return logout();
+      }}>
+        Sign out
+      </button>
     </div>
     <div className={styles.iconContainer}>
       <ThemeSwitcher />
@@ -22,11 +25,11 @@ const tooltipContent = (
 );
 
 export default function UserLogged() {
-  const user = useUser();
+  const { user, logout: contextLogout } = useUser();
 
   if (user?.osuId)
     return (
-      <Tooltip content={tooltipContent}>
+      <Tooltip content={tooltipContent(contextLogout)}>
         <div className={styles.userPropic}>
           <Image
             src={`http://s.ppy.sh/a/${user?.osuId}`}

lib/auth.ts

@@ -41,7 +41,6 @@ export const ironSessionOptions: SessionOptions = {
   ttl: 1_209_600,
   cookieOptions: {
     httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    sameSite: 'strict'
+    secure: process.env.NODE_ENV === 'production'
   },
 };

util/UserLoggedContext.tsx

@@ -4,24 +4,38 @@ import { getSessionData } from '@/app/actions/session';
 import { SessionUser } from '@/lib/types';
 import {
   createContext,
+  useCallback,
   useEffect,
-  useMemo,
   useState,
 } from 'react';
 
 import type { ReactNode } from 'react';
 
-export const UserLoggedContext = createContext<SessionUser | undefined>(undefined);
+interface UserContextProps {
+  user: SessionUser | undefined;
+  logout: () => void;
+}
+
+export const UserLoggedContext = createContext<UserContextProps | undefined>(undefined);
 
 export default function UserProvider({ children }: { children: ReactNode }): JSX.Element {
   const [user, setUser] = useState<SessionUser | undefined>(undefined);
 
+  const fetchUser = useCallback(async () => {
+    const sessionData = await getSessionData();
+    setUser(sessionData);
+  }, []);
+
   useEffect(() => {
-    getSessionData().then((sessionData) => { setUser(sessionData) });
+    fetchUser();
+  }, [fetchUser]);
+
+  const logout = useCallback(() => {
+    setUser(undefined);
   }, []);
 
   return (
-    <UserLoggedContext.Provider value={useMemo(() => user, [user])}>
+    <UserLoggedContext.Provider value={{ user, logout }}>
       {children}
     </UserLoggedContext.Provider>
   );

util/hooks.ts

@@ -3,7 +3,13 @@ import { ErrorContext, SetErrorContext } from './ErrorContext';
 import { UserLoggedContext } from './UserLoggedContext';
 
 export function useUser() {
-  return useContext(UserLoggedContext);
+  const context = useContext(UserLoggedContext);
+
+  if (!context) {
+    throw new Error("Context for 'useUser' was not initialized");
+  }
+
+  return context;
 }
 
 export function useError() {