CognitoPress shortcodes and JavaScript API

From dynamic shortcodes to secure API integrations

This tutorial shows how to personalize your site using authentication state, display user data, and connect frontend JavaScript to your protected endpoints.

📘 Tutorial 2: Shortcodes, CSS Variables & JavaScript API

Use CognitoPress like a pro — from dynamic shortcodes to secure API integrations.

This tutorial shows how to personalize your site using authentication state, display user data, and connect frontend JavaScript to protected endpoints.

Example 1: WordPress shortcode example

CognitoPress provides shortcodes to embed login flows or show user info:

  • cognitopress – load a pattern by ID, optionally override screen or variation
  • cognitopress-attribute – output a standard or custom user attribute
📷 Screenshot placeholder: Shortcode usage in editor

Example 2: CognitoPress CSS variable reference

CSS variables reflect user state and Cognito attributes:

  • --cognitopress-account-authenticated
  • --cognitopress-account-group-admin
  • --cognitopress-account-attribute-email
📷 Screenshot placeholder: CSS variable usage in DevTools

Example 3: SmartCloud.cognito API usage

With a Professional plan, you can configure APIs in the plugin admin and use them from the frontend:


SmartCloud.cognito.get({
  apiName: "backend",
  path: "/some-protected-path"
}).then(res => console.log(res));

No need to manually attach tokens — the plugin handles authentication headers.

📷 Screenshot placeholder: API call example

Example 4: Monitor Cognito Authentication State with observeStore

Use observeStore to respond to login/logout transitions:

observeStore(
  store,
  (state) => state.signedIn,
  async (signedIn, wasSignedIn) => {
    if (wasSignedIn !== undefined) {
      if (signedIn) {
        // signed in
      } else {
        // signed out
      }
    }
  }
);

The store is globally available as SmartCloud.cognito.store.

📷 Screenshot placeholder: observeStore usage

✅ You’re Done!

This guide covered how to extend CognitoPress with dynamic content, responsive design, and secure Cognito-based integrations.