adding fix to images without alt text and re-writing the mdx-components.jsx file to destructure the props correctly to reveal tha alt text

Fran-A-Dev · Fran-A-Dev · commit 5cd4d0dde01a · 2025-01-28T09:14:24.000-06:00
diff --git a/mdx-components.jsx b/mdx-components.jsx
@@ -5,15 +5,16 @@ import CustomLink from "@/components/link";
 
 export function useMDXComponents(components) {
 	return {
-		img: ({ src }, ...props) => (
+		img: ({ src, alt }, ...props) => (
 			<Image
-				alt={props.alt}
+				alt={alt}
 				blurDataURL={src.blurDataURL}
 				height={src.height}
 				placeholder="blur"
 				src={src.src}
 				style={{ width: "100%", height: "auto" }}
 				width={src.width}
+				{...props}
 			/>
 		),
 		a: (props) => <CustomLink {...props} />,
diff --git a/src/pages/docs/how-to/authentication/images/auth-redirect-flow.png b/src/pages/docs/how-to/authentication/images/auth-redirect-flow.png
diff --git a/src/pages/docs/how-to/authentication/index.mdx b/src/pages/docs/how-to/authentication/index.mdx
@@ -14,7 +14,7 @@ Before starting, it helps to break down the process into three concepts:
 
 This diagram shows the authentication flow using the Faust.js toolkit auth feature:
 
-![](./images/auth-redirect-flow-2048x989-3.png)
+![Flow diagram illustrating authentication flow](./images/auth-redirect-flow.png)
 
 Redirect-based authentication is the default strategy in the Faust.js toolkit. This strategy involves redirecting the user to WordPress to authenticate. Once the user has shown authentication, the user redirects back to the Next.js application with an authorization code, which you can then use to request a refresh and access token, thus completing the login process.
 
