feat: add auth-link component

main/docs/authenticate/protocols/saml/saml-sso-integrations/sign-and-encrypt-saml-requests.mdx

@@ -10,6 +10,9 @@ title: Sign and Encrypt SAML Requests
   SAML requests
 'twitter:title': Sign and Encrypt SAML Requests
 ---
+
+import {AuthLink} from "/snippets/AuthLink.jsx";
+
 To increase the security of your transactions, you can sign or encrypt both your requests and your responses in the <Tooltip tip="Security Assertion Markup Language (SAML): Standardized protocol allowing two parties to exchange authentication information without a password." cta="View Glossary" href="/docs/glossary?term=SAML">SAML</Tooltip> protocol. In this article, you'll find configurations for specific scenarios, separated under two use cases:
 
 * Auth0 as the SAML service provider (for example, a SAML connection)
@@ -111,11 +114,11 @@ If Auth0 is the SAML service provider, it may need to receive encrypted asserti
 
 Use the following links to obtain the public key in different formats:
 
-* [CER](https://{yourDomain}/cer?cert=connection)
-* [PEM](https://{yourDomain}/pem?cert=connection)
-* [raw PEM](https://{yourDomain}/rawpem?cert=connection)
-* [PKCS#7](https://{yourDomain}/pb7?cert=connection)
-* [Fingerprint](https://{yourDomain}/fingerprint?cert=connection)
+* <AuthLink href="https://{yourDomain}/cer?cert=connection">CER</AuthLink>
+* <AuthLink href="https://{yourDomain}/pem?cert=connection">PEM</AuthLink>
+* <AuthLink href="https://{yourDomain}/rawpem?cert=connection">raw PEM</AuthLink>
+* <AuthLink href="https://{yourDomain}/pb7?cert=connection">PKCS#7</AuthLink>
+* <AuthLink href="https://{yourDomain}/fingerprint?cert=connection">Fingerprint</AuthLink>
 
 Download the certificate in the format requested by the IdP.
 

main/snippets/AuthLink.jsx

@@ -0,0 +1,51 @@
+export const AuthLink = ({
+  href,
+  target = "_blank",
+  rel = "noopener noreferrer",
+  children,
+}) => {
+  const [processedHref, setProcessedHref] = useState(null);
+
+  useEffect(() => {
+    let unsubscribe = null;
+
+    function init() {
+      unsubscribe = window.autorun(() => {
+        let processedHref = href;
+        for (const [
+          key,
+          value,
+        ] of window.rootStore.variableStore.values.entries()) {
+          processedHref = processedHref.replace(new RegExp(key, "g"), value);
+        }
+
+        // Only update state if the processed href has changed
+        // This helps in rendering anchor tag only when we have a valid href
+        if (processedHref !== href) {
+          setProcessedHref(processedHref);
+        }
+      });
+    }
+
+    if (window.rootStore) {
+      init();
+    } else {
+      window.addEventListener("adu:storeReady", init);
+    }
+
+    return () => {
+      window.removeEventListener("adu:storeReady", init);
+      unsubscribe?.();
+    };
+  }, [href]);
+
+  if (!processedHref) {
+    return <code>{href}</code>;
+  }
+
+  return (
+    <a className="link" href={processedHref} target={target} rel={rel}>
+      {children}
+    </a>
+  );
+};