Improve environment variables handling (#99)

Author: kamdubiel

.gitignore

@@ -25,11 +25,6 @@ next-env.d.ts
 .turbo
 .eslintcache
 
-# Environment variables
-.env*
-!.env.local
-!.env.compose
-
 # Logs
 *storybook.log
 pnpm-debug.log*

README.md

@@ -264,7 +264,6 @@ pnpm docker:prod up -d
 - `minimumReleaseAge` - Only install package versions that are at least X minutes old (helps avoid fresh compromised releases).
 - `onlyBuiltDependencies` - Only run build/postinstall scripts for this allowlist of dependencies. This reduces the overall attack surface, but scripts for these packages will still run if a compromised version is installed.
 - `strictPeerDependencies` - If this is enabled, commands will fail if there is a missing or invalid peer dependency in the tree.
-- `peerDependencyRules.allowedVersions` - Allow next-runtime-env to run with Next 15 + React 19. Library declares peer deps for Next 14 / React 18, but works fine with newer versions.
 - `strictDepBuilds` - When strictDepBuilds is enabled, the installation will exit with a non-zero exit code if any dependencies have unreviewed build scripts (aka postinstall scripts).
 - `engineStrict` - If this is enabled, pnpm will not install any package that claims to not be compatible with the current Node version.
 - `catalog` - Catalogs can be used for defining dependency version ranges as reusable constants. Constants defined in catalogs can later be referenced in package.json files.

apps/frontend/.env

@@ -0,0 +1,9 @@
+# NextAuth config
+NEXTAUTH_SECRET="aVlrr1mODOkPGrXTt6vN515S8Cry5fnpX5pYFoM/bws="
+NEXTAUTH_URL="http://localhost:3000"
+
+# API
+API_BASE_URL="http://localhost:3000/api"
+
+# Common
+NODE_ENV="development"

apps/frontend/.env.compose

@@ -1,17 +1,9 @@
-########################
-## Required variables ##
-########################
-
 # NextAuth config
 NEXTAUTH_SECRET="aVlrr1mODOkPGrXTt6vN515S8Cry5fnpX5pYFoM/bws="
+NEXTAUTH_URL="http://localhost:3000"
 
-########################
-## Optional variables ##
-########################
-
-# Example environment variables
-NEXT_PUBLIC_EXAMPLE_VARIABLE="Public Environment Variable"
-PRIVATE_EXAMPLE_VARIABLE="Private Environment Variable XXXXX"
+# API
+API_BASE_URL="http://localhost:3000/api"
 
 # Common
 NODE_ENV="production"

apps/frontend/.env.local

@@ -1,2 +1,7 @@
 # i18n Messages type augments
 src/lib/i18n/locales/en/*.d.json.ts
+
+# Environment variables
+.env*
+!.env
+!.env.compose

apps/frontend/.gitignore

@@ -25,7 +25,7 @@
 		"next": "catalog:",
 		"next-auth": "catalog:",
 		"next-intl": "catalog:",
-		"next-runtime-env": "catalog:",
+		"next-public-env": "1.0.0",
 		"next-themes": "catalog:",
 		"postcss": "catalog:",
 		"react": "catalog:",

apps/frontend/package.json

@@ -107,17 +107,6 @@ describe('HomePage', () => {
 		expect(mockGetTranslations).toHaveBeenCalledWith('example.ExamplePage');
 	});
 
-	it('renders the correct link structure', async () => {
-		mockGetServerSession.mockResolvedValue(null);
-
-		const HomePageComponent = await HomePage();
-		render(HomePageComponent);
-
-		const link = screen.getByRole('link');
-		expect(link).toHaveAttribute('href', '/');
-		expect(link).toHaveTextContent('This is example page.');
-	});
-
 	it('renders the logo with correct attributes', async () => {
 		mockGetServerSession.mockResolvedValue(null);
 

apps/frontend/src/app/[locale]/(protected)/_components/HomePage/HomePage.test.tsx

@@ -4,7 +4,6 @@ import { getServerSession } from '@/lib/auth';
 import { ExampleComponent } from '@infinum/ui/components/example';
 import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
-import Link from 'next/link';
 
 export const HomePage = async () => {
 	const t = await getTranslations('example.ExamplePage');
@@ -16,7 +15,7 @@ export const HomePage = async () => {
 				<Image src="/assets/images/logo.png" alt="Infinum logo" width={180} height={38} priority />
 				<ExampleComponent className="text-center" text="Welcome to Infinum" />
 				<h1>{t('title')}</h1>
-				<Link href="/">{t('about')}</Link>
+				<p>{t('about')}</p>
 				<LocaleSwitcher />
 				<ThemeToggle />
 				<p className="rainbow:text-green-500 text-blue-600 dark:text-red-500">Colors depend on current variant</p>

apps/frontend/src/app/[locale]/(protected)/_components/HomePage/HomePage.tsx

@@ -1,45 +1,58 @@
 'use client';
 
-import React, { useState } from 'react';
-import { signIn } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
 import { Button } from '@infinum/ui/components/button';
-import { Label } from '@infinum/ui/components/label';
 import { Input } from '@infinum/ui/components/input';
+import { Label } from '@infinum/ui/components/label';
+import { signIn } from 'next-auth/react';
+import { useLocale } from 'next-intl';
+import React, { useState } from 'react';
 
 export const LoginForm = () => {
 	const [email, setEmail] = useState('');
 	const [password, setPassword] = useState('');
 	const [error, setError] = useState('');
-	const router = useRouter();
+	const locale = useLocale();
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
 		setError('');
 
 		const res = await signIn('credentials', {
-			redirect: false,
+			redirect: true,
 			email,
 			password,
+			callbackUrl: `/${locale}`,
 		});
 
 		if (res?.error) {
 			setError(res.error);
-		} else {
-			router.push('/');
 		}
 	};
 
 	return (
 		<form onSubmit={handleSubmit} className="space-y-6">
 			<div>
 				<Label htmlFor="email">EMail</Label>
-				<Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+				<Input
+					id="email"
+					type="email"
+					value={email}
+					onChange={(e) => setEmail(e.target.value)}
+					autoComplete="email"
+					required
+				/>
 			</div>
 
 			<div>
 				<Label htmlFor="password">Password</Label>
-				<Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+				<Input
+					id="password"
+					type="password"
+					value={password}
+					onChange={(e) => setPassword(e.target.value)}
+					autoComplete="current-password"
+					required
+				/>
 			</div>
 
 			{error && <p className="text-sm text-red-500">{error}</p>}