The Frontegg login-box builder makes it easy to design the authentication experience for your application. Choose between passwordless and password authentication, configure social logins, and select styles.
This guide describes how to use the Frontegg builder to build the authentication experience for your application.
Follow the steps below to design your login box using the login-box builder.
Go to your Frontegg Portal and navigate to Authentication ➜ Builder ➜ Design ➜ Global.
Select the radio button for one of the following:
Whichever you choose, configure it by clicking on the Configure button.
The configure button takes you to Authentication ➜ Settings ➜ Authentication flow.
If you choose the passwordless authentication flow, you can configure settings to choose how your users will login without a password.
Configure Passwordless Authentication
Whether you want a one-time code or magic link, learn more about how to configure passwordless authentication.
If you choose the password authentication flow, you can configure settings to control how to secure user passwords.
Configure Password Security Policies
To configure your password security policies, follow the instructions on the page.
Allow your users to log in using their Google, GitHub, Facebook, or Microsoft accounts.
Go to Authentication ➜ Builder ➜ Design ➜ Global.
A switch appears for each social account that you can enable. Toggle the switch on for any social account you want to enable. You can toggle on all of them, none of them, or anything in between.
Whichever social logins you enable, you need to configure each one by clicking on the Configure button.
The Configure button takes you to a page where you can configure the settings. You need to enter information for each social login you enable, like client id, secret, and redirect url from each social account.
Adding Social Logins
Learn more about how to add social logins to your application or go to Authentication ➜ Settings ➜ Social logins.
Customize basic style properties for your Frontegg components to make them look how you want.
Go to Authentication ➜ Builder ➜ Design ➜ Style.
View and select basic style options. 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. You can set styles for the login box, inputs, submit buttons, and social login buttons.
Updated about 1 month ago