Gatey Shortcodes, CSS Vars & JS API Reference

Gatey Shortcodes, CSS Vars & JS API Reference

Gatey Reference

Dynamic shortcodes, CSS variables & a secure JS API for authentication-aware UI

Gatey Front‑End Reference

Welcome to the complete Gatey front-end reference manual—your one-stop list of every shortcode, dynamic CSS variable, JavaScript helper, DOM event, and Redux field.

1. WordPress Shortcodes

gatey

Embeds a Cognito‑powered <Authenticator> wherever you like—inside a post, a popup, or an Elementor template.

Attribute Accepted values Explanation
id (required) Gutenberg pattern ID Tells Gatey which saved Gutenberg pattern—containing an <Authenticator> block—to render. Not meant for DOM‑event targeting; if you need a hook for JavaScript listeners, give the rendered element a normal CSS id.
screen signIn, signUp, editAccount, setupTotp, forgotPassword, changePassword Initial Authenticator screen.
variation default, modal Inline widget or modal overlay.
colormode light, dark, system Force colour scheme or follow OS preference.
showopen true, false If true, renders a button first; clicking it opens the Authenticator with the configured screen. Defaults to false.
open Free‑text string Replaces the default label on the open button (defaults to the Authenticator header) when showopen is enabled.
signingin Free‑text string Message displayed while the Authenticator is in the signing‑in state (fires with signing-in.gatey-authenticator). Empty by default.
signingout Free‑text string Message displayed while signing out (fires with signing-out.gatey-authenticator). Empty by default.
redirecting Free‑text string Message shown during the post-login or post-logout redirect if a redirect URL is configured (fires with signed-in.gatey-authenticator and signed-out.gatey-authenticator). Empty by default.

gatey-account

Outputs a Cognito user‑attribute in place—perfect for personalised greetings, user dashboards, or conditional content.

Attribute Accepted values Explanation
attribute Any standard Cognito field (e.g. email, given_name)
Literal custom for non‑standard.		 The profile field you want to print.
custom Name without the custom: prefix Required only when attribute="custom".

Usage examples

gatey id="12" variation="modal" colormode="dark"

Welcome back, gatey-account attribute="given_name"!

Your tier: gatey-account attribute="custom" custom="membershipTier"]

2. Dynamic CSS Custom Properties

Gatey injects these variables on :root. Use them to toggle visibility (flex/none) or print Cognito data via content.

Initialisation flags

  • --gatey-initialized / --gatey-not-initialized

Editor mode

When a page is open in Elementor or Gutenberg, Gatey sets --gatey-in-editor to flex so those elements remain visible inside the editor even if they would be hidden on the live site—making them easier to edit:

body.elementor-editor-active,
body.wp-admin,
body.block-editor-iframe__body {
  --gatey-in-editor: flex;
}

Authentication & MFA

  • --gatey-account-authenticated / --gatey-account-not-authenticated
  • --gatey-account-mfa-enabled / --gatey-account-mfa-not-enabled

Group membership

For every Cognito group <g> Gatey outputs:

  • --gatey-account-group-<g>
  • --gatey-account-group-not-<g>

Cognito attributes

  • --gatey-account-attribute-email
  • --gatey-account-attribute-family_name
  • Customs: --gatey-account-attribute-custom-<attr> 
/* Visible only to admins */
.admin-panel{
  display:var(--gatey-account-group-admin);
}

/* Show element while editing */
.show-in-editor-or-if-authenticated{
  display:var(--gatey-in-editor, var(--gatey-account-authenticated, none));
}

3. JavaScript API (Gatey.cognito.*)

All helper methods live on the global Gatey.cognito object (available after the DOM finishes loading); each one returns a Promise, so use await or .then().

Helper Returns Use case
getUsername() string Display the username
getUserAttributes() object Prefill a form with profile data
getMfaPreferences() object Show MFA status
clearMfaPreferences() void One‑click TOTP disable
isAuthenticated() boolean Guard a route or action
isInGroup("admin") boolean Role‑based UI
getGroups() string[] Render a badge list
getRoles() string[] IAM role switcher
getScopes() string[] Scope‑aware buttons
getPreferredRole() string Auto‑select a role
signOut() void Custom logout button
getAmplifyConfig object Debug current Amplify settings
get / post / … any Signed API calls through aws‑amplify/api 
// Sample signed API call
const orders = await Gatey.cognito.post({
  apiName: "backend",
  path: "/orders",
  options: { body: { status: "OPEN" } }
});
console.table(orders);

4. DOM Events from <Authenticator>

Every event is emitted under the name pattern
<type>.gatey-authenticator—for example
done.gatey-authenticator or
cancel.gatey-authenticator.
Give your <Authenticator> (or shortcode)
an id, then attach a listener with
addEventListener.

Event type
(before .gatey-authenticator)		 When it fires
done Screen finished (e.g. password changed)
cancel User pressed Cancel / Back
signing-in Cognito login done, WP login still running
signed-in All hooks finished → redirect
signing-out Hooks + WP logout executing
signed-out Fully signed out → redirect
reset Authenticator re-appears (e.g. code prompt) 
// Example listener
const authEl = document.getElementById("login-widget");
authEl.addEventListener("done.gatey-authenticator", () => {
  toast.success("Profile updated!");
});

5. observeStore() – Watch Redux State

The Redux store is exposed asynchronously as Gatey.cognito.store
(a Promise). When it resolves, pass the store to
Gatey.cognito.observeStore along with a selector and a
callback:

// Reload the page if the visitor signs out
Gatey.cognito.store.then((store) =>
  Gatey.cognito.observeStore(
    store,
    (state) => state.signedIn,
    (signedIn, prev) => {
      if (prev !== undefined && !signedIn) {
        window.location.reload();
      }
    }
  )
);

Common selectors:

  • state.amplifyConfig — ResourcesConfig returned by Amplify
  • state.signedIn — true | false
  • state.account — object containing:
    • username
    • userAttributes
    • mfaPreferences