Get Started with Gatey

From plugin install to first secure login—your 10-minute setup path.

🔧 Set Up Gatey and Add the Login Flow to Your Site

This tutorial walks you through using the Gatey admin panel, adding authentication blocks in the Gutenberg editor, and configuring a login page.

Step 1: Install the Gatey Plugin

You can install Gatey from your WordPress Dashboard by searching “Gatey” under Plugins → Add New and clicking Install Now.

Step 2: Build Your Sign-In Page with the Authenticator Block

  1. Create the page: In the WordPress Dashboard go to Pages → Add New, set the title to Sign In, and keep the suggested slug /sign-in (or choose your own).
  2. Insert the block: In the block inserter open the WPSuite · Gatey section and drag the Authenticator block onto the canvas.
  3. Pick the initial screen: In the right-hand sidebar choose where the Authenticator should start (Sign In, Sign Up, Edit Account, …).
  4. Configure the language: Under Language choose the default display language for the authenticator. Select the primary language of your website (e.g. English for an English‑language site) instead of System. This avoids mismatches where the interface switches to the visitor’s browser language (for example, showing Hungarian text on an English‑only site).
  5. (Optional) Set a TOTP issuer: If your page connects to an Amazon Cognito user‑pool where MFA is enabled, fill in TOTP Issuer with a clear, short name (e.g. MyCompany). Authenticator apps will display this label next to the one‑time code, so users can easily identify which site the code belongs to.
  6. Style it: Select a variation (Default or Modal), colour mode, and alignment options.
  7. Save the page and preview it.
Gutenberg editor interface showing the Authenticator sign-in form (email, password, sign-in button) embedded on a page with block panel visible.
Design your login page using the Gatey Authenticator block

Step 3: Build an Edit Profile Page

  1. Create the page: Go to Pages → Add New, set the title to Edit Profile and set the slug to /profile (or choose your own).
  2. First row – email address: Insert a WPSuite · Gatey → Account Attribute block. In its inspector set Attribute to email. Style it as a
    heading if you wish.
  3. Second row – MFA status: Add a two‑column Row (or Group) and type the following two paragraphs:
    You have enabled Two‑Factor Authentication (2FA)
    You have not enabled Two‑Factor Authentication (2FA)
    Give the first  paragraph the CSS class mfa-enabled and the second mfa-disabled. Paste the CSS below into
    WordPress Dashboard → Settings → Editor Plus → Advanced → Global CSS:
    .mfa-enabled  { display: var(--gatey-in-editor, var(--gatey-account-mfa-enabled, none)); }
    .mfa-disabled { display: var(--gatey-in-editor, var(--gatey-account-mfa-not-enabled, none)); }
  4. Third row – quick actions: Add another Row. Drop three Authenticator blocks into the Row and set:
    • Authenticator 1: screen = editAccount, check Show Open Button.
    • Authenticator 2: screen = changePassword, check Show Open Button.
    • Authenticator 3: screen = setupTotp, check Show Open Button.

    Switch to the Modal variation for each Authenticator block.

  5. Save the page. A live preview will work after you finish the next steps—setting Cognito User Pool attributes and enabling the WordPress integration.
WordPress Gutenberg editor showing an “Edit Profile” page that uses Gatey Account Attribute and Authenticator blocks.
The profile page displays the user’s e-mail, a two-factor-authentication status message, and three Gatey Authenticator buttons for editing the account, changing the password, and setting up TOTP—all arranged in three separate rows.

Step 4: Configure Gatey’s General Settings

  1. Open the General settings: In the WordPress Dashboard go to Gatey → Settings → General.
  2. Choose your Sign In Page: From the dropdown select the WordPress page you created earlier (e.g. Sign In). Gatey will redirect all unauthenticated traffic here, guaranteeing a consistent login flow.
  3. Select Login Mechanisms: Tick the ways users are allowed to sign in—Username, Email, and/or Phone Number. Pick the combination that matches your Cognito user‑pool configuration.
  4. Set Sign‑up Attributes: Add the Cognito attributes (e.g. given_name, family_name, email) that should be collected during registration. These same fields will automatically appear on the Sign Up and Edit Account screens.
  5. Add security with reCAPTCHA (optional): Paste your Google reCAPTCHA v3 Site Key to protect sign‑in and sign‑up forms from bots. (Enterprise or reCAPTCHA.net variants are also supported.)
  6. Provide a Custom Translations URL (optional): If you maintain your own JSON localization file, enter its public URL here so Gatey can load your custom labels and messages.
  7. Save Changes: Click Save at the bottom of the page.
Result: Users are routed to the correct Sign In page, can log in with the mechanisms you allow, see the right fields during sign‑up, and benefit from your chosen security and translation options.
Gatey WordPress plugin “General” settings page showing options for Login Mechanisms, Sign-up Attributes, Custom Translations URL, Google reCAPTCHA v3 Site Key, Sign In Page, and other preferences.
In Gatey’s General settings you can select login mechanisms, choose sign-up attributes, set the Sign In page, add your Google reCAPTCHA v3 key, and adjust login routing.

Step 5: Connect Gatey to Your Cognito User Pool

  1. Open the User Pools screen: In the WordPress Dashboard navigate to Gatey → Settings → User Pools.
  2. Enter your User Pool ID: Paste the ID of the AWS Cognito user pool you created (e.g. us‑east‑1_AbC123xyz). Required.
  3. Enter your App Client ID: Copy the Client ID of the app client associated with this user pool (e.g. 4f9u0example). Required.
  4. Select the Region: Type the AWS region code where the user pool resides (e.g. us‑east‑1). Required.
  5. (Optional) Add an Identity Pool ID: Provide this only if you use Cognito Identity Pools for temporary AWS credentials.
  6. (Optional) Configure OAuth Domain and OAuth Scopes: Fill these when you plan to use the Cognito‑hosted UI or social logins. openid is always required; add email, profile, etc., as needed.
  7. Save Changes: Click Save at the bottom of the screen.


Result: WordPress is now linked to your Cognito user pool, enabling Gatey to authenticate and register users via AWS Cognito.

Gatey WordPress plugin “User Pools” settings page with empty fields for User Pool ID, App Client ID, Region, Identity Pool ID, OAuth Domain, and OAuth scopes.
Add your Cognito User Pool ID, App Client ID, Region, and optional OAuth details in Gatey’s User Pools settings to link WordPress with your AWS authentication backend.

Step 6: Optionally Enable WordPress Login Integration

To fully replace the native WordPress login screen (/wp-login.php), go to WordPress Dashboard  → Gatey → Settings → WordPress Login.

  1. Enable the “Integrate WordPress Login” option.
    This allows users who log in with Amazon Cognito to gain access to the WordPress backend (if their role allows).
    The plugin automatically redirects the default WordPress login flow to the Cognito‑based screen you’ve configured.

  2. Don’t lock yourself out!
    Before you enable the option, create a Cognito group that maps to the WordPress “Administrator” role, and add your own Cognito user to that group in the AWS Console.
    Then, in the Cognito Group to WordPress Role Mapping table on this screen, map that group to Administrator.
    This guarantees that you will still be able to reach the WordPress Dashboard after the native login page has been replaced.

  3. Once activated, your Cognito‑based login fully replaces /wp-login.php — including admin access and any login‑required redirects.

  4. When WordPress Login Integration is enabled, you can assign WordPress roles to users based on their Cognito groups. Scroll to the Cognito Group to WordPress Role Mapping section:

    • Enter the exact name of each Cognito group (case‑sensitive).

    • Select the corresponding WordPress role from the dropdown list.

    • Users automatically receive the mapped role upon their next login.

If a user doesn’t match any mapped group, they receive the default role (or no access to the WordPress backend), depending on your configuration.

Gatey WordPress plugin “WordPress Login” settings page showing options to integrate wp-login, set cookie expiration, and map Cognito groups to WordPress roles.
Enable wp-login integration, set cookie lifetime, and map Cognito groups to WordPress roles in Gatey’s WordPress Login settings.

Step 7 – Show the Logged-In User & Add a Login/Logout Link

If you’re not using WordPress-login integration, you still need a clear “logged-in / log-out” indicator.
With Gatey you only have to drop two blocks into your existing menu row—no extra rows, no custom JavaScript.

1 Open your Header template part

Appearance → Editor → Patterns → “Header”

2 Insert two blocks inside the existing navigation row

  1. Account Attribute block
    • Attribute: Given Name (or whichever field you prefer)
    • Prefix: Hey, 
    • Postfix: !
    • Link: /profile (or any profile page)
    • Additional CSS classes: authenticated link
    • Typography → Size: M
  2. Login/out block
    • Works automatically—shows “Log out” when signed in, “Log in” when not.
    • Additional CSS class: link
    • Typography → Size: M

Tip – The link class removes the underline until hover so these new items look identical to your menu links.
The authenticated class hides the greeting until a user is signed in.

3 Save the template part

Your header now greets logged-in users with “Hey, <Name>!” (linked to their profile) and displays a matching Log out link—no row duplication needed.

WordPress Site Editor displaying the Header template part; the Account Attribute block is selected, showing its link field set to /profile while other menu items are visible.
Screenshot of the WordPress Full-Site Editor. The Account Attribute block’s toolbar is open, demonstrating how to add a profile link and prefix/postfix directly from the block options.

5 Add (or keep) the CSS

Theme typeWhere to add it
Block themes (e.g. Twenty Twenty-Five)AppearanceThemes → Customize (your active theme) → Styles → Additional CSS – direct link resembles:/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fcss
Classic / child themesAppearance → Customize → Additional CSS  or add to style.css
				
					/* Toggle header rows */
.authenticated {
  display: var(--gatey-in-editor,
                var(--gatey-account-authenticated, none)) !important;
}

/* Typographic tweaks */
.link a { text-decoration: none; }

.link a:hover { text-decoration: underline; }

				
			
Add or tweak custom CSS for Gatey blocks and account attribute
Add or tweak custom CSS for Gatey blocks and account attribute

Visitors now see “Hey, John  Log out” once they’re logged in, and the classic Log in link when they’re not—without relying on /wp-login.php.

Front-end view of a WordPress site navigation that displays “Hey, John” with a “Log out” link for authenticated users, and shows a “Log in” link when not logged in.
Dynamic nav: greet logged-in users by name with a Log out link, or show Log in when not authenticated

🔄 Plugin Behavior and Fallbacks

When the plugin is active and a new user registers through Cognito, Gatey:

  • Creates the user in the Cognito User Pool
  • Also inserts the user into the WordPress database with the correct role (if WordPress is available)

This ensures WordPress-based features like dashboards or custom plugins still function.

Note: In headless setups (where WordPress is not running at registration time), local user sync will not occur — only Cognito will have the user record.

Gatey does not store passwords in WordPress. However, users can always reset their password later via Cognito if needed (or WordPress if Gatey is deactivated).

✅ You’re Done!

You now have a working Cognito login flow inside your WordPress site — visually integrated, and fully managed via Gatey.