Hosting the front end separately & API Management

alastairtree · December 6, 2020, 11:15am

Hi, firstly thanks for squidex - it is a lovely app.

Having had a look through the code - am I right in understanding that it is not really possible to host the front end separately from the backend so that the front end could be hosted in a static hosting/CDN like S3/Azure Static WebApps, and then the back end could be a pure API, that could be fronted by an API management/orchestration layer, with CORS requests from front to back?

From looking at it the front/back end are very nicely segregated in source, but packaged together and so some minor issues with separate hosting I can spot are:

Would need to build/repackage from source as front end is not packaged as a separate zip/docker
Watch out for any CORS issues
The embedded Identity-Server hosts UI in MVC so that would be blocked/awkward in a pure API backend and might need to be bypassed/worked around
I could hack/reconfigure the Authentication system so that instead of using the embedded identity-server, the APIs should all trust JWTs issued by an external OIDC server with a public well-known discovery endpoint, and the UI would need hacking/config changes to obtain JWTs from the external token server rather than the embedded identity-server.

Is the above a reasonable summary? Anything else to worry about? Just trying to evaluate how I might host it, and if worth making the changes above to fit it into an existing landscape of APIs.

Thanks

Sebastian · December 6, 2020, 6:00pm

It should be possible.

Besides the build stuff you also have to configure the client properly:

In the backend:

github.com

Squidex/squidex/blob/master/backend/src/Squidex/Areas/IdentityServer/Config/LazyClientStore.cs#L151


    foreach (var client in CreateStaticClients(urlsOptions.Value, identityOptions.Value))
    {
        staticClients[client.ClientId] = client;
    }
}

private static IEnumerable<Client> CreateStaticClients(UrlsOptions urlsOptions, MyIdentityOptions identityOptions)
{
    var frontendId = Constants.FrontendClient;

    yield return new Client
    {
        ClientId = frontendId,
        ClientName = frontendId,
        RedirectUris = new List<string>
        {
            urlsOptions.BuildUrl("login;"),
            urlsOptions.BuildUrl("client-callback-silent", false),
            urlsOptions.BuildUrl("client-callback-popup", false)
        },
        PostLogoutRedirectUris = new List<string>

In the client:

github.com

Squidex/squidex/blob/master/frontend/app/shared/services/auth.service.ts#L83


    return;
}

Log.logger = console;

this.userManager = new UserManager({
               client_id: 'squidex-frontend',
                   scope: 'squidex-api openid profile email squidex-profile role permissions',
           response_type: 'id_token token',
            redirect_uri: apiUrl.buildUrl('login;'),
post_logout_redirect_uri: apiUrl.buildUrl('logout'),
     silent_redirect_uri: apiUrl.buildUrl('client-callback-silent'),
      popup_redirect_uri: apiUrl.buildUrl('client-callback-popup'),
               authority: apiUrl.buildUrl('identity-server/'),
               userStore: new WebStorageStateStore({ store: window.localStorage || window.sessionStorage }),
    automaticSilentRenew: true
});

this.userManager.events.addUserLoaded(user => {
    this.user$.next(new Profile(user));
});

At the moment it is using the same domain (from base url property), you have to make this configurable.

CORS is not a problem, because Squidex is exposed anyway to support other JavaScript clients.

For me it has very low priority but if you want to provide a PR, I am happy to merge that.

alastairtree · December 7, 2020, 1:16pm

Thank you for the helpful pointers. Will investigate a bit, and let you know if I decide to implement will send a PR.

We have to be pretty strict about CORS so would need to enable/configure that, but can do that at a frontend proxy so not a problem.