On page editing with CMS 11 with decoupled front-end / headless

I am trying to configure on page editing with CMS 11 v11.20.5.0

So far my configuration looks like this -

  var routingOptions = context.Locate.Advanced.GetInstance<RoutingOptions>();
  routingOptions.UseTrailingSlash = false;
  routingOptions.ConfigureForExternalTemplates();
 context.Services.Configure<ExternalApplicationOptions>(options => options.OptimizeForDelivery = true);

This sets up the front-end URL as primary host and outgoing URL while the backend URL is set to Edit. 

The issue I am experiencing now, is that it is loading an iframe with front-end URL in shell/preview window which looks like this - 

http://localhost:3000/EPiServer/CMS/Content/en/brands/123,,2489?epieditmode=True

Which is 404 as this is trying to fetch content outside of it's boundaries. Note that front-end is proxying backend so the URL ultimately calls backend URL in the background, something like this -

http://localhost.backend/EPiServer/CMS/Content/en/brands/123,,2489?epieditmode=True

However, backend URL works in the same browser session if I am logged in. As soon as I am logged out it shows login screen. 

So in a nutshell, how can I allow front-end to impersonate as a user and fetch the content through backend URL or episerver? Is there any way of solving it? Thanks for helping out.