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.
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.
When editing the builder, commit your changes and then publish for them to take effect.
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.
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.
Learn more about how to add SSO to your application or go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Authentication ➜ SSO.
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.
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.
Note - in order to use User Approval you must be working with one of the following minimum versions:
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.
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.
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.
Updated 2 days ago