fix(login): display errors received in the callback URL MAASENG-6125 (#5958)

- Added a `<Notification />` for when an error is received in the callback URL after logging in via SSO
- Such errors usually occur when the user uses an email domain that the IdP doesn't allow, or other mismatches between the IdP's config and its config in MAAS

Resolves [MAASENG-6125](https://warthogs.atlassian.net/browse/MAASENG-6125)

Author: nehjoshi

src/app/login/LoginCallback/LoginCallback.test.tsx

@@ -31,7 +31,7 @@ describe("LoginCallback", () => {
     expect(screen.getByRole("alert")).toHaveTextContent(Labels.MissingParams);
   });
 
-  it("shows an error if callback fails", async () => {
+  it("shows an error if callback fails due to a server error", async () => {
     mockServer.use(authResolvers.getCallback.error());
     renderWithProviders(<LoginCallback />, {
       initialEntries: ["/login/oidc/callback?code=abc123&state=xyz789"],
@@ -40,6 +40,28 @@ describe("LoginCallback", () => {
     await waitFor(() => {
       expect(screen.getByRole("alert")).toHaveTextContent(Labels.CallbackError);
     });
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Please try logging in again."
+    );
+  });
+
+  it("shows an error if the callback URL contains an error parameter", async () => {
+    renderWithProviders(<LoginCallback />, {
+      initialEntries: [
+        "/login/oidc/callback?error=access_denied&error_description=User%20denied%20access",
+      ],
+      state,
+    });
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        "Error: access_denied"
+      );
+    });
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Please try logging in again."
+    );
+    expect(screen.getByRole("alert")).toHaveTextContent("User denied access");
+    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
   });
 
   it("shows a loading state while processing the callback", async () => {

src/app/login/LoginCallback/LoginCallback.tsx

@@ -8,21 +8,21 @@ import {
   Strip,
 } from "@canonical/react-components";
 import { useDispatch, useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 
 import { useCreateSession, useGetCallback } from "@/app/api/query/auth";
 import PageContent from "@/app/base/components/PageContent";
+import urls from "@/app/base/urls";
 import { statusActions } from "@/app/store/status";
 import statusSelectors from "@/app/store/status/selectors";
 
 export const Labels = {
   MissingParams: "Missing code or state in the callback URL.",
-  CallbackError:
-    "An error occurred during authentication. Please try logging in again.",
+  CallbackError: "An error occurred during authentication.",
   AlreadyAuthenticated: "You are already authenticated. Redirecting...",
 };
 
-export const LoginCallback = (): React.ReactElement => {
+const LoginCallback = (): React.ReactElement => {
   const location = useLocation();
   const authenticated = useSelector(statusSelectors.authenticated);
   const dispatch = useDispatch();
@@ -31,7 +31,10 @@ export const LoginCallback = (): React.ReactElement => {
   const params = new URLSearchParams(location.search);
   const code = params.get("code");
   const state = params.get("state");
+  const error = params.get("error");
+  const errorDescription = params.get("error_description");
   const hasParams = Boolean(code && state);
+  const hasError = Boolean(error || errorDescription);
 
   const callback = useGetCallback(
     {
@@ -45,7 +48,7 @@ export const LoginCallback = (): React.ReactElement => {
 
   const hasHandledSuccess = useRef(false);
   const shouldShowMissingParamsError =
-    !authenticated && !hasParams && !callback.isError;
+    !authenticated && !hasParams && !callback.isError && !hasError;
 
   useEffect(() => {
     if (authenticated) {
@@ -70,17 +73,28 @@ export const LoginCallback = (): React.ReactElement => {
       <Strip>
         <Row>
           <Col emptyLarge={4} size={6}>
+            {hasError && (
+              <Notification role="alert" severity="negative">
+                {error && `Error: ${error}. `}
+                <br />
+                {errorDescription}
+                <br />
+                Please try <Link to={urls.login}>logging in</Link> again.
+              </Notification>
+            )}
             {shouldShowMissingParamsError && (
               <Notification role="alert" severity="information">
                 {Labels.MissingParams}
               </Notification>
             )}
-            {code && state && callback.isPending && (
+            {code && state && !hasError && callback.isPending && (
               <Spinner aria-label={"Loading..."} text="Loading..." />
             )}
             {callback.isError && (
               <Notification role="alert" severity="negative">
                 {Labels.CallbackError}
+                <br />
+                Please try <Link to={urls.login}>logging in</Link> again.
               </Notification>
             )}
             {authenticated && (