fix: use context to pass down logoutUrl

SeDemal · Apr 27, 2024 · a9f3857 · a9f3857
1 parent d3adf5a
commit a9f3857
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/src/components/layout/header/AvatarMenu.tsx b/src/components/layout/header/AvatarMenu.tsx
@@ -14,7 +14,7 @@ import { signOut, useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import { forwardRef } from 'react';
-import { env } from '~/env';
+import { useLogoutUrl } from '~/hooks/custom-session-provider';
 import { useColorScheme } from '~/hooks/use-colorscheme';
 
 import { useBoardLink } from '../Templates/BoardLayout';
@@ -24,11 +24,11 @@ export const AvatarMenu = () => {
   const { data: sessionData } = useSession();
   const { colorScheme, toggleColorScheme } = useColorScheme();
 
-  const redirectUrl = env.NEXT_PUBLIC_LOGOUT_REDIRECT_URL;
-
   const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
   const defaultBoardHref = useBoardLink('/board');
 
+  const logoutUrl = useLogoutUrl();
+
   return (
     <Menu width={256}>
       <Menu.Target>
@@ -70,11 +70,9 @@ export const AvatarMenu = () => {
             onClick={() => {
               signOut({
                 redirect: false,
-              }).then(() => {
-                redirectUrl
-                  ? window.location.assign(redirectUrl)
-                  : window.location.reload();
-              });
+              }).then(() =>
+                logoutUrl ? window.location.assign(logoutUrl) : window.location.reload()
+              );
             }}
           >
             {t('actions.avatar.logout', {

diff --git a/src/env.js b/src/env.js
@@ -102,7 +102,7 @@ const env = createEnv({
           AUTH_OIDC_OWNER_GROUP: z.string().default('admin'),
           AUTH_OIDC_AUTO_LOGIN: zodParsedBoolean(),
           AUTH_OIDC_SCOPE_OVERWRITE: z.string().default('openid email profile groups'),
-          AUTH_OIDC_TIMEOUT: numberSchema.default("3500"),
+          AUTH_OIDC_TIMEOUT: numberSchema.default('3500'),
         }
       : {}),
   },
@@ -124,7 +124,7 @@ const env = createEnv({
       .optional()
       .default('light'),
     NEXT_PUBLIC_DOCKER_HOST: z.string().optional(),
-    NEXT_PUBLIC_LOGOUT_REDIRECT_URL: z.string().optional(),
+    AUTH_LOGOUT_REDIRECT_URL: z.string().optional(),
   },
   /**
    * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
@@ -164,7 +164,7 @@ const env = createEnv({
     AUTH_OIDC_AUTO_LOGIN: process.env.AUTH_OIDC_AUTO_LOGIN,
     AUTH_OIDC_SCOPE_OVERWRITE: process.env.AUTH_OIDC_SCOPE_OVERWRITE,
     AUTH_OIDC_TIMEOUT: process.env.AUTH_OIDC_TIMEOUT,
-    NEXT_PUBLIC_LOGOUT_REDIRECT_URL: process.env.NEXT_PUBLIC_LOGOUT_REDIRECT_URL,
+    AUTH_LOGOUT_REDIRECT_URL: process.env.AUTH_LOGOUT_REDIRECT_URL,
     AUTH_SESSION_EXPIRY_TIME: process.env.AUTH_SESSION_EXPIRY_TIME,
     DEMO_MODE: process.env.DEMO_MODE,
   },

diff --git a/src/hooks/custom-session-provider.tsx b/src/hooks/custom-session-provider.tsx
@@ -1,14 +1,19 @@
 import dayjs from 'dayjs';
 import { Session } from 'next-auth';
 import { SessionProvider, signIn } from 'next-auth/react';
-import { useEffect } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 
 interface CustomSessionProviderProps {
   session: Session;
   children: React.ReactNode;
+  logoutUrl?: string;
 }
 
-export const CustomSessionProvider = ({ session, children }: CustomSessionProviderProps) => {
+export const CustomSessionProvider = ({
+  session,
+  children,
+  logoutUrl,
+}: CustomSessionProviderProps) => {
   //Automatically redirect to the login page after a session expires or after 24 days
   useEffect(() => {
     if (!session) return () => {};
@@ -18,7 +23,21 @@ export const CustomSessionProvider = ({ session, children }: CustomSessionProvid
 
   return (
     <SessionProvider session={session} refetchOnWindowFocus={false}>
-      {children}
+      <SessionContext.Provider value={{ logoutUrl }}>{children}</SessionContext.Provider>
     </SessionProvider>
   );
-};
+};
+
+interface SessionContextProps {
+  logoutUrl?: string;
+}
+
+const SessionContext = createContext<SessionContextProps | null>(null);
+
+export function useLogoutUrl() {
+  const context = useContext(SessionContext);
+  if (!context) {
+    throw new Error('You cannot use logoutUrl outside of session context.');
+  }
+  return context.logoutUrl;
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -19,18 +19,21 @@ import 'video.js/dist/video-js.css';
 import { CommonHead } from '~/components/layout/Meta/CommonHead';
 import { ConfigProvider } from '~/config/provider';
 import { env } from '~/env.js';
+import { CustomSessionProvider } from '~/hooks/custom-session-provider';
 import { ColorSchemeProvider } from '~/hooks/use-colorscheme';
 import { modals } from '~/modals';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 import { ColorTheme } from '~/tools/color';
 import { getLanguageByCode } from '~/tools/language';
-import { getServiceSidePackageAttributes, ServerSidePackageAttributesType } from '~/tools/server/getPackageVersion';
+import {
+  ServerSidePackageAttributesType,
+  getServiceSidePackageAttributes,
+} from '~/tools/server/getPackageVersion';
 import { theme } from '~/tools/server/theme/theme';
 import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';
 import { colorSchemeParser } from '~/validations/user';
 
-import { CustomSessionProvider } from '~/hooks/custom-session-provider';
 import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../data/constants';
 import nextI18nextConfig from '../../next-i18next.config.js';
 import '../styles/global.scss';
@@ -45,6 +48,7 @@ function App(
     environmentColorScheme: MantineColorScheme;
     packageAttributes: ServerSidePackageAttributesType;
     editModeEnabled: boolean;
+    logoutUrl?: string;
     analyticsEnabled: boolean;
     config?: ConfigType;
     primaryColor?: MantineTheme['primaryColor'];
@@ -112,7 +116,7 @@ function App(
           strategy="lazyOnload"
         />
       )}
-      <CustomSessionProvider session={pageProps.session}>
+      <CustomSessionProvider session={pageProps.session} logoutUrl={pageProps.logoutUrl}>
         <ColorSchemeProvider {...pageProps}>
           {(colorScheme) => (
             <ColorTheme.Provider value={colorTheme}>
@@ -178,6 +182,7 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
     pageProps: {
       ...getActiveColorScheme(session, ctx),
       packageAttributes: getServiceSidePackageAttributes(),
+      logoutUrl: env.AUTH_LOGOUT_REDIRECT_URL,
       analyticsEnabled,
       session,
       locale: ctx.locale ?? 'en',