translate(frontend): update namespaces

docker-compose.dev.yml

@@ -50,6 +50,7 @@ services:
       - ./frontend/styles:/app/styles
       - ./frontend/components:/app/components
       - ./frontend/locales:/app/locales
+      - ./frontend/i18n.js:/app/i18n.js
     env_file: .env
     environment:
       - NEXT_PUBLIC_ENV=development

frontend/components/basic/layout.js

@@ -106,7 +106,7 @@ export default function Layout({ children }) {
 			setIsOpen(false);
 			setNewWorkspaceName("");
 		} else {
-			setError(t("common:error_project-already-exists"));
+			setError(t("error_project-already-exists"));
 			setLoading(false);
 		}
 	}
@@ -121,22 +121,22 @@ export default function Layout({ children }) {
 				"/dashboard/" +
 				workspaceMapping[workspaceSelected] +
 				"?Development",
-			title: t("common:nav.menu.secrets"),
+			title: t("nav:menu.secrets"),
 			emoji: <FontAwesomeIcon icon={faHouse} />,
 		},
 		{
 			href: "/users/" + workspaceMapping[workspaceSelected],
-			title: t("common:nav.menu.members"),
+			title: t("nav:menu.members"),
 			emoji: <FontAwesomeIcon icon={faUser} />,
 		},
 		{
 			href: "/integrations/" + workspaceMapping[workspaceSelected],
-			title: t("common:nav.menu.integrations"),
+			title: t("nav:menu.integrations"),
 			emoji: <FontAwesomeIcon icon={faLink} />,
 		},
 		{
 			href: "/settings/project/" + workspaceMapping[workspaceSelected],
-			title: t("common:nav.menu.project-settings"),
+			title: t("nav:menu.project-settings"),
 			emoji: <FontAwesomeIcon icon={faGear} />,
 		},
 	];
@@ -238,7 +238,7 @@ export default function Layout({ children }) {
 							<div className="py-6"></div>
 							<div className="flex justify-center w-full mt-7 mb-8 bg-bunker-600 w-full h-full flex flex-col items-center px-4">
 								<div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
-									{t("common:nav.menu.project")}
+									{t("nav:menu.project")}
 								</div>
 								{workspaceList.length > 0 ? (
 									<Listbox
@@ -331,7 +331,7 @@ export default function Layout({ children }) {
 					className="text-gray-300 text-7xl mb-8"
 				/>
 				<p className="text-gray-200 px-6 text-center text-lg max-w-sm">
-					{` ${t("common:need-login")} `}
+					{` ${t("need-login")} `}
 				</p>
 			</div>
 		</>

frontend/components/navigation/NavBarDashboard.js

@@ -29,22 +29,22 @@ import useTranslation from "next-translate/useTranslation";
 const supportOptions = (t) => [
 	[
 		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faSlack} />,
-		t("common:nav.support.slack"),
+		t("nav:support.slack"),
 		"https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA",
 	],
 	[
 		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faBook} />,
-		t("common:nav.support.docs"),
+		t("nav:support.docs"),
 		"https://infisical.com/docs/getting-started/introduction",
 	],
 	[
 		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faGithub} />,
-		t("common:nav.support.issue"),
+		t("nav:support.issue"),
 		"https://github.com/Infisical/infisical-cli/issues",
 	],
 	[
 		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faEnvelope} />,
-		t("common:nav.support.email"),
+		t("nav:support.email"),
 		"mailto:[email protected]",
 	],
 ];
@@ -55,7 +55,7 @@ export default function Navbar({ onButtonPressed }) {
 	const [orgs, setOrgs] = useState([]);
 	const [currentOrg, setCurrentOrg] = useState([]);
 
-	const { t } = useTranslation("common");
+	const { t } = useTranslation("");
 
 	const supportOptionsList = useMemo(() => supportOptions(t), [t]);
 
@@ -152,7 +152,7 @@ export default function Navbar({ onButtonPressed }) {
 						<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none">
 							<div className="px-1 py-1 ">
 								<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
-									{t("common:nav.user.signed-in-as")}
+									{t("nav:user.signed-in-as")}
 								</div>
 								<div
 									onClick={() =>
@@ -187,7 +187,7 @@ export default function Navbar({ onButtonPressed }) {
 							</div>
 							<div className="px-2 pt-2">
 								<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
-									{t("common:nav.user.current-organization")}
+									{t("nav:user.current-organization")}
 								</div>
 								<div
 									onClick={() =>
@@ -228,7 +228,7 @@ export default function Navbar({ onButtonPressed }) {
 											icon={faCoins}
 										/>
 										<div className="text-sm">
-											{t("common:nav.user.usage-billing")}
+											{t("nav:user.usage-billing")}
 										</div>
 									</div>
 								</button>
@@ -253,7 +253,7 @@ export default function Navbar({ onButtonPressed }) {
 											/>
 										</span>
 										<div className="text-sm ml-1">
-											{t("common:nav.user.invite")}
+											{t("nav:user.invite")}
 										</div>
 									</div>
 								</button>
@@ -261,9 +261,7 @@ export default function Navbar({ onButtonPressed }) {
 							{orgs?.length > 1 && (
 								<div className="px-1 pt-1">
 									<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
-										{t(
+										{t("nav:user.other-organizations")}
-											"common:nav.user.other-organizations"
-										)}
 									</div>
 									<div className="flex flex-col items-start px-1 mt-3 mb-2">
 										{orgs

frontend/i18n.js

@@ -2,6 +2,7 @@ module.exports = {
 	locales: ["en-US", "ko-KR"],
 	defaultLocale: "en-US",
 	pages: {
-		"*": ["common"],
+		"*": ["common", "nav"],
+		"reg:^/(login|signup)": ["auth"],
 	},
 };

frontend/locales/en-US/auth.json

@@ -0,0 +1,32 @@
+{
+	"meta": {
+		"login": {
+			"title": "Login | Infiscal",
+			"og-title": "Log In to Infisical",
+			"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
+		},
+		"signup": {
+			"title": "Sign Up | Infiscal",
+			"og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
+			"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables.  Works with Node.js, Next.js, Gatsby, Nest.js..."
+		}
+	},
+	"login": "Log In",
+	"signup": "Sign Up",
+	"need-account": "Need an Infisical account?",
+	"create-account": "Create an account",
+	"already-have-account": "Have an account? Log in",
+	"forgot-password": "Forgot your password?",
+	"step1-start": "Let's get started",
+	"step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",
+	"step1-submit": "Get Started",
+	"step2-message": "<wrapper>We've sent a verification email to</wrapper><email>{{email}}</email>",
+	"step2-code-error": "Oops. Your code is wrong. Please try again.",
+	"step2-spam-alert": "Make sure to check your spam inbox.",
+	"step3-message": "Almost there!",
+	"step4-message": "Save your Emergency Kit",
+	"step4-description1": "If you get locked out of your account, your Emergency Kit is the only way to sign in.",
+	"step4-description2": "We recommend you download it and keep it somewhere safe.",
+	"step4-description3": "It contains your Secret Key which we cannot access or recover for you if you lose it.",
+	"step4-download": "Download PDF"
+}

frontend/locales/en-US/common.json

@@ -1,38 +1,4 @@
 {
-	"meta": {
-		"login": {
-			"title": "Login | Infiscal",
-			"og-title": "Log In to Infisical",
-			"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
-		},
-		"signup": {
-			"title": "Sign Up | Infiscal",
-			"og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
-			"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables.  Works with Node.js, Next.js, Gatsby, Nest.js..."
-		}
-	},
-	"nav": {
-		"support": {
-			"slack": "[NEW] Join Slack Forum",
-			"docs": "Read Docs",
-			"issue": "Open a Github Issue",
-			"email": "Send us an Email"
-		},
-		"user": {
-			"signed-in-as": "SIGNED IN AS",
-			"current-organization": "CURRENT ORGANIZATION",
-			"usage-billing": "Usage & Billing",
-			"invite": "Invite Members",
-			"other-organizations": "OTHER ORGANIZATION"
-		},
-		"menu": {
-			"project": "PROJECT",
-			"secrets": "Secrets",
-			"members": "Members",
-			"integrations": "Integrations",
-			"project-settings": "Project Settings"
-		}
-	},
 	"error_project-already-exists": "A project with this name already exists.",
 	"need-login": " To use Infisical, please log in through a device with larger dimensions. ",
 	"email": "Email",
@@ -46,25 +12,5 @@
 	"password-validate-length": "14 characters",
 	"password-validate-case": "1 lowercase character",
 	"password-validate-number": "1 number",
-	"auth": {
-		"login": "Log In",
-		"signup": "Sign Up",
-		"need-account": "Need an Infisical account?",
-		"create-account": "Create an account",
-		"already-have-account": "Have an account? Log in",
-		"forgot-password": "Forgot your password?",
-		"step1-start": "Let's get started",
-		"step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",
-		"step1-submit": "Get Started",
-		"step2-message": "<wrapper>We've sent a verification email to</wrapper><email>{{email}}</email>",
-		"step2-code-error": "Oops. Your code is wrong. Please try again.",
-		"step2-spam-alert": "Make sure to check your spam inbox.",
-		"step3-message": "Almost there!",
-		"step4-message": "Save your Emergency Kit",
-		"step4-description1": "If you get locked out of your account, your Emergency Kit is the only way to sign in.",
-		"step4-description2": "We recommend you download it and keep it somewhere safe.",
-		"step4-description3": "It contains your Secret Key which we cannot access or recover for you if you lose it.",
-		"step4-download": "Download PDF"
-	},
 	"maintenance-alert": "We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes."
 }

frontend/locales/en-US/nav.json

@@ -0,0 +1,22 @@
+{
+	"support": {
+		"slack": "[NEW] Join Slack Forum",
+		"docs": "Read Docs",
+		"issue": "Open a Github Issue",
+		"email": "Send us an Email"
+	},
+	"user": {
+		"signed-in-as": "SIGNED IN AS",
+		"current-organization": "CURRENT ORGANIZATION",
+		"usage-billing": "Usage & Billing",
+		"invite": "Invite Members",
+		"other-organizations": "OTHER ORGANIZATION"
+	},
+	"menu": {
+		"project": "PROJECT",
+		"secrets": "Secrets",
+		"members": "Members",
+		"integrations": "Integrations",
+		"project-settings": "Project Settings"
+	}
+}

frontend/pages/login.js

@@ -20,7 +20,7 @@ export default function Login() {
 	const [errorLogin, setErrorLogin] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 	const router = useRouter();
-	const { t } = useTranslation("common");
+	const { t } = useTranslation("");
 
 	useEffect(async () => {
 		let userWorkspace;
@@ -55,13 +55,16 @@ export default function Login() {
 	return (
 		<div className="bg-bunker-800 h-screen flex flex-col justify-start px-6">
 			<Head>
-				<title>{t("meta.login.title")}</title>
+				<title>{t("auth:meta.login.title")}</title>
 				<link rel="icon" href="/infisical.ico" />
 				<meta property="og:image" content="/images/message.png" />
-				<meta property="og:title" content={t("meta.login.og-title")} />
+				<meta
+					property="og:title"
+					content={t("auth:meta.login.og-title")}
+				/>
 				<meta
 					name="og:description"
-					content={t("meta.login.og-description")}
+					content={t("auth:meta.login.og-description")}
 				/>
 			</Head>
 			<Link href="/">
@@ -76,25 +79,25 @@ export default function Login() {
 			</Link>
 			<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
 				<p className="text-4xl flex justify-center font-semibold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-					{t("auth.login")}
+					{t("auth:login")}
 				</p>
 				<div className="flex flex-row items-center justify-center">
 					<p className="text-md flex justify-center mt-2 text-gray-400">
-						{t("auth.need-account")}
+						{t("auth:need-account")}
 					</p>
 				</div>
 				<div className="flex flex-col items-center justify-center w-full md:pb-4 max-h-24 max-w-md mx-auto">
 					<Link href="/signup">
 						<button className="w-full pb-3 hover:opacity-90 duration-200">
 							<u className="font-normal text-md text-sky-500">
-								{t("auth.create-account")}
+								{t("auth:create-account")}
 							</u>
 						</button>
 					</Link>
 				</div>
 				<div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
 					<InputField
-						label={t("email")}
+						label={t("common:email")}
 						onChangeHandler={setEmail}
 						type="email"
 						value={email}
@@ -104,7 +107,7 @@ export default function Login() {
 				</div>
 				<div className="flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
 					<InputField
-						label={t("password")}
+						label={t("common:password")}
 						onChangeHandler={setPassword}
 						type="password"
 						value={password}
@@ -118,7 +121,7 @@ export default function Login() {
 				<div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
 					<div className="text-l mt-6 m-8 px-8 py-3 text-lg">
 						<Button
-							text={t("login")}
+							text={t("auth:login")}
 							onButtonPressed={loginCheck}
 							loading={isLoading}
 							size="lg"
@@ -136,7 +139,7 @@ export default function Login() {
 						className="ml-2 mr-6 text-6xl"
 					/>
 
-					{t("maintenance-alert")}
+					{t("auth:maintenance-alert")}
 				</div>
 			)}
 		</div>

frontend/pages/signup.js

@@ -87,16 +87,16 @@ export default function SignUp() {
 	const [verificationToken, setVerificationToken] = useState();
 	const [backupKeyIssued, setBackupKeyIssued] = useState(false);
 
-	const { t } = useTranslation("common");
+	const { t } = useTranslation();
 
 	useEffect(async () => {
 		let userWorkspace;
 		try {
 			const userWorkspaces = await getWorkspaces();
 			userWorkspace = userWorkspaces[0]._id;
-			router.push("/dashboard/" + userWorkspace);
+			router.push("auth:/dashboard/" + userWorkspace);
 		} catch (error) {
-			console.log("Error - Not logged in yet");
+			console.log("auth:Error - Not logged in yet");
 		}
 	}, []);
 
@@ -130,15 +130,15 @@ export default function SignUp() {
 		var emailCheckBool = false;
 		if (!email) {
 			setEmailError(true);
-			setEmailErrorMessage("Please enter your email.");
+			setEmailErrorMessage("auth:Please enter your email.");
 			emailCheckBool = true;
 		} else if (
-			!email.includes("@") ||
+			!email.includes("auth:@") ||
-			!email.includes(".") ||
+			!email.includes("auth:.") ||
 			!/[a-z]/.test(email)
 		) {
 			setEmailError(true);
-			setEmailErrorMessage("Please enter a valid email.");
+			setEmailErrorMessage("auth:Please enter a valid email.");
 			emailCheckBool = true;
 		} else {
 			setEmailError(false);
@@ -194,7 +194,7 @@ export default function SignUp() {
 						"0"
 					)
 			);
-			localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
+			localStorage.setItem("auth:PRIVATE_KEY", PRIVATE_KEY);
 
 			client.init(
 				{
@@ -223,13 +223,13 @@ export default function SignUp() {
 						if (!errorCheck && response.status == "200") {
 							response = await response.json();
 
-							localStorage.setItem("publicKey", PUBLIC_KEY);
+							localStorage.setItem("auth:publicKey", PUBLIC_KEY);
 							localStorage.setItem(
 								"encryptedPrivateKey",
 								ciphertext
 							);
-							localStorage.setItem("iv", iv);
+							localStorage.setItem("auth:iv", iv);
-							localStorage.setItem("tag", tag);
+							localStorage.setItem("auth:tag", tag);
 
 							try {
 								await attemptLogin(
@@ -257,20 +257,20 @@ export default function SignUp() {
 	const step1 = (
 		<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl">
 			<p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-				{t("auth.step1-start")}
+				{t("auth:step1-start")}
 			</p>
 			<div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2">
 				<Link href="/login">
 					<button className="w-max pb-3 hover:opacity-90 duration-200">
 						<u className="font-normal text-md text-sky-500">
-							{t("auth.already-have-account")}
+							{t("auth:already-have-account")}
 						</u>
 					</button>
 				</Link>
 			</div>
 			<div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
 				<InputField
-					label={t("email")}
+					label={t("auth:email")}
 					onChangeHandler={setEmail}
 					type="email"
 					value={email}
@@ -291,7 +291,7 @@ export default function SignUp() {
 				</p>
 				<div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
 					<Button
-						text={t("auth.step1-submit")}
+						text={t("auth:step1-submit")}
 						onButtonPressed={emailCheck}
 						size="lg"
 					/>
@@ -304,7 +304,7 @@ export default function SignUp() {
 	const step2 = (
 		<div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
 			<Trans
-				i18nKey="common:auth.step2-message"
+				i18nKey="common:step2-message"
 				components={{
 					wrapper: (
 						<p className="text-l flex justify-center text-gray-400" />
@@ -334,10 +334,10 @@ export default function SignUp() {
 					className="mt-2 mb-6"
 				/>
 			</div>
-			{codeError && <Error text={t("auth.step2-code-error")} />}
+			{codeError && <Error text={t("auth:step2-code-error")} />}
 			<div className="flex max-w-min flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-4 mb-2">
 				<Button
-					text={t("verify")}
+					text={t("auth:verify")}
 					onButtonPressed={incrementStep}
 					size="lg"
 				/>
@@ -351,7 +351,7 @@ export default function SignUp() {
           </button>
         </Link> */}
 				<p className="text-sm text-gray-500 pb-2">
-					{t("auth.step2-spam-alert")}
+					{t("auth:step2-spam-alert")}
 				</p>
 			</div>
 		</div>
@@ -361,37 +361,37 @@ export default function SignUp() {
 	const step3 = (
 		<div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
 			<p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-				{t("auth.step3-message")}
+				{t("auth:step3-message")}
 			</p>
 			<div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
 				<InputField
-					label={t("first-name")}
+					label={t("auth:first-name")}
 					onChangeHandler={setFirstName}
 					type="name"
 					value={firstName}
 					isRequired
-					errorText={t("validate-required", {
+					errorText={t("auth:validate-required", {
-						name: t("first-name"),
+						name: t("auth:first-name"),
 					})}
 					error={firstNameError}
 				/>
 			</div>
 			<div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
 				<InputField
-					label={t("last-name")}
+					label={t("auth:last-name")}
 					onChangeHandler={setLastName}
 					type="name"
 					value={lastName}
 					isRequired
-					errorText={t("validate-required", {
+					errorText={t("auth:validate-required", {
-						name: t("last-name"),
+						name: t("auth:last-name"),
 					})}
 					error={lastNameError}
 				/>
 			</div>
 			<div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
 				<InputField
-					label={t("password")}
+					label={t("auth:password")}
 					onChangeHandler={(password) => {
 						setPassword(password);
 						passwordCheck(
@@ -416,7 +416,7 @@ export default function SignUp() {
 				passwordErrorNumber ? (
 					<div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
 						<div className={`text-gray-400 text-sm mb-1`}>
-							{t("password-validate")}
+							{t("auth:password-validate")}
 						</div>
 						<div className="flex flex-row justify-start items-center ml-1">
 							{passwordErrorLength ? (
@@ -437,7 +437,7 @@ export default function SignUp() {
 										: "text-gray-600"
 								} text-sm`}
 							>
-								{t("password-validate-length")}
+								{t("auth:password-validate-length")}
 							</div>
 						</div>
 						<div className="flex flex-row justify-start items-center ml-1">
@@ -459,7 +459,7 @@ export default function SignUp() {
 										: "text-gray-600"
 								} text-sm`}
 							>
-								{t("password-validate-case")}
+								{t("auth:password-validate-case")}
 							</div>
 						</div>
 						<div className="flex flex-row justify-start items-center ml-1">
@@ -481,7 +481,7 @@ export default function SignUp() {
 										: "text-gray-600"
 								} text-sm`}
 							>
-								{t("password-validate-number")}
+								{t("auth:password-validate-number")}
 							</div>
 						</div>
 					</div>
@@ -491,7 +491,7 @@ export default function SignUp() {
 			</div>
 			<div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3">
 				<Button
-					text={t("auth.signup")}
+					text={t("auth:signup")}
 					loading={isLoading}
 					onButtonPressed={signupErrorCheck}
 					size="lg"
@@ -504,22 +504,22 @@ export default function SignUp() {
 	const step4 = (
 		<div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
 			<p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-				{t("auth.step4-message")}
+				{t("auth:step4-message")}
 			</p>
 			<div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
-				<div>{t("auth.step4-description1")}</div>
+				<div>{t("auth:step4-description1")}</div>
-				<div className="mt-3">{t("auth.step4-description2")}</div>
+				<div className="mt-3">{t("auth:step4-description2")}</div>
 			</div>
 			<div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
 				<FontAwesomeIcon
 					icon={faWarning}
 					className="ml-2 mr-4 text-4xl"
 				/>
-				{t("auth.step4-description3")}
+				{t("auth:step4-description3")}
 			</div>
 			<div className="flex flex-row items-center justify-center w-3/4 md:w-full md:p-2 max-h-28 max-w-max mx-auto mt-6 py-1 md:mt-4 text-lg text-center md:text-left">
 				<Button
-					text={t("auth.step4-download")}
+					text={t("auth:step4-download")}
 					onButtonPressed={async () => {
 						await issueBackupKey({
 							email,
@@ -528,17 +528,17 @@ export default function SignUp() {
 							setBackupKeyError,
 							setBackupKeyIssued,
 						});
-						router.push("/dashboard/");
+						router.push("auth:/dashboard/");
 					}}
 					size="lg"
 				/>
 				{/* <div
 					className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer"
 					onClick={() => {
-						if (localStorage.getItem("projectData.id")) {
+						if (localStorage.getItem("auth:projectData.id")) {
-							router.push("/dashboard/" + localStorage.getItem("projectData.id"));
+							router.push("auth:/dashboard/" + localStorage.getItem("projectData.id"));
 						} else {
-							router.push("/noprojects")
+							router.push("auth:/noprojects")
 						}
 					}}
 				>
@@ -551,13 +551,16 @@ export default function SignUp() {
 	return (
 		<div className="bg-bunker-800 h-screen flex flex-col items-center justify-center">
 			<Head>
-				<title>{t("meta.signup.title")}</title>
+				<title>{t("auth:meta.signup.title")}</title>
 				<link rel="icon" href="/infisical.ico" />
 				<meta property="og:image" content="/images/message.png" />
-				<meta property="og:title" content={t("meta.signup.og-title")} />
+				<meta
+					property="og:title"
+					content={t("auth:meta.signup.og-title")}
+				/>
 				<meta
 					name="og:description"
-					content={t("meta.signup.og-description")}
+					content={t("auth:meta.signup.og-description")}
 				/>
 			</Head>
 			<div className="flex flex-col justify-center items-center">