Styling Options

Portal Builder

Customization use cases for Frontegg Embedded and Hosted modes.

Login Box Customization
586

šŸš§

Customization basics

The following topic covers a bunch of customization options you can implement in either the Frontegg Embedded or Hosted modes.

The loginBox attribute allows you to customize style elements at your login-box level and provides additional flexibility for the sub-attributes and pages linked to it (such as activate account, forgot password, MFA etc.).

Changing the logo

Changing the default logo is a great example of customizing your login box appearance. To change your logo, insert your desired image within the logo property of your themeOptions object, like so:

themeOptions: FronteggThemeOptions = {
    loginBox: {
        logo: {
            image: 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg'
        },
    }
}

Which results in the following:


Changing Default Styling Examples

By default, the Frontegg login box has a modern theme that looks like this:

To change the theme name programmatically, you can do so under the themeName key:


const themeOptions: FronteggThemeOptions = {
    loginBox: {
        themeName: 'classic',
    }
}

In the above case, the classic theme overrides the default and results in the following:

šŸ“˜

Available Themes

The theme names you can use are: modern, classic, vivid, and dark.

Changing the browser title

Changing the browser title is available under the docTitle key, like so:

//Required versions:
//@frontegg/[email protected]
//@frontegg/[email protected]
//@frontegg/[email protected]
//@frontegg/[email protected]


const themeOptions: FronteggThemeOptions = {
  loginBox: {
    login:{
      docTitle: 'Login browser title'
    },
    signup: {
      docTitle: 'Signup browser title'
    }
  }
}

Resulting in the following:

šŸ“˜

Migrating from older versions?

If you are migrating from older versions, this replaces the headerImage property used on the FronteggAppOptions.

Changing the background image

Changing the background image of the entire page is available by using the rootStyle attribute of the loginBox:

import backgroundImage from '../assets/gradient';

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        rootStyle: {
            backgroundImage: backgroundImage
        }
    }
}

Which looks like:

šŸ“˜

Migrating from older versions?

If you are migrating from older versions, this replaces the backgroundImage property used on the FronteggAppOptions.

Flat design

To control the appearance of the box, you can change the boxStyle attribute within your loginBox :

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        boxStyle: {
            boxShadow: 'none',
            background: 'transparent'
        },
    }
}

Which looks like:


Adding a footer to the login box

In some use cases, you'd want to add a footer that includes your terms of use and privacy policy.
Adding such a footer at the login-box level will cause the footer to appear in all the login-box pages. Here is an example:

const themeOptions =  {
    loginBox: {
        boxFooter: () => {
            return (
                <div
                    style={{
                        textAlign: 'center',
                        marginTop: '30px',
                        fontSize: '12px',
                        lineHeight: '16px',
                        color: '#36373C',
                    }}>
                    By continuing up I agree to Acme's{' '}
                    <a
                        target='_blank'
                        rel='noopener noreferrer'
                        style={{ color: '#36373C' }}
                        href={'https://acme.com/terms'}>
                        Terms of Service
                    </a>{' '}
                    and{' '}
                    <a
                        target='_blank'
                        rel='noopener noreferrer'
                        style={{ color: '#36373C' }}
                        href={'https://acme.com/policy'}>
                        Privacy Policy.
                    </a>
                </div>
            )
        }
    }
}

Which generates the following:

āš”ļø The same footer can be applied only to a specific page, e.g., the Signup page, by moving it under the loginBox section as done below:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        signup: {
            boxFooter: () => {
                return (
                    <div>
                        ...
                    </div>
                )
            }
        }
    }
}

Which removes it from the Sign in page and adds it to the Sign up page:

Additionally, you can place the footer outside of the login box (on the page) as done below:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        signup: {
            pageFooter: () => {
                return (
                    <div>
                        ...
                    </div>
                )
            }
        }
    }
}

Which generates the following:

Split layout for the login box

In some of the cases, you will choose to have the login and signup forms not in the center of the dialog, but split with some marketing or commercials messaging on the right of it.

The way to achieve it is via the layout property of the loginBox as the snippet below shows.


const themeOptions: FronteggThemeOptions = {
    loginBox: {
        layout: {
            type: 'float-left',
            splitSize: 50,
            sideElement: () => {
                return <div style={{width: '50%'}}>
                    <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2370&q=80"
                         alt="Hackers"/>
                </div>
            },
            sideElementStyle: {
                width: '50%'
            }
        }
    }
}

Which results in the following:

Customizing the social login buttons

By default, the social login buttons are spread horizontally on the same row.
You can change the way that they are spread from a row flex mode to a column flex as done below:


const themeOptions: FronteggThemeOptions = {
    loginBox: {
        socialLogins: {
            containerStyle: {
                display: 'flex',
                flexDirection: 'column',
            },
            buttonStyle: {
                base: {
                    marginTop: '10px'
                }
            }
        },
    }
}

Which orders the buttons like this:

Removing the text from the buttons

If you want to remove the text of the social login buttons and leave it with icons only, this is possible as well using the snippet below:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        socialLogins: {
            iconsOnly: true,
        },
    }
}

Which looks like this:

Changing the colors of the social login buttons

You can control the colors of the social login buttons by overriding the buttonStyle property on the socialLogins buttons section:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        socialLogins: {
            buttonStyle: {
                base: {
                    borderRadius: '0.5rem',
                    color: '#000',
                    background: '#fff',
                    border: '0.5px solid black'
                }
            },
        },
    }
}

Which looks like this:

Controlling the social logins divider

You can change the style of the divider using the dividerStyle attribute under the socialLogins property of the loginBox:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        socialLogins: {
            dividerStyle: {
                backgroundColor: '#f5f5f5',
                borderColor: '#f5f5f5',
                borderWidth: '1px',
                borderStyle: 'solid',
                marginTop: '10px',
                marginBottom: '10px',
            }
        },
    }
}

Which results the following:

Not enough? Want to implement your own divider? We got you covered! šŸš€

import React from "react";
import contextOptions from './context-options';
import {FronteggProvider, FronteggThemeOptions} from "@frontegg/react";

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        socialLogins: {
            divider: () => {
                return <div>My super duper divider</div>
            },
        },
    }
}

const Provider = () => (
    <FronteggProvider contextOptions={contextOptions} themeOptions={themeOptions}>
        <div />
    </FronteggProvider>
);

export default Provider;

Customizing the inputs

Customizing the style of the inputs on the login box is available using the inputTheme under the loginBox section:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        inputTheme: {
            base: {
                backgroundColor: '#f5f5f5',
                borderColor: '#e5e5e5',
                color: '#333',
                borderRadius: '4px',
                borderWidth: '1px',
                borderStyle: 'solid',
                boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
                fontSize: '14px',
                fontWeight: '400',
                height: '40px',
                padding: '0 15px',
                transition: 'border-color .2s ease-in-out, box-shadow .2s ease-in-out',
            },
        }
    }
}

Which looks like this:

Customizing the links

The links (such as the Don't have an account? Sign up) on the login box can be customized as well:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        linkButtonTheme: {
            base: {
                color: 'red',
                textDecoration: 'underline',
                fontWeight: 'bold',
            }
        },
    }
}

Which looks like this:

Customizing the submit button

The submit (login) button can be customized using the snippet below:

const themeOptions: FronteggThemeOptions = {
    loginBox: {
        submitButtonTheme: {
            base: {
                backgroundColor: '#00bcd4',
                color: '#fff',
                borderColor: 'transparent'
            }
        }
    }
}

Which looks like this:

Changing the input errors

Style the inputs and labels for the error messages in your forms. For instance, change the color and font family. Here is sample code that changes the color to pink and fontFamily to monospace for the input error alerts:

const themeOptions: FronteggThemeOptions = {
    components: {
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    "&.Mui-error": {
                        color: "pink",
                        fontFamily: "monospace",
                    },
                },
            },
        },
    }
}

Which looks like this:

1332

Customizing the font globally

Set the fontFamily at the global level to monospace:


const themeOptions = {
   typographyStyleOptions: {
      fontFamily: 'staatliches',
  },
}

Customizing the loader

The loader we display when loading the login box can be customized as well. You actually can implement your own loader and get the loading hook from the application provider in order to know when to display it. Just as shown in the snippet below. In this example, we utilized a loader element from semantic-ui):

import React, {useState} from "react";
import {FronteggProvider} from "@frontegg/react";
import {Dimmer, Loader} from "semantic-ui-react";

import contextOptions from './context-options';

// Replace this with your app logo šŸ‘‡
const headerImage = 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg';

const MyCustomLoaderComponent = () => {
    return (
        <Dimmer active>
            <Loader>Loading using custom loader!</Loader>
        </Dimmer>
    )
}
const Provider = () => {
    const [loading, setLoading] = useState(true);

    return (
        <div>
            <FronteggProvider customLoader={setLoading} contextOptions={contextOptions} headerImage={headerImage}>
                <div />
            </FronteggProvider>
            {loading && <MyCustomLoaderComponent />}
        </div>
    )
};

export default Provider;

Which looks like this:

Endless opportunities exist. Check out the examples below and visit our interactive code sandbox.

šŸ“˜

GitHub code samples

āš”ļø Visit our Frontegg Samples repository in GitHub āš”ļø