Login Box

Design the authentication experience for your application.

Choose the sign in types to build your desired authentication flows. Select the styles to make it match your brand.

This guide describes how to use the Builder to design the authentication experience for your application.

Design Your Login Box

Follow the steps below to design your login box using the login box builder.

To start, go to your Frontegg Portal and navigate to Home.

Click the go to builder button for the the Login Box.



You should see the builder like in the image below.



🚧

Editing Builder

When editing the builder, commit your changes and then publish for them to take effect.


Step 1: Set Sign In Types

In the left panel under sign in types, select and configure the sign in and sign up options for your application.

  • Single sign on
  • Email sign on
  • Sign ups allowed
  • User approval

πŸ“˜

Be sure to update the email templates for whichever sign in options you choose. Read more about how to customize emails templates or go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Emails to manage the templates.

Single sign on

Allow your users to sign in using their social accounts or SSO.

In the left panel, a switch appears for each social account and SSO option that you can enable.

Toggle the switch on for any that you want to enable. You can toggle on all of them, none of them, or anything in between.

Whichever you enable, you need to configure each one by entering information from each account. For instance, for the social accounts you need to enter information like client id, secret, and redirect url.

πŸ“˜

Adding Social Logins

Learn more about how to add social logins to your application or go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Authentication ➜ Social-Logins.


πŸ“˜

Adding SSO

Learn more about how to add SSO to your application or go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Authentication ➜ SSO.


Email sign on

Go passwordless by selecting magic code or magic link or enable sign in with password.


πŸ“˜

Whichever option you toggle on, click the gear (βš™οΈ) icon configure button and fill in the required information.


The configuration is really easy.

Here is an example of the configuration page for magic link email sign on:



πŸ“˜

Learn more about passwordless authentication and remember to configure the email template.


If you choose the password authentication flow, configure the settings to control how to secure user passwords.


Allow Signups

Select whether the login box allows users to sign up directly through the login box.

Toggle the switch on to allow sign ups.


No configuration required.

πŸ“˜

The option to sign up in the login box appears only if toggled on.


User Approval

πŸ“˜

Required Versions

Note - in order to use User Approval you must be working with one of the following minimum versions:
@frontegg/react : 4.0.22
@frontegg/angular : 4.16.0
@frontegg/vue : 1.0.15

Require users to agree to your Terms of Service, Privacy Policy, or both when signing up using your Login Box.

To display links to your policies in your Login Box and get users to agree to them, enable the Terms of Service, Privacy Policy, or both by toggling one or more switches on under User Approval.


After enabling one or both options, go to the settings page to configure the layout and links.


For layout on the signup page, choose between two options for how the user agrees:

  • Showing only text and requiring user click signup button
  • Requiring user to select a checkbox in order to agree and signup

See how each option looks in the Builder's preview before deciding which one to choose.

For links, enter a link to each of your written policies for each approval type that you enabled.

  • Terms of Use
  • Privacy Policy
  • Both

After enabling and configuring User Approvals, your Login Box displays the layout you configured with links to your policies as shown in the Builder preview.

Step 2: Set Styles

Customize basic style properties for your Frontegg components to make them look how you want.

In the right panel, view and select basic style options. Scroll down to see all the options, and toggle open each option to manage the properties.

Some of the style options are global for your application, like overall themes, colors, and logo.


Other styles you can set in the builder are more specific. For instance, you can set styles for things like the login box, inputs, submit buttons, and social login buttons.

Here is an example of the builder with the login box and input options toggled open so that you can see what the properties form looks like.



πŸ“˜

Go Live

After designing your login box in the builder, to go live just make sure that you have reviewed the Get started guide, integrated Frontegg into your app and completed the Go Live Checklist.


Did this page help you?