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.

[ReneRubalcava]

This sort of depends on the type of authentication you want to use.

https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/

Ideally, if you are using Portal, you can use the oauth token generation https://developers.arcgis.com/rest/users-groups-and-items/token.htm

Your users can login to an initial user page of your own with a portal login and you can display custom data there.

If you want to work directly with the service level authentication, here is documentation on generating tokens for server services https://developers.arcgis.com/rest/services-reference/generate-token.htm

Regardless of how you get the token, you can use the registerToken() method of the IdentityManager to add the token to be used in your JSAPI applications. Take note in addition to the token and expires values, you need to add the server URL so the JSAPI knows which services will use the token.

https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html#reg...

That method is the same in 3x and 4x.

[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.