IdentityServer4 move login UI on the client - model-view-controller

Question

I am implementing IdentityServer4 with variety of clients, One of the clients is a Javascript application, I have implemented the implicit flow for authentication and everything is working fine.
On my Javascript application , I have a button to login, once I click on the button I am redirected to IdentityServer and after successful login I am redirected back to my application along with my access token.
Now what I want to do is, move the login to the client side so that each application can have its own login UI (with its own theme).
app.js
function log() {
document.getElementById('results').innerText = "";
Array.prototype.forEach.call(arguments, function (msg) {
if (msg instanceof Error) {
msg = "Error:" + msg.message;
}
else if (typeof msg !== 'string') {
msg = JSON.stringify(msg, null, 2);
}
document.getElementById('results').innerHTML += msg + "\r\n";
});
}
document.getElementById("login").addEventListener('click', login, false);
document.getElementById('api').addEventListener('click', api, false);
document.getElementById("logout").addEventListener("click", logout, false);
//configure client
var config = {
authority: "http://localhost:5000",
client_id: "js",
redirect_uri: "http://localhost:5004/callback.html",
response_type: "id_token token",
scope: "openid profile api1 role",
post_logout_redirect_uri: "http://localhost:5004/index.html"
};
//init user manager
var mgr = new Oidc.UserManager(config);
//check if user is logged in already
mgr.getUser().then(function (user) {
if (user) {
log("User logged in", user.profile);
} else {
log("User is not logged in.");
}
});
function login() {
mgr.signinRedirect();
}
function api() {
mgr.getUser().then(function (user) {
var url = "http://localhost:5001/identity/getfree";
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function () {
log(xhr.status, JSON.parse(xhr.responseText));
};
xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
xhr.send();
});
}
function logout() {
mgr.signoutRedirect();
}
IdentityServer StartUp.cs
public void ConfigureServices(IServiceCollection services)
{
// Add framework services.
var connectionString = "Server=localhost;port=3306;database=netcore;uid=root;Password=Liverpool1";
services.AddApplicationInsightsTelemetry(Configuration);
services.AddDbContext<ApplicationDbContext>(options => options.UseMySQL(connectionString));
services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddDefaultTokenProviders();
services.AddMvc();
// Add application services.
services.AddTransient<IEmailSender, AuthMessageSender>();
services.AddTransient<ISmsSender, AuthMessageSender>();
services.AddIdentityServer()
.AddTemporarySigningCredential()
.AddInMemoryScopes(Config.GetScopes())
.AddInMemoryClients(Config.GetClients())
// .AddConfigurationStore(builder => builder.UseMySQL(connectionString))
//.AddOperationalStore(builder => builder.UseMySQL(connectionString))
.AddAspNetIdentity<ApplicationUser>();
}

Answer 1

This is not possible and breaks the whole point of implicit flow and all the other federated sign on flows. The whole point of implicit flow is that you do not pass user credentials through the client but rather it goes to the identity provider.
You have two options:
Finding out a way to serve up different logins per "tenant" in
ASP.NET Core.
Use Resource Owner flow and pass the user credentials
through the client.
Option 1 is probably the best but requires more work, option 2 is a cop out and using RO flow is an anti-pattern.