Sign in with user authentication (server)

ArcGIS REST JS provides helper methods for the Node.js server environment to handle authentication in your applications. In this tutorial, you use an OAuth2.0 server-enabled workflow. With server-side authentication, you can use the refresh token generated from the session and stored on your server environment to get a short-lived access token for the user.

Prerequisites

Steps

Create OAuth 2.0 credentials

Create a new OAuth credential to register the application.

1. Go to the Create OAuth credentials for user authentication tutorial to create an OAuth credential. Set the redirect URL to https://<YOUR_SERVER>[:YOUR_PORT]/authenticate, for example https://localhost:3000/authenticate.
2. Copy the Client ID and Redirect URL from your OAuth credentials item and paste them to a safe location. They will be used in a later step.

Create a new app

1. Open a terminal and create a new folder for your project.

   Use dark colors for code blocksCopy

   1
   2
   mkdir sign-in-with-user-authentication-server
   cd sign-in-with-user-authentication-server

2. Initialize a new Node.js project. This creates a package.json file.

   Use dark colors for code blocksCopy

   1
   npm init

3. Install the required packages.

   Use dark colors for code blocksCopy

   1
   npm install @esri/arcgis-rest-request express --save

4. Create a new JavaScript file named index.js.

   Use dark colors for code blocksCopy

   1
   touch index.js

Set up a configuration file

1. Create a config.json file. Set the clientId and redirectUri to the values you configured in your OAuth credentials.

   config.json

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   {
     "clientId": "YOUR_CLIENT_ID",
     "redirectUri": "YOUR_REDIRECT_URI",
     "portal": "https://www.arcgis.com/sharing/rest"
   }

Import modules

1. In the index.js file created earlier, import the following modules.

   index.js

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   
   import express from "express";
   import fs from "fs";
   import path from "path";
   import { ArcGISIdentityManager } from "@esri/arcgis-rest-request";
   

2. Create an instance of express and a credentials object to set the clientId, redirectUri, and portal.

   index.js

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   
   import express from "express";
   import fs from "fs";
   import path from "path";
   import { ArcGISIdentityManager } from "@esri/arcgis-rest-request";
   
   const configPath = path.resolve("./config.json");
   const config = JSON.parse(fs.readFileSync(configPath, "utf8"));
   const { clientId, redirectUri, portal } = config;
   
   const app = express();
   const credentials = {
     clientId,
     redirectUri,
     portal // OPTIONAL - For ArcGIS Enterprise only
   };
   
   

Get user session

Redirect the user to ArcGIS sign in page using your app credentials, then exchange the returned authorization code for a user session.

1. When the user visits /authorize, call the authorize method with your app’s OAuth 2.0 credentials and the response object. This will redirect the user to ArcGIS to sign in with their ArcGIS account.

   index.js

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   // Send the user to the authorization screen
   app.get("/authorize", function (req, res) {
     ArcGISIdentityManager.authorize(credentials, res);
   });
   
   

2. After the user signs in, ArcGIS redirects back to /authenticate with an authorization code. Use exchangeAuthorizationCode with your app credentials and the code to create a user session. You can log the session details to the console and send a confirmation message to the browser.

   index.js

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   // Send the user to the authorization screen
   app.get("/authorize", function (req, res) {
     ArcGISIdentityManager.authorize(credentials, res);
   });
   
   // After authorizing, the user is redirected to /authenticate
   app.get("/authenticate", function (req, res) {
     if (credentials) {
       // The user will be redirected with an authorization code we will need to exchange for tokens
       ArcGISIdentityManager.exchangeAuthorizationCode(credentials, req.query.code)
         .then((session) => {
           res.status(200).send(
             "Session successfully acquired. Check your server console to see session details."
           );
   
           console.log(session);
         })
         .catch((err) => {
           console.error("Error:", err);
           res.status(500).send(err.message);
         });
     } else {
       res.send("Please visit http://localhost:3000/authorize");
     }
   });
   
   

3. Call listen and log a message to tell the user to navigate to http://localhost:3000/.

   index.js

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   app.listen(3000, function () {
     console.log("Visit http://localhost:3000/authorize to test the application!");
   });

4. Save the file, then run it from the terminal.

   Use dark colors for code blocksCopy

   1
   node index.js

5. Open the URL shown in your terminal (e.g., https://localhost:3000/authorize) and sign in with an ArcGIS account. After a successful login, the session details will be printed in the server console.

   Trouble signing in?

   If you are unable to sign in, make sure you have the correct redirect URL and port. This URL varies based on your application and typically takes the format of https://<server>[:port]/callback.html or http://my-arcgis-app:/auth. For example, if you are running an application on http://127.0.0.1:5500/, set http://127.0.0.1:5500/callback.html as your redirect URL in the index.html and callback.html file and your developer credential. They all have to match!

What's next?