By the end of this tutorial, your app will have a working sign-in screen: a new member can create an account, sign in, and land on content gated to their role, while signed-out visitors see only what you allow. You’ll add the Login building block, style its sign-in screen, turn on the sign-up methods you want, and confirm the whole thing works by previewing the app as one of your member roles.

This is a no-code task: you configure everything from the Mobile App Manager in WordPress. No app rebuild or app-store submission needed to test the changes — login configuration ships in your app’s live content.

What you’ll have at the end

• A Login button placed in your app (on the tab bar or in the left menu)
• A branded sign-in screen with your logo, colors, and button labels
• One or more sign-up methods enabled (email, or Apple and Google)
• At least one member role whose content differs from what signed-out visitors see
• A verified end-to-end sign-in, confirmed by previewing the app as that role

Prerequisites

Before you start, make sure you have:

• Mobile App Manager access in WordPress (an admin account on the MAM Suite site).
• MAM Main active. Login is a core content class provided by MAM Main, so no extra plugin is required.
• At least one app already configured — a tab bar or left menu you can add a button to. If you have not built any screens yet, set those up first, then return here.
• A test member account you can sign in with on a device or simulator, separate from your admin account.
• (Optional) If you plan to offer Apple and Google sign-in, the Google client ID for your app. You can enable email sign-up first and add social sign-in later.

A quick note on wording: your install’s screenshots and button labels may not match the names below exactly. Where this tutorial names a setting, it’s using that setting’s exact title in the Login Settings panel. Where it names a menu, look for the closest match in your own Mobile App Manager.

Step 1 — Add the Login button to your app

Login arrives as a content class — one of the building blocks you assemble screens from in the no-code builder — and you add it just like any other button.

1. In WordPress, open Mobile App Manager → App Setup.
2. Choose where members will reach the login screen — your tab bar or your left menu — and add a new button to that location.
3. For the button’s content type, choose Login Button.
4. Save the button.

You now have a Login button wired into your app. Right now it shows the standard sign-in screen with default colors and labels — the next steps make it yours and set up how members sign up.

Tip: A Logout Button is a separate content class. If you want signed-in members to be able to sign out from inside the app, add a Logout button too — commonly in the left menu or a settings drawer.

Step 2 — Choose how members sign up

Open the Login button’s settings and find the Login Settings panel. Decide how new members create accounts.

• Require Login? — When set to Yes, the app gates content behind sign-in. Leave this No if you want visitors to browse first and sign in only when they hit member-only content.
• Allow user to sign up with Email — Set Yes to let members create an account with an email address.
• Allow user to sign up with Apple and Google — Set Yes to offer social sign-in. If you enable Google, add your Google Login API client ID in the field provided.
• Require email validation during account setup — Set Yes to require members to confirm their email before the account is active.

Turn on at least one sign-up method, or new members won’t have any way to create an account. For your first pass, Allow user to sign up with Email = Yes is the simplest path to something you can test right away.

Save your changes.

Step 3 — Brand the sign-in screen

Still inside the Login Settings panel, shape how the screen looks. Every setting here is optional, but a branded screen is the first thing members see — worth the few minutes it takes.

• Top Logo — Upload the logo shown at the top of the sign-in screen.
• Background Image and Screen Background Color — Set the screen’s backdrop. The background color default is black; the image, if set, sits on top.
• Button Background Color / Button Text Color — Style the primary action buttons. Defaults are a white button with black text.
• Links text color — The color of secondary links (for example, the forgot-password link). Default is white, which suits a dark background.
• Login Button Title, Signup Button Title, Send Code Button Title — Override the default button labels with your own wording.
• Terms and Conditions Message and Terms and Conditions URL — Show a terms acknowledgment and link it to your policy.
• Hide Forgot Password Button — Set Yes if you don’t want a password-reset link on the screen.

Save your changes. These settings are global — they shape the login screen everywhere in your app, not just on one button.

Step 4 — Customize onboarding (optional)

Onboarding is a separate content class — it drives the first-launch intro screens a member sees before, or instead of, being asked to sign in. Use it to welcome new members and set expectations before you ask them to log in.

1. In App Setup, add an Onboarding button where you want the onboarding flow to launch from (commonly the home screen or first launch).
2. Save it.

The Onboarding block itself needs no per-button settings — it just launches your app’s onboarding flow. Think of onboarding as the “why sign up” pitch, and the Login screen as the “how to sign up” step.

Step 5 — Make sure a role sees role-specific content

The whole point of login is that signed-in members see something signed-out visitors don’t. In MAM Suite, app content is organized per role, so each member role can have its own buttons and screens.

1. Confirm you have at least one member role beyond the signed-out/default experience.
2. In that role’s app content, place a button or screen that the signed-out experience does not include — this is the content your test member should see only after signing in.
3. If you want a new role to inherit an existing role’s layout as a starting point, use Clone from Role to copy one role’s app content into another, then adjust.

Save your changes. Now there’s a real, visible difference between the signed-out and signed-in experience — exactly what you’ll verify next.

Step 6 — Verify the sign-in flow

Now walk the whole loop end to end. As an admin, you don’t need a separate device or account to do this — MAM Suite lets you “clone” into any role and see exactly what that role sees.

1. Preview as a visitor (signed out). Confirm the Login button appears where you placed it and that the role-specific content from Step 5 is not visible.
2. Open the Login screen. Confirm your logo, colors, and button labels match what you set in Steps 2–3.
3. Sign in (or sign up) as your test member. Use the sign-up method you enabled. If you turned on email validation, complete the validation step.
4. Confirm role-specific content. After sign-in, the content you gated in Step 5 should now appear.
5. Preview as the member’s role using the admin preview/clone option to double-check the role sees the intended content.
6. (If you added a Logout button) Sign out and confirm the app returns to the signed-out experience.

If a member can sign up, sign in, and see content a signed-out visitor can’t, your login is working.

Troubleshooting

• No way to create an account on the sign-in screen — You haven’t enabled a sign-up method. Revisit Step 2 and set Allow user to sign up with Email (and/or Apple and Google) to Yes.
• Google sign-in button does nothing — The Google Login API client ID is missing or incorrect. Add the correct client ID in the Login Settings panel.
• Signed-in and signed-out members see the same thing — There is no role-specific content to differentiate them. Revisit Step 5 and place a button or screen that only the member role has.
• Members are blocked from browsing before they sign in — Require Login? is set to Yes. Set it to No if you want an open-browse experience with sign-in only for member content.
• Branding changes don’t show up — Confirm you saved the Login Settings panel. These settings are global; if you have more than one Login button, they share the same screen styling.

What’s next

• Add a Logout button so members can sign out from inside the app.
• Use Onboarding to create a stronger first-launch welcome that leads into sign-up.
• Set up member roles in depth and tailor each role’s screens — see the user-roles and per-role content references.
• Configure the welcome email and password reset messages members receive during sign-up and recovery.
• If you sell access, look at how login pairs with in-app purchases and member entitlements.