Using Login Box Builder

Overview

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.

Design Your Login Box

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

Step 1: Set Authentication Flow

Go to your Frontegg Portal and navigate to Authentication ➜ Builder ➜ Design ➜ Global.

Select the radio button for one of the following:

  • Passwordless
  • Password

Whichever you choose, configure it by clicking on the Configure button.


πŸ“˜

The configure button takes you to Authentication ➜ Settings ➜ Authentication flow.


Passwordless

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.


Password

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.


Step 2: Add Social Logins

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.


Step 3: Set Styles

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.

πŸ“˜

Go Live

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


Did this page help you?