What you’ll do
Add a Login button to your app, and your users can sign in, create an account, and
reach anything that’s gated to signed-in users — favorites, orders, profile, and
whatever else depends on knowing who’s asking.
You’ll do this in two parts:
- Place a Login button in your app’s navigation (a main tab or the left menu).
- Configure the login screen — which sign-in methods are offered, whether login
is required, and how the screen looks.
No code here — everything below is configured right in the Mobile App Manager admin.
Under the hood, the Login button is one of MAM Suite’s built-in content types —
registered as the “Login Button” content type (vc_typelogin_button). It
behaves like any other nav button you add to an app; what sets it apart is the
Login Settings panel it exposes.
Before you start
- MAM Suite with MAM Main activated (the Login button is part of MAM Main).
- A draft app you can edit in Mobile App Manager → App Navigation.
- If you want Google sign-in, have your Google OAuth client ID ready (see
Google sign-in below).
Part 1 — Add the Login button
You add the Login button the same way you’d add any other navigation button.
- Go to Mobile App Manager → App Navigation and open the app you’re building.
- Choose where the button should live:
- As a main navigation tab, or
- As an entry in the left menu.
- Add a new button in that location and set its content type to Login Button.
- Save.
The Login button itself has no per-button content source to configure — when you
add it, the builder simply shows “No settings required” for the content source.
Everything it does comes from the Login Settings you’ll set up in Part 2.
Tip — add a Logout button too. There’s a matching Logout Button content type.
Add one to the left menu or settings menu so signed-in users have an obvious way to
end their session — like the Login button, it needs no content configuration of its
own.
Part 2 — Configure the login screen (Login Settings)
Edit the Login button and you’ll find a Login Settings panel. These settings are
global — they govern the whole app, not just the one button — so you only ever
need to set them once.
The admin shows them all together in a single Login Settings panel. Here, we’ve
grouped them by what they control instead, so the order below may not match what you
see on screen.
Whether login is required
| Setting | What it does |
|---|---|
| Require Login? | When Yes, the login screen is the first thing users see and they must sign in (or create an account) before reaching any content. When No, the app opens straight to its content and signing in is optional — users can log in later to reach account-gated features. |
Most content apps leave this set to No, so people can browse before committing to
an account. Membership-style or ordering apps usually flip it to Yes.
Which sign-in methods are offered
| Setting | What it does |
|---|---|
| Allow user to sign up with Email | Shows the Sign up with Email option so new users can create an account with an email address and password. |
| Allow user to sign up with Apple and Google | Shows the Sign in with Apple and Sign in with Google buttons for social login. |
| Require email validation during account setup | When Yes, a new account isn’t activated until the user verifies their email with a code sent during signup. Prevents fake or mistyped addresses. |
Turn on at least one of these, or there’s no way for anyone to create an account.
Email plus Apple/Google together is a common combination.
Google sign-in (extra step)
Once Allow user to sign up with Apple and Google is on, Apple sign-in just works.
Google sign-in needs one more thing — a client ID:
| Setting | What it does |
|---|---|
| Google Login API | The Google OAuth client ID that enables Google sign-in. Get it from your project’s OAuth credentials in the Google Cloud Console. |
If Apple/Google is on but Google Login API is left blank, the Apple button still
works fine — the Google button just won’t be able to sign anyone in.
Button labels and signup wording
Everything in this table is optional — leave a field blank and the app falls back to
its default wording.
| Setting | What it does |
|---|---|
| Login Button Title | Label for the primary Login button (e.g. “Sign In”, “Member Login”). |
| Signup Button Title | Label for the Sign Up button (e.g. “Create Account”, “Join”). |
| Send Code Button Title | Label for the button that sends a sign-up / verification code (code-based or passwordless signup). |
| Sign Up Code Placeholder | Placeholder text in the code-entry field during signup. |
| Sign Up Code Reminder | Reminder text shown to the user about the signup code. |
| Hide Forgot Password Button | Yes hides the Forgot Password? link — useful for apps that use code-based or social login only. |
Terms & Conditions at signup
| Setting | What it does |
|---|---|
| Terms and Conditions Message | The acceptance wording shown on the signup screen (e.g. “By signing up you agree to our Terms & Conditions”). |
| Terms and Conditions URL | The URL opened when a user taps the Terms & Conditions link. Point it at your hosted terms page. |
Set these two together: the Message is what users read, the URL is where it links.
Look and feel of the login screen
| Setting | What it does |
|---|---|
| Top Logo | Logo image shown at the top of the login screen. Use a transparent PNG that reads against your background. |
| Background Image | Full-screen background image for the login screen. |
| Screen Background Color | Background color (used when no background image is set). Default #000000. |
| Button Background Color | Background color of the login/signup buttons. Default #ffffff. |
| Button Text Color | Text color on those buttons. Default #000000. |
| Links text color | Color of links on the login/profile screens (e.g. Forgot Password). Default #ffffff. |
Putting it together — common setups
Optional accounts (browse first).
Require Login? No · Sign up with Email Yes · Apple/Google Yes (with Google
client ID) · Email validation optional. People can dive straight into the app and sign
in later, whenever they want favorites or their profile.
Required accounts (gated app).
Require Login? Yes · pick your sign-in methods. The login screen greets users
first, and nothing else in the app opens up until they’ve signed in.
Social-only login.
Sign up with Email No · Apple/Google Yes (with Google client ID) · Hide Forgot
Password Yes (no password to recover).
Verify it
Now confirm it all behaves the way you set it up.
- Save the app, then rebuild or refresh your preview or test build.
- Open the app:
- If Require Login? is Yes, you should land on the login screen first.
- If No, look for the Login button wherever you placed it (tab or left menu).
- Check that the sign-in methods you turned on actually appear (Email form,
Apple/Google buttons). - Create a test account start to finish. If email validation is on, make sure the
code step shows up. - Once you’re signed in, confirm a signed-in-only feature (favorites/profile) is now
reachable — and that the Logout button, if you added one, actually ends the
session.
Related articles
- App Setting: Require Login?
- App Setting: Allow user to sign up with Email
- App Setting: Allow user to sign up with Apple and Google
- App Setting: Require email validation during account setup
- App Setting: Google Login API
