Login per account
Customizing the Login Box experience for each tenant gives you the opportunity to create a unique login page for your customers and separate them from a standard login box. By using login per account you are offering clients their own branding atop of yours.
Prerequisites
Prerequisites
@frontegg/react@5.0.33
@frontegg/angular@5.23.0
@frontegg/vue@2.0.29
@frontegg/js@6.87.0
Setup a custom login for account
When creating a customized login box to an account, you are creating a separate URL (login page) to this account, making sure Frontegg recognizes the account before a user logs in. Think of it as if you are creating a branch for a specific account.
The account parameter needs to be passed on the login box via one of these two options:
- sub-domain
- query parameter
// https://[account-name].[your_domain] tenantResolver: () => { organization = window.location.host.replace('.{your_domain}', '') return { tenant: organization } }
Next, add tenantResolver
in your contextOptions
const contextOptions = { baseUrl: "[YOUR_ENVIRONMENT_BASE_URL]", clientId: "[YOUR_ENVIRONMENT_CLIENT_ID]", tenantResolver, }
Create an account under your environment's Management menu, and under account's settings, click on customize.
Click "Start customizing" to get to the account-builder and start managing the login-box. This is where you can edit logo, style and brand it, choose social logins and more.
The sign-in page you’ll view on the mini builder is the state of your login configured in the main builder. Once you’ll add changes and will publish them, you will overwrite the global sign-in page only for this account.
Social logins
Social logins
If you enable social logins that are different than those that are configured globally, make sure you configure them on the relevant environment in the social logins section.
Publish the changes and set-up your account's URLs and alias.
YOUR_DOMAIN
- Is either your Frontegg domain, or your custom domain that you configured for that environment.Login URL
- This is your account’s unique login URL.App URL
- add your app URL, this is where your users will be redirected to after the sign in.Alias
- The alias is the identifier of your account it should match exactly the {account_name} mentioned in the points above.
Login method | Query param | Subdomain |
---|---|---|
Hosted | [YOUR_DOMAIN].com/oauth?organization=[ACCOUNT-ALIAS] | Same as query param |
Embedded | [YOUR_DOMAIN].com/?organization=[ACCOUNT-ALIAS] | [ACCOUNT-ALIAS].[YOUR-DOMAIN].com |
Save and toggle on the **Go live** to publish the login page.
Deactivating the custom login box
You can also decide to turn off the Go live button, this action will in return accept the users credentials in the main login box. Make sure you update the account for this change.
Adding account logo to emails
If you’d like to brand the whole login flow, you’d probably want to replace the logo to the account’s logo in the emails too. In order to do that you need to edit each email template and add this;
{{#if tenant.logoUrl}} <img height="24px" src="{{tenant.logoUrl}}" /> {{else}} <img height="24px" src="https://picsum.photos/200/300" /> {{/if}}
Security limitations
- Switching between accounts - Users that are assigned to multiple accounts would have to re-login to an account with a unique customized login page.
- Manage MFA - the MFA requirements are based on the strictest decision - whether it is your decision or your account’s.
- When enabling Custom Login Box, you are actually creating a separate workspace to the account’s users, hence eliminating the multi-tenancy aspect and allowing it’s own MFA requirements.
- Sign-up to a specific account is not available at the moment for account with custom login box. Therefore, we removed the option to add add the "Sign up" link from the mini-builder. In addition, the account’s users will be allowed to add others only by sending an invite.
Login Box inheritance in hierarchies
For accounts that manage sub-accounts (Learn more about sub-account management here), whenever a customized login box is enabled, users who are members of any of those sub-accounts will be able to log in to their account using the customized login box of their parent tenant, i.e., the customized login box configuration is inherited by the sub-accounts. Note that further customization of each sub-account is still possible, but this baseline option allows for a speedy and scalable solution.
Self-service configurations
End users can adjust their login box style; upload logo, change the box primary color, and change the position of their social logins, directly from the self-service portal. This functionality is enabled automatically for users with Account Settings Permissions.