ashwin/nxtgauge-frontend-solid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(auth): correct resend-otp API endpoint path

Browse source 
- Change from /api/gateway/api/auth/resend-otp to /api/auth/resend-otp
- Fix in signup.tsx and login.tsx
- Gateway already proxies /api/auth/* to users service
This commit is contained in:
Tracewebstudio Dev 2026-04-16 17:29:46 +02:00
parent a365e1fa94
commit 152f918a7b
2 changed files with 166 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

273
src/routes/login.tsx
View file

@ -1,27 +1,32 @@
import { A, useNavigate } from '@solidjs/router';
import { createMemo, createSignal, For, Show } from 'solid-js';
import { useAuth } from '~/lib/auth';
import PublicBackground from '~/components/PublicBackground';
import PublicHeader from '~/components/PublicHeader';
import CaptchaCanvas from '~/components/CaptchaCanvas';
import { isValidEmail } from '~/lib/form-validation';
import { A, useNavigate } from "@solidjs/router";
import { createMemo, createSignal, For, Show } from "solid-js";
import { useAuth } from "~/lib/auth";
import PublicBackground from "~/components/PublicBackground";
import PublicHeader from "~/components/PublicHeader";
import CaptchaCanvas from "~/components/CaptchaCanvas";
import { isValidEmail } from "~/lib/form-validation";
type RoleKey = 'company' | 'job_seeker' | 'professional' | 'customer';
type RoleKey = "company" | "job_seeker" | "professional" | "customer";
function normalizeRoleValue(value: unknown): string {
return String(value || '').trim().toUpperCase().replace(/\s+/g, '_');
return String(value || "")
.trim()
.toUpperCase()
.replace(/\s+/g, "_");
}
function getStoredPreferredRole(emailHint?: string): string | null {
if (typeof window === 'undefined') return null;
const keys = ['nxtgauge_signup_profile_v1', 'nxtgauge_auth_user', 'nxtgauge_user'];
if (typeof window === "undefined") return null;
const keys = ["nxtgauge_signup_profile_v1", "nxtgauge_auth_user", "nxtgauge_user"];
for (const key of keys) {
const raw = window.localStorage.getItem(key);
if (!raw) continue;
try {
const parsed = JSON.parse(raw) as Record<string, any>;
const storedEmail = String(parsed?.email || '').trim().toLowerCase();
const storedEmail = String(parsed?.email || "")
.trim()
.toLowerCase();
if (emailHint && storedEmail && storedEmail !== emailHint.trim().toLowerCase()) continue;
const selectedProfessionalRole = normalizeRoleValue(parsed?.selectedProfessionalRole);
@ -42,12 +47,12 @@ function resolveActiveRole(rawBackendRole: unknown, emailHint?: string): string
if (backendRole) return backendRole;
const preferredRole = getStoredPreferredRole(emailHint);
if (preferredRole) return preferredRole;
return preferredRole || 'JOB_SEEKER';
return preferredRole || "JOB_SEEKER";
}
function makeCaptcha() {
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
return Array.from({ length: 6 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
return Array.from({ length: 6 }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}
function PasswordVisibilityIcon(props: { visible: boolean }) {
@ -72,45 +77,45 @@ function PasswordVisibilityIcon(props: { visible: boolean }) {
export default function LoginRoute() {
const navigate = useNavigate();
const auth = useAuth();
const [email, setEmail] = createSignal('');
const [password, setPassword] = createSignal('');
const [otp, setOtp] = createSignal(['', '', '', '', '', '']);
const [email, setEmail] = createSignal("");
const [password, setPassword] = createSignal("");
const [otp, setOtp] = createSignal(["", "", "", "", "", ""]);
const [showVerify, setShowVerify] = createSignal(false);
const [showPassword, setShowPassword] = createSignal(false);
const [captcha, setCaptcha] = createSignal(makeCaptcha());
const [captchaInput, setCaptchaInput] = createSignal('');
const [error, setError] = createSignal('');
const [captchaInput, setCaptchaInput] = createSignal("");
const [error, setError] = createSignal("");
const [submitting, setSubmitting] = createSignal(false);
const [roleGuess, setRoleGuess] = createSignal<RoleKey>('job_seeker');
const [roleHint, setRoleHint] = createSignal('');
const [roleGuess, setRoleGuess] = createSignal<RoleKey>("job_seeker");
const [roleHint, setRoleHint] = createSignal("");
const [checkingRole, setCheckingRole] = createSignal(false);
const otpCode = createMemo(() => otp().join(''));
const otpCode = createMemo(() => otp().join(""));
const formatRoleLabel = (value: string): string =>
String(value || '')
String(value || "")
.trim()
.replace(/[_\s]+/g, ' ')
.replace(/[_\s]+/g, " ")
.toLowerCase()
.replace(/\b\w/g, (ch) => ch.toUpperCase());
const lookupRoleByEmail = async (emailValue: string) => {
const normalized = emailValue.trim().toLowerCase();
if (!normalized || !isValidEmail(normalized)) {
setRoleHint('');
setRoleHint("");
return;
}
setCheckingRole(true);
try {
const response = await fetch('/api/gateway/api/auth/check-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
credentials: 'include',
const response = await fetch("/api/gateway/api/auth/check-email", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
credentials: "include",
body: JSON.stringify({ email: normalized }),
});
const payload = await response.json().catch(() => ({}));
if (!response.ok || !payload?.exists) {
setRoleHint('');
setRoleHint("");
return;
}
const detectedRole = normalizeRoleValue(
@ -118,27 +123,28 @@ export default function LoginRoute() {
);
if (!detectedRole) {
const fallbackRole = normalizeRoleValue(getStoredPreferredRole(normalized));
setRoleHint(
fallbackRole
? `Role: ${formatRoleLabel(fallbackRole)}`
: 'Role: Not assigned'
);
setRoleHint(fallbackRole ? `Role: ${formatRoleLabel(fallbackRole)}` : "Role: Not assigned");
return;
}
setRoleHint(`Role: ${formatRoleLabel(detectedRole)}`);
const roleLower = detectedRole.toLowerCase();
if (roleLower === 'company' || roleLower === 'customer' || roleLower === 'job_seeker' || roleLower === 'professional') {
if (
roleLower === "company" ||
roleLower === "customer" ||
roleLower === "job_seeker" ||
roleLower === "professional"
) {
setRoleGuess(roleLower as RoleKey);
}
} catch {
setRoleHint('');
setRoleHint("");
} finally {
setCheckingRole(false);
}
};
const setOtpDigit = (index: number, value: string) => {
const clean = value.replace(/\D/g, '').slice(0, 1);
const clean = value.replace(/\D/g, "").slice(0, 1);
setOtp((prev) => {
const next = prev.slice();
next[index] = clean;
@ -151,60 +157,60 @@ export default function LoginRoute() {
};
const saveUser = (user: any) => {
const fullName = String(user?.full_name || user?.fullName || '').trim();
const [firstName, ...rest] = fullName.split(' ');
const lastName = rest.join(' ');
const fullName = String(user?.full_name || user?.fullName || "").trim();
const [firstName, ...rest] = fullName.split(" ");
const lastName = rest.join(" ");
const normalizedRole = resolveActiveRole(
user?.active_role || user?.role || roleGuess(),
String(user?.email || email())
);
const storedRole = normalizedRole
? normalizedRole.toLowerCase()
: roleGuess();
const storedRole = normalizedRole ? normalizedRole.toLowerCase() : roleGuess();
const selectedProfessionalRole = getStoredPreferredRole(String(user?.email || email()));
const payload = {
firstName: firstName || '',
lastName: lastName || '',
fullName: fullName || '',
name: fullName || '',
displayName: fullName || '',
email: String(user?.email || email()).trim().toLowerCase(),
firstName: firstName || "",
lastName: lastName || "",
fullName: fullName || "",
name: fullName || "",
displayName: fullName || "",
email: String(user?.email || email())
.trim()
.toLowerCase(),
roleKey: storedRole,
role: storedRole,
active_role: normalizedRole || 'JOB_SEEKER',
active_role: normalizedRole || "JOB_SEEKER",
selectedProfessionalRole: selectedProfessionalRole || null,
user,
};
if (typeof window !== 'undefined') {
window.localStorage.setItem('nxtgauge_auth_user', JSON.stringify(payload));
window.localStorage.setItem('nxtgauge_user', JSON.stringify(payload));
window.localStorage.setItem('nxtgauge_signup_profile_v1', JSON.stringify(payload));
if (typeof window !== "undefined") {
window.localStorage.setItem("nxtgauge_auth_user", JSON.stringify(payload));
window.localStorage.setItem("nxtgauge_user", JSON.stringify(payload));
window.localStorage.setItem("nxtgauge_signup_profile_v1", JSON.stringify(payload));
}
};
const login = async () => {
if (submitting()) return;
setError('');
setError("");
if (!isValidEmail(email())) {
setError('Enter a valid email address.');
setError("Enter a valid email address.");
return;
}
if (!password().trim()) {
setError('Password is required.');
setError("Password is required.");
return;
}
if (!captchaInput().trim() || captchaInput().trim().toUpperCase() !== captcha().toUpperCase()) {
setError('Captcha does not match. Please try again.');
setError("Captcha does not match. Please try again.");
setCaptcha(makeCaptcha());
setCaptchaInput('');
setCaptchaInput("");
return;
}
setSubmitting(true);
try {
const res = await fetch('/api/gateway/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
credentials: 'include',
const res = await fetch("/api/gateway/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
credentials: "include",
body: JSON.stringify({
email: email().trim().toLowerCase(),
password: password(),
@ -212,20 +218,20 @@ export default function LoginRoute() {
});
const data = await res.json().catch(() => ({}));
if (!res.ok) {
const code = String(data?.code || '').toUpperCase();
if (code === 'EMAIL_NOT_VERIFIED') {
const code = String(data?.code || "").toUpperCase();
if (code === "EMAIL_NOT_VERIFIED") {
setShowVerify(true);
setError('Email not verified. Enter OTP sent to your inbox.');
setError("Email not verified. Enter OTP sent to your inbox.");
return;
}
setError(String(data?.error || data?.message || 'Invalid login credentials.'));
setError(String(data?.error || data?.message || "Invalid login credentials."));
return;
}
const accessToken = String(data?.access_token || '').trim();
if (typeof window !== 'undefined' && accessToken) {
window.sessionStorage.setItem('nxtgauge_access_token', accessToken);
window.sessionStorage.setItem('nxtgauge_frontend_access_token', accessToken);
const accessToken = String(data?.access_token || "").trim();
if (typeof window !== "undefined" && accessToken) {
window.sessionStorage.setItem("nxtgauge_access_token", accessToken);
window.sessionStorage.setItem("nxtgauge_frontend_access_token", accessToken);
}
const resolvedActiveRole = resolveActiveRole(
data?.user?.active_role || data?.user?.role,
@ -233,9 +239,9 @@ export default function LoginRoute() {
);
const normalizedEmail = email().trim().toLowerCase();
const userPayload = {
id: String(data?.user?.id || ''),
id: String(data?.user?.id || ""),
email: String(data?.user?.email || normalizedEmail),
full_name: String(data?.user?.full_name || ''),
full_name: String(data?.user?.full_name || ""),
active_role: resolvedActiveRole,
email_verified: Boolean(data?.user?.email_verified ?? true),
};
@ -243,9 +249,9 @@ export default function LoginRoute() {
if (auth.setUser) {
auth.setUser(userPayload);
}
navigate('/dashboard', { replace: true });
navigate("/dashboard", { replace: true });
} catch {
setError('Network error during login. Please try again.');
setError("Network error during login. Please try again.");
} finally {
setSubmitting(false);
}
@ -253,18 +259,18 @@ export default function LoginRoute() {
const resendOtp = async () => {
if (submitting()) return;
setError('');
setError("");
setSubmitting(true);
try {
const res = await fetch('/api/gateway/api/auth/resend-otp', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
credentials: 'include',
const res = await fetch("/api/auth/resend-otp", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
credentials: "include",
body: JSON.stringify({ email: email().trim().toLowerCase() }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) {
setError(String(data?.error || data?.message || 'Unable to resend OTP.'));
setError(String(data?.error || data?.message || "Unable to resend OTP."));
}
} finally {
setSubmitting(false);
@ -273,22 +279,22 @@ export default function LoginRoute() {
const verifyThenLogin = async () => {
if (submitting()) return;
setError('');
setError("");
if (otpCode().length !== 6) {
setError('Enter a valid 6-digit OTP.');
setError("Enter a valid 6-digit OTP.");
return;
}
setSubmitting(true);
try {
const verifyRes = await fetch('/api/gateway/api/auth/verify-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
credentials: 'include',
const verifyRes = await fetch("/api/gateway/api/auth/verify-email", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
credentials: "include",
body: JSON.stringify({ otp: otpCode() }),
});
const verifyData = await verifyRes.json().catch(() => ({}));
if (!verifyRes.ok) {
setError(String(verifyData?.error || verifyData?.message || 'OTP verification failed.'));
setError(String(verifyData?.error || verifyData?.message || "OTP verification failed."));
return;
}
await login();
@ -309,7 +315,9 @@ export default function LoginRoute() {
<div class="auth-visual-content">
<p class="eyebrow">Public Workspace</p>
<h1 class="title light">Welcome Back To Nxtgauge</h1>
<p class="subtitle light">Sign in to manage your profile, portfolio, and verification in one place.</p>
<p class="subtitle light">
Sign in to manage your profile, portfolio, and verification in one place.
</p>
</div>
</section>
@ -317,7 +325,9 @@ export default function LoginRoute() {
<h2 class="title">Sign In</h2>
<div class="field">
<label class="label" for="login-email">EMAIL</label>
<label class="label" for="login-email">
EMAIL
</label>
<input
id="login-email"
type="email"
@ -333,25 +343,39 @@ export default function LoginRoute() {
}}
placeholder="Enter your email"
/>
<p class="validation-note" style={{ color: email().trim() && isValidEmail(email()) ? '#fd6116' : '#6e7591' }}>
{email().trim() && isValidEmail(email()) ? '✓ Valid email format' : '• Enter a valid email format'}
<p
class="validation-note"
style={{ color: email().trim() && isValidEmail(email()) ? "#fd6116" : "#6e7591" }}
>
{email().trim() && isValidEmail(email())
? "✓ Valid email format"
: "• Enter a valid email format"}
</p>
<Show when={roleHint() || checkingRole()}>
<p class="validation-note" style={{ color: '#0f766e' }}>
{checkingRole() ? 'Checking account role...' : `• ${roleHint()}`}
<p class="validation-note" style={{ color: "#0f766e" }}>
{checkingRole() ? "Checking account role..." : `• ${roleHint()}`}
</p>
</Show>
</div>
<div class="field">
<label class="label" for="login-password">PASSWORD</label>
<label class="label" for="login-password">
PASSWORD
</label>
<div class="auth-password-wrap">
<input id="login-password" type={showPassword() ? 'text' : 'password'} class="input" value={password()} onInput={(e) => setPassword(e.currentTarget.value)} placeholder="Enter your password" />
<input
id="login-password"
type={showPassword() ? "text" : "password"}
class="input"
value={password()}
onInput={(e) => setPassword(e.currentTarget.value)}
placeholder="Enter your password"
/>
<button
class="auth-toggle-visibility"
type="button"
onClick={() => setShowPassword((prev) => !prev)}
aria-label={showPassword() ? 'Hide password' : 'Show password'}
aria-label={showPassword() ? "Hide password" : "Show password"}
>
<PasswordVisibilityIcon visible={showPassword()} />
</button>
@ -361,9 +385,23 @@ export default function LoginRoute() {
<div class="field">
<label class="label">CAPTCHA</label>
<div class="auth-captcha-row">
<button class="auth-captcha-refresh" type="button" onClick={() => { setCaptcha(makeCaptcha()); setCaptchaInput(''); }}>↻</button>
<button
class="auth-captcha-refresh"
type="button"
onClick={() => {
setCaptcha(makeCaptcha());
setCaptchaInput("");
}}
>
↻
</button>
<CaptchaCanvas code={captcha()} class="auth-captcha-canvas" />
<input class="input" value={captchaInput()} onInput={(e) => setCaptchaInput(e.currentTarget.value)} placeholder="Enter captcha" />
<input
class="input"
value={captchaInput()}
onInput={(e) => setCaptchaInput(e.currentTarget.value)}
placeholder="Enter captcha"
/>
</div>
</div>
@ -385,26 +423,45 @@ export default function LoginRoute() {
</div>
<div class="auth-footer-row">
<p class="note">Didn’t receive code?</p>
<button class="auth-forgot-link" type="button" onClick={() => void resendOtp()} disabled={submitting()}>
<button
class="auth-forgot-link"
type="button"
onClick={() => void resendOtp()}
disabled={submitting()}
>
Resend OTP
</button>
</div>
</Show>
<button class="auth-submit-btn" type="button" onClick={() => void login()} disabled={submitting()}>
{submitting() ? 'Signing In...' : 'Sign In'}
<button
class="auth-submit-btn"
type="button"
onClick={() => void login()}
disabled={submitting()}
>
{submitting() ? "Signing In..." : "Sign In"}
</button>
<Show when={showVerify()}>
<button class="auth-submit-btn" type="button" onClick={() => void verifyThenLogin()} disabled={submitting()}>
{submitting() ? 'Verifying...' : 'Verify Email and Login'}
<button
class="auth-submit-btn"
type="button"
onClick={() => void verifyThenLogin()}
disabled={submitting()}
>
{submitting() ? "Verifying..." : "Verify Email and Login"}
</button>
</Show>
<div class="auth-footer-row">
<p class="footer-text">Secure login with email verification.</p>
<p class="note">New user? <A href="/signup">Sign Up</A></p>
<p class="note"><A href="/forgot-password">Forgot Password?</A></p>
<p class="note">
New user? <A href="/signup">Sign Up</A>
</p>
<p class="note">
<A href="/forgot-password">Forgot Password?</A>
</p>
</div>
<Show when={error()}>

2
src/routes/signup.tsx
View file

@ -272,7 +272,7 @@ export default function SignupRoute() {
setServerError("");
setSubmitting(true);
try {
const res = await fetch("/api/gateway/api/auth/resend-otp", {
const res = await fetch("/api/auth/resend-otp", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
credentials: "include",