### Introduction: Why WordPress Needs a Better Login

WordPress powers over 40% of the web — but its default login (
```
/wp-login.php
```
) is one of the most common attack vectors. Password leaks, brute-force bots, outdated plugins, and scattered SSO integrations make WordPress security a real challenge.

[**Amazon Cognito**](https://aws.amazon.com/cognito/) gives you enterprise-grade authentication out of the box: secure login, MFA, social and enterprise SSO, token-based access. But integrating Cognito into WordPress has traditionally required custom PHP code and storing secrets in your database.

That’s where [**Gatey**](https://wpsuite.io/gatey/) comes in. Gatey is a drag-and-drop plugin that makes Cognito work in WordPress in minutes, without writing code. In this guide you’ll learn:

-   What Cognito is and why it’s a good fit for WordPress
-   The key Cognito concepts: **User Pools, App Clients, Identity Pools**
-   How Gatey simplifies integration with native blocks
-   Step-by-step setup: install, configure, and go live
-   ✅ Checklist and common pitfalls

[Try Gatey Free →](https://wordpress.org/plugins/gatey/)

[Read the Docs](https://wpsuite.io/docs/)

### Why Amazon Cognito for WordPress

[Amazon Cognito](https://aws.amazon.com/cognito/) is AWS’s managed identity service. It handles sign-up, sign-in, and access control for millions of users. Key advantages:

-   **Secure by design**: OAuth2, OIDC, and JWT tokens; runs on AWS’s infrastructure.
-   **Scalable**: from small blogs to enterprise platforms.
-   **MFA support**: add TOTP or SMS without extra plugins.
-   **Social & enterprise SSO**: Google, Apple, Facebook, SAML, OIDC.
-   **AWS integration**: directly connect to S3, DynamoDB, or Lambda via IAM.

 Feature | Default WordPress | Amazon Cognito |
| --- | --- | --- |
 Password storage | On your WP database | Encrypted in AWS Cognito |
 MFA | Manual plugins | Built-in |
 Social login | Third-party plugins | Native via [Hosted UI](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-integration.html) |
 API security | Limited (cookies, non-scalable) | JWT & IAM |
 Works after static export | ❌ No | ✅ Yes |

### Cognito Concepts 101

#### [User Pool](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html)

A **User Pool** is a secure directory that stores user accounts. It manages registration, MFA, attributes, and issues JWT tokens.

#### [App Client](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html)

An **App Client** defines how WordPress connects to the User Pool. Gatey only needs the App Client ID (no secret required).

#### [Identity Pool](https://docs.aws.amazon.com/cognito/latest/developerguide/identity-pools.html)

An **Identity Pool** issues temporary AWS credentials so users can access AWS services. Optional for WordPress, required for direct AWS integration.

### Why Gatey Is the Missing Piece

Without Gatey, integrating Cognito into WordPress means writing PHP callbacks, storing secrets, and handling redirects manually.

**[Gatey](https://wpsuite.io/gatey/) makes this painless:**-   No PHP callbacks — everything runs in the browser
-   No secrets stored on your server
-   Drag-and-drop **Authenticator** and **Account Attribute** blocks
-   Works with Gutenberg, Elementor, classic themes
-   22 built-in languages (with override option)
-   Compatible with static WordPress exports

### Step-by-Step: Setup Guide

#### Step 1: Install the Gatey Plugin

You can install [Gatey](https://wordpress.org/plugins/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.](https://wpsuite.io/wp-content/uploads/elementor/thumbs/screenshot-1-3-r97yfkjwmi4pbdpafry5rnghrpis32si014orj8s8w.png "Gutenberg editor with Gatey Authenticator sign-in form")](https://wpsuite.io/wp-content/uploads/2025/05/screenshot-1-3.png)

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_.
      41.   Authenticator 2: 
          ```
          screen = changePassword
          ```
          , check _Show Open Button_.
      46.   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.](https://wpsuite.io/wp-content/uploads/elementor/thumbs/profile-r6wricrku0hmk48396w3sy7z2uuv47wzucv7t8wlc0.png "Edit Profile layout with Gatey blocks in Gutenberg")](https://wpsuite.io/wp-content/uploads/2025/05/profile.png)

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.](https://wpsuite.io/wp-content/uploads/elementor/thumbs/admin-general-r97ynptjuta5xpvavaprdlgb3xdasn4r4co6hv5ybk.png "Gatey – General Settings")](https://wpsuite.io/wp-content/uploads/2025/05/admin-general.png)

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.](https://wpsuite.io/wp-content/uploads/elementor/thumbs/admin-userpools-r97ypb5pfpgnlxk0khi03ozfcfiou6gdo8gsrqsxs0.png "Gatey – User Pools Configuration")](https://wpsuite.io/wp-content/uploads/2025/05/admin-userpools.png)

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:
    
      18.   Enter the **exact name** of each Cognito group (case‑sensitive).
          
      20.   Select the corresponding WordPress role from the dropdown list.
          
      22.   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.](https://wpsuite.io/wp-content/uploads/elementor/thumbs/admin-wplogin-r97ys7hsibfhencgn8llagnla78fkkyl2kvp1gi8lc.png "Gatey – WordPress Login Settings")](https://wpsuite.io/wp-content/uploads/2025/05/admin-wplogin.png)

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)
      2.   **Prefix**: 
          ```
          Hey, 
          ```
          
      7.   **Postfix**: 
          ```
          !
          ```
          
      12.   **Link**: 
          ```
          /profile
          ```
           (or any profile page)
      17.   **Additional CSS classes**: 
          ```
          authenticated link
          ```
          
      22.   **Typography → Size**: M
    
2.  **Login/out** block  -   Works automatically—shows “Log out” when signed in, “Log in” when not.
      25.   **Additional CSS class**: 
          ```
          link
          ```
          
      30.   **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.](https://wpsuite.io/wp-content/uploads/elementor/thumbs/header-r98hi2ye5fwuumi8p0vvcwv4rrsmwt6ypy2bzvchs0.png "Gatey Account Attribute Block in Header")](https://wpsuite.io/wp-content/uploads/2025/05/header.png)

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.

##### 4 Add (or keep) the CSS

 Theme type | Where to add it |
| --- | --- |
 **Block themes** (e.g. Twenty Twenty-Five) | **Appearance** → **Themes → Customize** (your active theme) → **Styles** **→ Additional CSS** – direct link resembles:
```
/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fcss
```
 |
 **Classic / child themes** | **Appearance → Customize → Additional CSS**  _or_ add to 
```
style.css
```
 |

```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; }
```

Copy

[![Add or tweak custom CSS for Gatey blocks and account attribute](https://wpsuite.io/wp-content/uploads/elementor/thumbs/css-r98hxhj65p014k4oqolr80x393v728cli6yt54i7sw.png "Custom CSS panel in Site Editor – Gatey visibility and attribute styles")](https://wpsuite.io/wp-content/uploads/2025/05/css.png)

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.](https://wpsuite.io/wp-content/uploads/elementor/thumbs/fullpage-r98i4quaxmxqs5l4ctk1h6z8e838i35z64bsk1qrr4.png "Personalized greeting and Log out link in navigation – Gatey")](https://wpsuite.io/wp-content/uploads/2025/05/fullpage.png)

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.

### Pro Tips & Common Mistakes

#### Pro Tips

-   Lock the Authenticator language to avoid mismatched locales
-   Use _Modal_ variation for profile actions
-   Add reCAPTCHA for sign-up forms to block spam bots

#### Common Mistakes

-   Forgetting to add yourself to the admin group before replacing 
    ```
    /wp-login.php
    ```
     → lockout risk
-   Misconfigured OAuth scopes (at minimum, 
    ```
    openid
    ```
     is required)
-   Wrong AWS region in Gatey → login won’t work

### Pre-Publish Checklist

-   User Pool ID, App Client ID, Region set
-   Sign In page selected in General settings
-   Required sign-up attributes configured
-   (If MFA) TOTP issuer label set
-   Group → role mapping tested for admin access

### Key Takeaways

-   Cognito brings enterprise-grade login to WordPress for free
-   Gatey makes Cognito integration no-code, fast, and safe
-   Setup is a matter of minutes, not days
-   Works with both dynamic and static WordPress
-   Future-proof: MFA, Social login, APIs can be added later