Implement user authentication | ArcGIS Maps SDK for JavaScript

Learn how to use ArcGIS Maps SDK for Javascript to implement user authentication .

If your application needs access to your users’ secure content through ArcGIS or if you are distributing your app through ArcGIS Marketplace, you must implement user authentication. 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 Location Platform 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

Create a new pen

Go to CodePen to create a new pen for your mapping application.

Add the HTML

In CodePen > HTML, add HTML and CSS to create a page with <button> and <pre> elements to allow the user to sign in, sign out, and to display user credentials.

2 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


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

  </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>

Reference the API

In the <head> tag, add references to the CSS file and JS library.

4 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

  </head>
9 collapsed lines

  <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 a new <script> at the bottom of the <body>, use $arcgis.import to add the Portal, OAuthInfo, and IdentityManager modules.

The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

21 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">

      const [Portal, OAuthInfo, identityManager] = await $arcgis.import([
        "@arcgis/core/portal/Portal.js",
        "@arcgis/core/identity/OAuthInfo.js",
        "@arcgis/core/identity/IdentityManager.js",
      ]);


    </script>
11 collapsed lines

  </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

Go to the OAuth credentials item page and copy the Client ID.

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

23 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">

      const [Portal, OAuthInfo, identityManager] = await $arcgis.import([
        "@arcgis/core/portal/Portal.js",
        "@arcgis/core/identity/OAuthInfo.js",
        "@arcgis/core/identity/IdentityManager.js",
      ]);


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

    </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 Maps SDK 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.

30 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">

      const [Portal, OAuthInfo, identityManager] = await $arcgis.import([
        "@arcgis/core/portal/Portal.js",
        "@arcgis/core/identity/OAuthInfo.js",
        "@arcgis/core/identity/IdentityManager.js",
      ]);


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

      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);
        });

      }

12 collapsed lines
    </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 portal URL https://arcgis.com/sharing/rest/ is the easiest way to fully authenticate a user.
30 collapsed lines <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title> <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />  <script type="module" src="https://js.arcgis.com/5.0/"></script> <style> html, body { font-size: 150%; margin: 10vh 10vw; } </style> <script type="module"> const [Portal, OAuthInfo, identityManager] = await $arcgis.import([ "@arcgis/core/portal/Portal.js", "@arcgis/core/identity/OAuthInfo.js", "@arcgis/core/identity/IdentityManager.js", ]); const info = new OAuthInfo({ appId: "YOUR-CLIENT-ID", popup: false, // the default }); identityManager.registerOAuthInfos([info]); identityManager .checkSignInStatus(info.portalUrl + "/sharing") .then(() => { handleSignedIn(); }) 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); }); } 12 collapsed lines </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.

42 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">

      const [Portal, OAuthInfo, identityManager] = await $arcgis.import([
        "@arcgis/core/portal/Portal.js",
        "@arcgis/core/identity/OAuthInfo.js",
        "@arcgis/core/identity/IdentityManager.js",
      ]);


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

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

      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";
      }
13 collapsed lines

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

36 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">

      const [Portal, OAuthInfo, identityManager] = await $arcgis.import([
        "@arcgis/core/portal/Portal.js",
        "@arcgis/core/identity/OAuthInfo.js",
        "@arcgis/core/identity/IdentityManager.js",
      ]);


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

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

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

        });
27 collapsed lines

      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.

42 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">

      const [Portal, OAuthInfo, identityManager] = await $arcgis.import([
        "@arcgis/core/portal/Portal.js",
        "@arcgis/core/identity/OAuthInfo.js",
        "@arcgis/core/identity/IdentityManager.js",
      ]);


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

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

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

        });

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

26 collapsed lines
      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.

42 collapsed lines
<!doctype html>

<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title>


    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

    <script type="module">

      const [Portal, OAuthInfo, identityManager] = await $arcgis.import([
        "@arcgis/core/portal/Portal.js",
        "@arcgis/core/identity/OAuthInfo.js",
        "@arcgis/core/identity/IdentityManager.js",
      ]);


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

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

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

        });

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

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

      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.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials: