Private shared webmap is not working in ReactJS App.

[TapanPatra1]

Hi All,

I am using npm @ArcGIS/core and version is 4.27.6 in my ReactJs Application (version 18).
I have an Esri developer account and created a webmap. I use the webmap id to display it in my React app.
If I publish the webmap as public, it works well in my react app, but, if I publish it as private (Owner) then not working.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-un-associations/
The above URL is a sample code by Esri, and the ID is private; it always asks for the username and password popup to access the items. When I use the Esri sample code ID in my ReactJs app, it asking me for a user id and password to login, if I provide the correct credentials then map elements appear correctly.

However, my developer account's private sharing webmap is not working in ReactJS app. Public Shared webmap id is working. (Plain html, css and javascript code also working).

Sharing here my ReactJS code, and please help me how to display my private webmap in my ReactJS app without login popup.

import React, { useEffect, useRef, useState } from "react";
import MapView from "@arcgis/core/views/MapView";
import MyMap from "@arcgis/core/WebMap";
import esriConfig from "@arcgis/core/config";
import "./map/Map.css";

function App() {
  const theMap = useRef(null);
  esriConfig.apiKey = "AAPK631c4105f38a407da4ee98fd2ea6a6a5xDYahTe5h9KOpsaHw4JfGhURXrMOgs_iq-a0V9Tn_CwjvL94Q8m87Y9CmivczPv8";

  useEffect(() => {
    const view = new MapView({
      map: new MyMap({
        basemap: 'arcgis-oceans',
        portalItem: {
          //id: "471eb0bf37074b1fbb972b1da70fb310"  // a private map id by esri sample code.
          id: "9d9dea828acb4e65aa95baa03f0e1270"  // private map id by me.
        },
      }),
      container: theMap.current,
    });
  }, []);

  return (
    <div>
      <h1>Esri JS SDK Maps</h1>
      <div className="theMap" ref={theMap}></div>
    </div>
  );
}



export default App;

Below are my private webmap

[ReneRubalcava · Accepted solution]

You will need to add some authentication to your application. In the documentation there is a section in the table of contents you can refer to.

https://developers.arcgis.com/javascript/latest/

The links in that dropdown

• ArcGIS Org Portals - https://developers.arcgis.com/javascript/latest/arcgis-organization-portals/
• Access Secure Resources - https://developers.arcgis.com/javascript/latest/secure-resources/
• Tutorial - https://developers.arcgis.com/javascript/latest/tutorials/implement-user-authentication/
• Sample - https://developers.arcgis.com/javascript/latest/sample-code/identity-oauth-basic/

[TapanPatra1]

Hi ReneRubalcava,

Thank you for your response; it helped me achieve authentication without a login popup.

---- 😀 ----

I have another feature scenario that I want to implement, but I'm not sure how to proceed. Could you please take a look and share your thoughts ?
How to add a onClick event on cluster image ?