Move hosted to embedded

The Get Started guide teaches you how to integrate Frontegg using hosted login.

This guide teaches you how to move your application from hosted to embedded login.

📘

Read about Embedded vs Hosted Login.

To move from hosted to embedded login, do the following:

• Change cookie policy
• Update Redirect URLs
• Integrate embedded login code into your application
• Toggle hosted login to off

STEP 1: Change Cookie Policy

Change cookie policy to none using the Frontegg API. You can use postman or any other api tool.

Call the update identity management configuration route.

Send the following payload in the POST body.

{
   cookieSameSite: NONE
}

📘

Learn how to get started with the Frontegg API and how to authenticate as a vendor.

STEP 2: Update Redirect URLs

Your application uses Redirect URLs for various features, like Email Templates, Social Logins, and SSO.

How you update the Redirect URLs depends upon whether you are using the {{LOGIN_URL}} template in your Redirect URLs.

Here is an example Email Templates using the {{LOGIN_URL}} template as the base URL.

If all of the Redirect URLs on Email Templates, Social Logins, and SSO use the {{LOGIN_URL}} template.

Change your Login URL to be the same as App URL.

📘

Go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Settings ➜ URLs to manage Login URL and App URL.

If the Redirect URLs on Email Templates, Social Logins, and SSO do NOT use the {{LOGIN_URL}} template.

Check the following to make sure the Redirect URLs use {{APP_URL}} as the base.

• Email Templates
• Social Logins
• SSO

Here is an example email template with the Redirect URL using {{APR_URL}} as its base.

STEP 3: Integrate Embedded

📘

If you already integrated your application with Frontegg

You just need to change option hostedLoginBox to false in your Frontegg wrapper.

Or follow the relevant guide to integrate embedded login into your code.

Angular

Integrate embedded login into an Angular application

est. 5 min

React

Integrate embedded login into a React application

est. 5 min

Vue

Integrate embedded login into a Vue application

est. 5 min

Next.js

Integrate embedded login into a Next.js application

est. 5 min

STEP 4: Turn Off Hosted

Go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Login Method.

Choose Embedded login.

🚧

Please complete the steps above before turning off hosted login. Otherwise, your users will no longer have access to the login/signup page.

🚧

You need to manually update the hosted login status for each environment separately.