fix(auth): display OAuth errors on the login page

Maps NextAuth error codes (OAuthCallbackError, AccessDenied, OAuthSignin)
from the ?error= query param to user-friendly messages shown above the
Microsoft sign-in button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hardik 2026-05-28 23:15:27 +05:30
parent 352b14cec7
commit bef401aa76

View file

@ -4,6 +4,15 @@ import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
const SSO_ERROR_MESSAGES: Record<string, string> = {
AccessDenied:
"Your Microsoft account is not registered in PPMS. Contact your administrator to request access.",
OAuthCallbackError:
"Sign-in with Microsoft failed. Please try again or contact your administrator.",
OAuthSignin:
"Could not initiate Microsoft sign-in. Please try again.",
};
export function LoginForm() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
@ -13,6 +22,9 @@ export function LoginForm() {
const router = useRouter();
const searchParams = useSearchParams();
const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
const oauthError = searchParams.get("error");
const oauthErrorMessage =
oauthError ? (SSO_ERROR_MESSAGES[oauthError] ?? "Sign-in failed. Please try again.") : null;
async function handleSso() {
setSsoLoading(true);
@ -41,6 +53,12 @@ export function LoginForm() {
return (
<div className="space-y-5">
{oauthErrorMessage && (
<p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">
{oauthErrorMessage}
</p>
)}
<button
type="button"
onClick={handleSso}