Last updated

Getting started with multi-apps

As your business grows, you may need to manage multiple applications or integrate with third-party apps while controlling user access. Frontegg makes this easy by allowing users to access multiple applications with a single set of credentials and a unified login experience.

Frontegg's multi-app feature streamlines app management, offering users a seamless experience by enabling access to multiple applications through one login box. You can effortlessly assign or remove applications for users directly from the management portal.


As the vendor, you can manage accounts for each environment according to your business needs, assigning specific applications to each account and its users.

Create and configure

Prerequisites

Note that the following versions are required to use the feature:

@frontegg/react@6.0.35
@frontegg/angular@6.24.0
@frontegg/vue@3.0.25
@frontegg/nextjs@6.7.18
@frontegg/js@6.189.0


This guide will walk you through the process of creating multiple applications and adjusting their settings. The first Frontegg Sample app is generated by default. To add more applications to your account, you can do so via the [ENVIRONMENT] → Applications tab. Click the Create new button to add a new application.


multi-apps-overview-1


The button will open a drawer for you to fill in the relevant information to set up your new application. App Name, Description, Type, Stack, and URL are all required. Once you are done, click Create.


multi-apps-overview-2


After creating your app, you will be redirected to that single app view where you can manage your app settings and integrate it with your environment.


Multi-apps in different environments

Note that applications are not copied automatically to additional environments — each environment is treated as a separate entity, so you will need to create applications on each environment separately.


App settings tab

In this section, you can configure actions relevant to your app's functionality, such as Auto-assign app, make it a Default app, and also perform further actions like Delete app. Note that the status of your app (Active, Not Integrated, etc.) will be displayed at the top of the page.


multi-apps-overview-3

App URL & login URL

  • App URL - This is the application URL to which users are redirected after authentication. It's also used as a variable for redirects across the environment (allowed origins, redirect URLs and email templates).

  • Login URL - This URL will be used for hosted or embedded login pages. For hosted login, ensure it ends with /oauth. For embedded login, it would ypically matche the App URL. It's also used as a variable for redirects across the environment. (allowed origins, redirect URLs and email templates)


multi-apps-overview-4

Customizing your app settings

Via your app Settings tab, you can control and adjust the following:

Default app: When using multiple applications, you can indicate which login option will be defined as your users' default login — if they haven't opted to login via a specific app.

Auto-assigned app: Accounts and users will be automatically assigned an app if its auto-assigned option is toggled on. Users and accounts will not be able to control this setting.

Inactive mode: This option will make the app unavailable for user access. For apps that have already been integrated, you can switch between Inactive/Active modes interchangeably.

Delete application: this option will delete that application from your application list. This action is irreversible.

App integration tab

To make your app active, you must proceed with integrating it via the Integration tab.

Note that for multiple applications, you will need to include the following contextOptions to your code:

contextOptions={{
    baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com', //or custom domain
    clientId: '[YOUR_CLIENT_ID]',
    appId: '[YOUR_APP_ID]' 
}}

Users & accounts management

For details on how to manage users and accounts and their assignments to different applications, see the dedicated sections: