The custom app login page lets you enhance your brand and your user experience by making it more in line with your company, organization, or use case.

This is just one of the many ways that you can make the app your own!
​
With it, you can:

Simply go to Security > Login Screen

We’ll go through the Login Screen section by section so that you know how to make an awesome looking login screen!

First, we’ll go through the options found in the Graphics section:

The Logo section allows you to upload your custom logo which will appear above the “Email” and “Password” fields.

Here’s how you can add your logo to the login screen:

Step 1: Click on the image upload button

Click on the gray image upload button:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Step 2: (optional) Adjust the image’s scale in the login screen

We provide a slider that allows you to adjust the scale of your logo as it’s displayed on the login screen.

The Custom Background section allows you to upload your own custom background or apply a custom colored gradient to the login screen. Let’s go through both options:

If you want to use your own image as the background for your login screen, read on to find out how to do this!

Step 1: Click on the image upload button

Click on the gray image upload button:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Note: We recommend that you upload two images that are either a jpg or a png. One that’s 750px x 1043px for phones, and one that’s 1536px x 2048px for tablets.

Step 2: (optional) Adjust the background image’s opacity

We provide a slider that allows you to adjust the opacity of your background image on the login screen.

If you want to use a single background color or a two-color gradient as the background for your login screen, read on to find out how to do this!

Step 1: Select “On” under “Background Color”

First, you will need to enable the background color option

Step 2: Select the color(s) that you want to use

Click on the box next to “Background Color” to begin selecting the color(s) that you’d like to use in the background of the login screen.

This will bring up the color selection box where you have a number of options!

You can use a single color by selecting “Solid” for “Color Type”:

Or you can create a gradient between two colors by selecting “Gadient” for “Color Type”:

Note: You have the ability to change how much of the screen each color takes up, the opacity of each color, as well as the option to choose from a number of different gradient types.

You can either use our color picker or if you know the hex code of the color you want to use, you can type it into this field:

Pro Tip: You can combine the background image and color to produce some amazing results!

Did you know that you can combine the background image and background color that you created to make some really stunning results? All you need to do is enable the background color and adjust the opacity of the background image.

The “Input Fields” section allows you to adjust the look of the “Email” and “Password” input fields.

How you can change the look of the input fields

You can change the color of the text in the “Email” and “Password” input fields by clicking on the color picker next to “Text”

Click on this box to change the color of the “Email” and “Password” text in the input fields:

You can change the color of the line that displays under the “Email” and “Password” fields by clicking on the color picker next to “Border Color”

Click on this box to change the color of the line that shows under the “Email” and “Password” input fields:

You can change the color of the icons that display inside the “Email” and “Password” fields by clicking on the color picker next to “Icons”

Click on this box to change the color of the icons that display inside to the “Email” and “Password” input fields:

We also give you the option to hide these icons. Simply select “Off” to hide these icons here:

Note: For all three options, you can either use our color picker or if you know the hex code of the color you want to use, you can type it into this field:

The “Button & Text” section allows you to adjust the look of the “Login” button as well as the links and text on the login screen. Here’s how you can change the look of those elements in the login screen:

You can change the color of the “Login” button’s text by clicking on the color picker next to “Button Text”

Click on this box to change the color of the text in the “Login” button:

You can change the color of the text that displays under the “Login” button by clicking on the color picker next to “Text”

Click on this box to change the color of the text that displays under the “Login” button:

You can change the color of the “Login” button by clicking on the color picker next to “Buttons”

Click on this box to change the color of the “Login” button:

You can change the color of the “Forgot Password” and “Register” links by clicking on the color picker next to “Links”

Click on this box to change the color of the links found within the Login screen:

You can also change the size and shape of the “Login” button in this section

We give you the freedom to change the Button Corner Radius of the log in button:

The Button Corner Radius slider makes the edges of the button more or less rounded. If you would like to make the button look like an oval, then move the slider all the way to the right. If you would like it to be a rectangle, move it all the way to the left.

Here you can enable or disable the ability to login or register with our Sign In Integrations: Facebook, Google, Twitter, and Apple.

Note: This option is only available on our Professional level and above plans.

Session Expiration allows you the app owner to configure your user's session expiration time to increase security. This would be recommended for use with high-risk data apps.

Here you can set up your own domain for your users. This comes in handy and makes it easier for your users for internal apps when they all have the same email domain. For example, if all of your users have emails ending in “@yourdomain.com” you can type that domain into this box. This will allow your users such as “cool.guy@yourdomain.com” to login with just “cool.guy” since your domain will be automatically attached to the end of their username in-app.

If your user types in their full email address, or an email address with a different email domain, that will overwrite the default domain that was set up. So, if you have “@yourdomain.com” set up as your default domain and someone registers as "cool.guy@gmail.com", they will be registered as cool.guy@gmail.com.

Also, if they type in their email address with the default domain included, out system won’t attach the default domain to the end of their email address. So if the user “cool.guy@yourdomain.com” registers with the full email address, they will be registered as that, not “cool.guy@yourdomain.com@yourdomain.com”.

The Language Settings allows you to edit phrases and messages found in the login screen.

The Customize tab gives you additional control over customizing the text of what your users see when they register for an in-app profile. For most of our apps the registration page only asks the user for their email and password, but with the Customize Tab you not only can change the phrasing in your register page, but it also allows you to add additional fields to the registration screen as well as append your own terms and conditions and privacy policy to the end of our own.

If you would like to start customizing your registration screen all you need to do is click this toggle to enable the customization options for your registration page.

Once you have enabled the customization options for your registration page, you’ll see that there’s a number of different sections. In the Customer Registration page, you are able to add either Preset Fields or Custom Fields for your users to fill out.

Preset Fields

The available Preset Fields are Address, Bio, Date of Birth, Full name, Profile Picture, and Telephone.

If you would like to make these fields required, simply click on the section you’d like to add and then you will see the Registration editor be pulled up.

Simply adjust your desired requirements and click Save.

Bio Section

The bio section allows users to enter information about themselves such as who they are, what they like to do, their role in the company, etc.

Just like the Name Section, all you need to do to show/hide this section is to click the toggle next to “Active” and if you’d like to make it a required field click on the toggle next to “Required”.

Full Name

The Full Name preset can be enabled and this will allow you to give the users the ability to user their first and last name or set a display name instead.

Email Section

The Email Section is slightly different from the Name and Bio Sections in the sense that an email address is required for profile registration. So while you can’t show/hide this section, you can change the phrasing of the email field’s label and error messages.

Address Section

In the Address Section, you can allow users to enter their address when registering.

Note: In order for this to work you will need to upload your Google API key. For more information please reach out to Support@BuildFire.com.

You can also just require the user to enter in their zip code as opposed to their full address. Doing this doesn’t require the Google API key.

Password Section

Just like the Email Section, passwords are required. In this section you can alter the text of the label that appears in the password field as well as the error messages that appear when a user doesn’t meet the password requirements.

If you do not toggle “Allow simple password,” Users are still required to choose a password that’s at least 8 characters long and contains at least one Upper Case letter, Lower Case letter, Number, and a Symbol.

You can also require users to re-type their password in by clicking the re-type password toggle.

This can help users verify that they’ve typed in their password correctly when registering for an in-app profile.

Custom Fields

The available Custom Fields are Text, Number, Single Select, and Multiple Select

If you would like to make these fields required, simply click on the section you’d like to add and then you will see the Registration editor be pulled up.

Simply adjust your desired requirements and click Save.

Text

The Text field allows you to require users to enter in either Short or Long Text answering a question you might ask or provide a description.

Number

Set a number requirement users have to enter when registering. You are able to enable decimals and impose a minimum and maximum number.

Single Select

The Single Select option allows you to provide a drop-down of answers your users can select from.

For example for an internal employee app, you can set different departments your users can choose from.

Multiple Select

The Multiple Select is similar to the Single Select option except that users can select multiple answers in the drop down list.

Note: tags will be applied to the user depending on the answers they select

Custom SSO (Single-Sign-On)

Custom SSO is a great option for having your users login with the same credentials that you may have on another system.

Just know that this is an option and if you are interested in learning more, please visit our dedicated help article here.

Note: We currently do not support a SAML version of SSO.

Terms And Conditions & Privacy Policy Section

To get to your Terms and Conditions & Privacy Policy. Go to Security > Terms and Conditions. This section allows you to append your own custom terms and conditions and privacy policy to the end of the terms already laid out by us in the app.

Two things to note: If you decide to add your own terms and conditions and/or privacy policy to the app, they won’t replace the terms already laid out within the app but will be added at the end of the terms. You will also need to accept liability for any legal issues brought upon by adding in your own terms to the app by checking this box:

Once you have accepted liability, you can begin altering the Terms and Conditions and Privacy Policy labels as well as add your own custom terms. Just make sure you click “Save” once you are done.

Congratulations! You now know how to customize your registration page!