How to manage user logins to ArcGIS Server with JavaScript API

BenRomlein

I have a website that uses the JavaScript API (3 transitioning to 4) to display data served by ArcGIS Server (10.7).

I want to secure all the ArcGIS Server services and require each user of my website to login with a unique user-name.

I want to customize the login prompt on the website to include more information and links to account creation/recovery options.

Is it possible to create this custom login prompt with tools built-in to ArcGIS Server or the JavaScript API? Or will I need to create my own login-form?

If I need to create my own form, how can I link it to ArcGIS Server to allow users to access the underlying secure services?

I've looked at the IdentityManager class, but I can't tell if that is what I need to implement what I'm thinking of and many of the examples use either ArcGIS Online or Portal, but I can't use either of those.

BenRomlein

So I have set up a page with my login inputs and map. On submit, username and password are sent to the generateToken endpoint. The token response is passed to ID Manager using the functions below:

function submitCreds(){
 var password = passwordInput.get("value");
 var email = emailInput.get("value");

 var requestHandle = esriRequest({
  "url": "arcgis/tokens/generatetoken",
  "handleAs": "json",
  "content": {
  f: "json",
  username: email,
  password: password,
 }},
 {usePost: true}
);

 requestHandle.then(requestSucceeded, requestFailed);
 }

function requestSucceeded(response, io){
 esri.id.registerToken({
 "expires": response['expires'],
 "server": "https://myserver/arcgis/rest",
 "ssl": true,
 "token": response['token'],
 "userId": emailInput.get("value")
 });
 domConstruct.place("<b>Login Successful!</b>", "login-
result", "last");
 }

Logging in through this form doesn't work to display my secure content and I'm still getting the default ArcGIS Server login dialog when the page loads.

How do I load the secure service after the token has been registered? Also, how can I prevent the default login dialog from appearing?

Thanks for your help!

EDIT: I'm looking at the output of

esri.id.findCredential("myServer/arcgis/rest/services", "myUser");

and the only differences between the output when I sign in with my form and with the default form are that when using the default login prompt, the resources array contains the specific secure layer my app will load (through my form, the array contains the server directory, myserver/arcgis/rest/services), and there are properties validity: 60 and _refreshTimer: 75 that are missing from the credential registered with my form. Do I need to scope the token registration to a specific layer or resource? Or is there another step I need to take to force the app to use the token when it makes the calls to add my secure layer?

EDIT2: Solved my problem. I didn't realize the token has to be registered before the layer object for the secure layer is created. Once I moved the code block that created the layer object, the default login stopped appearing and my login form worked as expected.