Authenticate with an ArcGIS identity

Learn how to use ArcGIS API for Javascript to create an ArcGIS identity, also known as named user login.

If your application needs access to your users' secure content through the ArcGIS Platform or if you are distributing your app through ArcGIS Marketplace, you must implement authentication with an ArcGIS identity. This allows individual users with an ArcGIS Online or ArcGIS Enterprise account to authorize your app to use the content and services to which they have access; it also uses their credits for any paid premium content and services.

Prerequisites

You need an ArcGIS account to register a new application and obtain its client_id. See the register your application tutorial. If you do not have an ArcGIS account you can sign up for a free ArcGIS Developer account.

When registering your application you will need to configure a redirect URL that will point to the URL where you are hosting your application. Generally this will be a local web server such as http://localhost:8000.

Steps

Scaffold the HTML

In the HTML, add <button> and <pre> elements to allow the user to sign in, sign out, and to display user credentials.

Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Add modules

In the require statement, add the Portal, OAuthInfo, and IdenitityManager modules.

The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

Add line.Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Register credentials with Identity Manager

From the ArcGIS Developer dashboard, OAuth 2.0 tab, copy your application's client_id.

Create an OAuthInfo object and set the appId with the copied client_id before you register it with IdentityManager.

Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Once you have registered your client_id with IdentityManager the ArcGIS API for JavaScript will automatically prompt a user to authorize your application whenever it accesses a service that requires authentication. Create a sign in experience by accessing the users profiles with the Portal class.

Create a handleSignedIn function to be called when the user authorizes your application and then load the Portal. After the user provides authorization, obtain and display the fullName and username on the page.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Call the checkSignInStatus method against a service URL. If the user has provided credentials, call the handleSignedIn function.

checkSignInStatus can accept a URL for any service. The default ArcGIS Platform portal URL https://arcgis.com/sharing/rest/ is the easiest way to fully authenticate a user.

Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Handle sign out

Create a handleSignedOut function when a user's credentials are destroyed.

Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Append a catch statement to call the handleSignedOut function when the user signs out.

Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Add event listeners

Call the getCredential method when a user clicks the sign-in button.

Add line.Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Call the destroyCredentials method when a user clicks the sign-out button before reloading the page.

Add line.Add line.Add line.Add line.
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript Tutorials: Authenticate with an ArcGIS identity</title>

  </style>
  <link rel="stylesheet" href="%JS_API_CDN%esri/themes/light/main.css">
  <script src="%JS_API_CDN%"></script>

  <style>
    html,
    body {
      font-size: 150%;
      margin: 10vh 10vw;
    }
  </style>
  <script>

    require([

      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager"
    ], function (Portal, OAuthInfo, esriId) {

      const info = new OAuthInfo({
        appId: "YOUR-CLIENT-ID",
        popup: false // the default
      });
      esriId.registerOAuthInfos([info]);

      esriId
        .checkSignInStatus(info.portalUrl + "/sharing")
        .then(() => {
          handleSignedIn();
        })

        .catch(() => {
          handleSignedOut();

        });

      document.getElementById("sign-in").addEventListener("click", function () {
        esriId.getCredential(info.portalUrl + "/sharing");
      });

      document.getElementById("sign-out").addEventListener("click", function () {
        esriId.destroyCredentials();
        window.location.reload();
      });

      function handleSignedIn() {

        const portal = new Portal();
        portal.load().then(() => {
          const results = { name: portal.user.fullName, username: portal.user.username };
          document.getElementById("results").innerText = JSON.stringify(results, null, 2);
        });

      }

      function handleSignedOut() {
        document.getElementById("results").innerText = 'Signed Out'
      }

    });

  </script>
</head>

<body>

  <button id="sign-in" class="btn btn-primary">Sign In</button>
  <button id="sign-out" class="btn btn-primary">Sign Out</button>
  <pre><code id="results"></code></pre>

</body>


</html>

Run the App

You should now have an application that can check for credentials using OAuth 2.0.

PreviousAdd a vector tile layer Core conceptsMaps and views

ArcGIS API for JavaScript

Authenticate with an ArcGIS identity

Solution

Estimated time

Was this page helpful?

Solution

Estimated time

Was this page helpful?

Was this page helpful?

ArcGIS API for JavaScript

Authenticate with an ArcGIS identity

Prerequisites

Steps

Scaffold the HTML

Add modules

Register credentials with Identity Manager

Handle sign in

Handle sign out

Add event listeners

Run the App

Solution

Estimated time

Was this page helpful?

Solution

Estimated time

Was this page helpful?

Was this page helpful?