How to log into Portal with JSAPI 4??

11-24-2020 08:18 PM
by Anonymous User
Not applicable

I'm trying to access my Portal items with JSAPI 4. 

The code works below, however when logging in I get a different login screen that what I am use to getting. This is preventing me to login with my Okta account. (see image)

 I registered the App in Portal and copied over the AppID. (see image)

We are using Auth2.0 






  <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>Query Portal Items</title>

  <link rel="stylesheet" href="">

  <script src=""></script>
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;

    .esri-item-gallery .esri-item-container {
      float: left;
      text-align: center;
      padding: 10px;
      width: 204px;

    .esri-item-gallery .esri-image {
      width: 200px;
      height: 133px;
      border: 2px solid gray;
      border-radius: 5px;

    .esri-item-gallery .esri-null-image {
      line-height: 133px;
      text-align: center;
      color: #999999;

    .esri-item-gallery .esri-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    .esri-item-gallery .esri-null-title {
      color: #999999;

    .action {
      color: blue;
      cursor: pointer;
      text-decoration: underline;

    ], function (Portal, OAuthInfo, esriId, PortalQueryParams,
      domStyle, domAttr, dom, on, arrayUtils) {
      var info = new OAuthInfo({
        // Swap this ID out with registered application ID
        appId: "XXXXXXXXXXX",
        // Uncomment the next line and update if using your own portal
         portalUrl: "",
        // Uncomment the next line to prevent the user's signed in state from being shared with other apps on the same domain with the same authNamespace value.
        // authNamespace: "portal_oauth_inline",
        popup: false

      esriId.checkSignInStatus(info.portalUrl + "/sharing").then(
        function () {
        function () {
          // Anonymous view
          domStyle.set("anonymousPanel", "display", "block");
          domStyle.set("personalizedPanel", "display", "none");

      on(dom.byId("sign-in"), "click", function () {
        // user will be redirected to OAuth Sign In page
        esriId.getCredential(info.portalUrl + "/sharing");

      on(dom.byId("sign-out"), "click", function () {

      function displayItems() {

        var portal = new Portal();
        // Setting authMode to immediate signs the user in once loaded
        portal.authMode = "immediate";
        // Once loaded, user is signed in
        portal.load().then(function () {
          // Create query parameters for the portal search
          var queryParams = new PortalQueryParams({
            query: "owner:" + portal.user.username,
            sortField: "numViews",
            sortOrder: "desc",
            num: 20

          domAttr.set("userId", "innerHTML", portal.user.username);
          domStyle.set("anonymousPanel", "display", "none");
          domStyle.set("personalizedPanel", "display", "block");

          // Query the items based on the queryParams created from portal above

      function createGallery(items) {
        var htmlFragment = "";

        arrayUtils.forEach(items.results, function (item) {
          htmlFragment += (
            "<div class=\"esri-item-container\">" +
            (item.thumbnailUrl ?
              "<div class=\"esri-image\" style=\"background-image:url(" +
              item.thumbnailUrl + ");\"></div>" :
              "<div class=\"esri-image esri-null-image\">Thumbnail not available</div>") +
            (item.title ?
              "<div class=\"esri-title\">" + (item.title || "") +
              "</div>" :
              "<div class=\"esri-title esri-null-title\">Title not available</div>") +
        dom.byId("itemGallery").innerHTML = htmlFragment;


  <div id="anonymousPanel" style="display: none; padding: 5px; text-align: center;">
    <span id="sign-in" class="action">Sign In</span> and view your ArcGIS Online items.

  <div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
    Welcome <span id="userId" style="font-weight: bold;"></span> &nbsp;-&nbsp;
    <span id="sign-out" class="action">Sign Out</span>

  <div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div>




0 Kudos
2 Replies
New Contributor II

Hi @Anonymous User ,

What is the authentication on your Portal for ArcGIS (ArcGIS Enterprise)?

On a side note, I troubleshooted with the following sample app using "ArcGIS Online" as the portal, and the OAuth workflow worked:



0 Kudos
by Anonymous User
Not applicable

Hey @KavishGhime3  thanks for the reply. 

I can get it to work with my AGOL account. We have both AGOL and Portal both use Auth2.0 we use Okta to login .

I can get the simple app to work with AGOL but not Portal. 

0 Kudos