Environment settings
/
Hosted vs embedded
Last updated

Hosted vs embedded implementation

Integrate Frontegg into your application using either embedded components or a fully hosted login page—both powered by Frontegg. Each option offers a customizable, pre-built user interface that fits seamlessly into your app’s experience. Out of the box, they support a wide range of authentication flows—including social logins (e.g., Google, GitHub), SSO (SAML, OIDC), and passwordless methods such as passkeys and magic links—enabling you to deliver secure, modern authentication with minimal effort.

  • Hosted login: Frontegg hosts and renders the login UI at a dedicated URL. This approach enables using Frontegg as an Identity Provider (IdP) with minimal client-side setup.
  • Embedded login: You render the login component inside your application and handle the OAuth2 flow via Frontegg's client SDKs.

Hosted login is enabled by default. You can change this under [ENVIRONMENT] → Authentication → Login method.

Hosted login overview

When hosted login is enabled, your login page is available at:

https://[frontegg-domain]/oauth/account/login?

Frontegg's client-side SDKs initiate the OAuth2 flow by redirecting users to this page or to the application using the loginWithRedirect method, depending on the user's authentication status.

For full implementation details, see the React hosted login guide. Guides for other frameworks are available in the SDKs section.

Switching to embedded login

If you're switching from a hosted integration to embedded mode, keep in mind that the methods for handling user login and state differ between the two implementations. Be sure to follow the embedded login guide for your specific framework to ensure proper setup.

To switch from hosted to embedded:

  1. Go to [ENVIRONMENT] → Authentication → Login method.

hosted-embedded


  1. Switch to embedded login methods. Follow the React embedded login guide to implement embedded login using React or see the SDKs section for other frameworks.
  2. Set hostedLoginBox:false and save the changes.

Updating login URLs

Applications in your environment utilize the Login URL and App URL fields as variables across various environment settings, including Email Templates, Allowed Origins, and Hosted Login Redirects, Social login redirects and SSO (SP) redirects. These settings automatically reference the values configured for each application's Login URL and App URL.


hosted-embedded

Normally when an application uses a hosted login the fields will look as below:

  • Login URL - https://[frontegg-or-custom-domain]/oauth
  • App URL - https://[your-application-url], i.e https://acme.com

when an application uses an embedded login the fields will look as below:


  • Login URL - https://[your-application-url], i.e https://acme.com
  • App URL - https://[your-application-url], i.e https://acme.com

When switching between hosted and embedded login, update your environment's Login URL and App URL settings accordingly.