fixes OWASP#2124: Refactored environment variable handling from credentials.ts to env.server.ts and env.client.ts (OWASP#2125)

* splitted env vars into env.client and env.server and updated the imports

* removed credentials.ts

* Update code

---------

Co-authored-by: Arkadii Yakovets <arkadii.yakovets@owasp.org>

Author: 2 people

frontend/__tests__/unit/components/CardDetailsPage.test.tsx

@@ -68,7 +68,7 @@ jest.mock('@fortawesome/react-fontawesome', () => ({
   }) => <span data-testid={`icon-${icon.iconName}`} className={className} {...props} />,
 }))
 
-jest.mock('utils/credentials', () => ({
+jest.mock('utils/env.client', () => ({
   IS_PROJECT_HEALTH_ENABLED: true,
 }))
 

frontend/__tests__/unit/components/Footer.test.tsx

@@ -95,7 +95,7 @@ jest.mock('utils/constants', () => ({
   ],
 }))
 
-jest.mock('utils/credentials', () => ({
+jest.mock('utils/env.client', () => ({
   ENVIRONMENT: 'production',
   RELEASE_VERSION: '1.2.3',
 }))

frontend/__tests__/unit/pages/Login.test.tsx

@@ -15,8 +15,8 @@ jest.mock('next/navigation', () => ({
 jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
-jest.mock('utils/credentials', () => ({
-  isGithubAuthEnabled: jest.fn(() => true),
+jest.mock('utils/env.server', () => ({
+  IS_GITHUB_AUTH_ENABLED: true,
 }))
 describe('LoginPage', () => {
   const pushMock = jest.fn()

frontend/next.config.ts

@@ -1,6 +1,6 @@
 import { withSentryConfig } from '@sentry/nextjs'
 import type { NextConfig } from 'next'
-import { SENTRY_AUTH_TOKEN } from 'utils/credentials'
+import { SENTRY_AUTH_TOKEN } from 'utils/env.server'
 
 const isLocal = process.env.NEXT_PUBLIC_ENVIRONMENT === 'local'
 

frontend/src/app/api/auth/[...nextauth]/route.ts

@@ -3,7 +3,7 @@ import GitHubProvider from 'next-auth/providers/github'
 import { apolloClient } from 'server/apolloClient'
 import { IS_PROJECT_LEADER_QUERY, IS_MENTOR_QUERY } from 'server/queries/mentorshipQueries'
 import { ExtendedProfile, ExtendedSession } from 'types/auth'
-import { isGithubAuthEnabled } from 'utils/credentials'
+import { IS_GITHUB_AUTH_ENABLED } from 'utils/env.server'
 
 async function checkIfProjectLeader(login: string): Promise<boolean> {
   try {
@@ -35,7 +35,7 @@ async function checkIfMentor(login: string): Promise<boolean> {
 
 const providers = []
 
-if (isGithubAuthEnabled()) {
+if (IS_GITHUB_AUTH_ENABLED) {
   providers.push(
     GitHubProvider({
       clientId: process.env.NEXT_SERVER_GITHUB_CLIENT_ID,

frontend/src/app/auth/login/page.tsx

@@ -1,6 +1,6 @@
-import { isGithubAuthEnabled } from 'utils/credentials'
+import { IS_GITHUB_AUTH_ENABLED } from 'utils/env.server'
 import LoginPageContent from 'components/LoginPageContent'
 
 export default function LoginPage() {
-  return <LoginPageContent isGitHubAuthEnabled={isGithubAuthEnabled()} />
+  return <LoginPageContent isGitHubAuthEnabled={IS_GITHUB_AUTH_ENABLED} />
 }

frontend/src/app/layout.tsx

@@ -3,7 +3,8 @@ import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
 import React from 'react'
 import { Providers } from 'wrappers/provider'
-import { GTM_ID, isGithubAuthEnabled } from 'utils/credentials'
+import { GTM_ID } from 'utils/env.client'
+import { IS_GITHUB_AUTH_ENABLED } from 'utils/env.server'
 import AutoScrollToTop from 'components/AutoScrollToTop'
 import BreadCrumbs from 'components/BreadCrumbs'
 import Footer from 'components/Footer'
@@ -69,7 +70,7 @@ export default function RootLayout({
       >
         <Providers>
           <AutoScrollToTop />
-          <Header isGitHubAuthEnabled={isGithubAuthEnabled()} />
+          <Header isGitHubAuthEnabled={IS_GITHUB_AUTH_ENABLED} />
           <BreadCrumbs />
           {children}
           <Footer />

frontend/src/app/projects/dashboard/layout.tsx

@@ -1,14 +1,14 @@
 import { notFound } from 'next/navigation'
 import React from 'react'
-import { isGithubAuthEnabled } from 'utils/credentials'
+import { IS_GITHUB_AUTH_ENABLED } from 'utils/env.server'
 import DashboardWrapper from 'components/DashboardWrapper'
 import FontLoaderWrapper from 'components/FontLoaderWrapper'
 import ProjectsDashboardNavBar from 'components/ProjectsDashboardNavBar'
 
 const ProjectsHealthDashboardLayout: React.FC<{ readonly children: React.ReactNode }> = ({
   children,
 }) => {
-  if (!isGithubAuthEnabled()) {
+  if (!IS_GITHUB_AUTH_ENABLED) {
     notFound()
   }
   return (

frontend/src/app/settings/api-keys/layout.tsx

@@ -1,10 +1,10 @@
 import { notFound, redirect } from 'next/navigation'
 import { getServerSession } from 'next-auth'
 import React from 'react'
-import { isGithubAuthEnabled } from 'utils/credentials'
+import { IS_GITHUB_AUTH_ENABLED } from 'utils/env.server'
 
 export default async function ApiKeysLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  if (!isGithubAuthEnabled()) {
+  if (!IS_GITHUB_AUTH_ENABLED) {
     notFound()
   }
   const session = await getServerSession()

frontend/src/components/CardDetailsPage.tsx

@@ -14,7 +14,7 @@ import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import type { ExtendedSession } from 'types/auth'
 import type { DetailsCardProps } from 'types/card'
-import { IS_PROJECT_HEALTH_ENABLED } from 'utils/credentials'
+import { IS_PROJECT_HEALTH_ENABLED } from 'utils/env.client'
 import { scrollToAnchor } from 'utils/scrollToAnchor'
 import { getSocialIcon } from 'utils/urlIconMappings'
 import AnchorTitle from 'components/AnchorTitle'
@@ -87,7 +87,7 @@ const DetailsCard = ({
               ) && (
                 <button
                   type="button"
-                  className="flex items-center justify-center gap-2 text-nowrap rounded-md border border-[#0D6EFD] bg-transparent px-2 py-2 text-[#0D6EFD] text-blue-600 transition-all hover:bg-[#0D6EFD] hover:text-white dark:border-sky-600 dark:text-sky-600 dark:hover:bg-sky-100"
+                  className="flex items-center justify-center gap-2 text-nowrap rounded-md border border-[#0D6EFD] bg-transparent px-2 py-2 text-[#0D6EFD] transition-all hover:bg-[#0D6EFD] hover:text-white dark:border-sky-600 dark:text-sky-600 dark:hover:bg-sky-100"
                   onClick={() => {
                     router.push(`${window.location.pathname}/edit`)
                   }}