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:
parent
352b14cec7
commit
bef401aa76
1 changed files with 18 additions and 0 deletions
|
|
@ -4,6 +4,15 @@ import { useState } from "react";
|
||||||
import { signIn } from "next-auth/react";
|
import { signIn } from "next-auth/react";
|
||||||
import { useRouter, useSearchParams } from "next/navigation";
|
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() {
|
export function LoginForm() {
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
|
|
@ -13,6 +22,9 @@ export function LoginForm() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
|
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() {
|
async function handleSso() {
|
||||||
setSsoLoading(true);
|
setSsoLoading(true);
|
||||||
|
|
@ -41,6 +53,12 @@ export function LoginForm() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-5">
|
<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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleSso}
|
onClick={handleSso}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue