topic Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ? in ArcGIS JavaScript Maps SDK Questions

ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

Anonymous User — Wed, 04 Mar 2020 23:48:24 GMT

Hi, I've asked a similar question before, and also resolved it myself here:
ESRI JS API: IdentityManager: how to use localStorage

This was for the scenario, where I've used the popup: true for the OAuth2.0 authentication.

However, I'm now in the scenario where I have to use redirect to the agol's/portal's oAuth page insteas of a popup, so I have to use the popup: false.

This seem to work fine, but the problem is that user has to approve the access each time he opens the app, because the oath state is stored in session-storage in esriJSAPIOauth property, instead of local-storage. I guess this all happens as there is no presence of any 'Keep Me Signed In' or similar checkbox for the enterprise login oAuth page.

Does anyone know how can I force the IdentityManager to store the redirected oauth state into the session-storage ?

Thank you.

ESRI JS API: 4.14
AGOL/PORTAL SECURITY: Enterprise logins

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

Anonymous User — Sat, 11 Dec 2021 22:11:13 GMT

So as I've learned from the ESRI support this is not possible to do the enterprise logins. So time for hacking again....

If anyone is interested, I've ended up copying the session storage entry that IdentityManager genarates into the local storage after each login. This handles also agol/any portal.

It's not the neatest piece of code but serves the purpose.

changeOAuthStorage() {
  // REMOVE ANY ESRIJSAPIOAUTH entries in the session or local storages
  const key = 'esriJSAPIOAuth';
  if (window && window.sessionStorage) {
    const oauth = window.sessionStorage.getItem(key);
    if (!oauth) {
      return;
    }
    const oauthObj = JSON.parse(oauth);
    if (window.localStorage) {
      const localStorageoAuths =  window.localStorage.getItem(key);
      if (!localStorageoAuths) {
        window.localStorage.setItem(key, JSON.stringify(oauthObj));
        window.sessionStorage.removeItem(key);
        return;
      }
      const lsAuth = JSON.parse(localStorageoAuths);
      lsAuth['/'] = {...lsAuth['/'], ...oauthObj['/']};
      window.localStorage.setItem(key, JSON.stringify(lsAuth));
      window.sessionStorage.removeItem(key);
    }
  }
}

I've also noticed that IdentityManager 3.x has different inner workings to 4.x as it's not storing any serialized state into session nor the local storage. Has the capability of restoring the state even if accessing the internal portal externally via azure application proxy. 4.x cannot handle it.

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

Ranga_Tolapi — Sun, 29 Nov 2020 17:21:30 GMT

Wow..! Very impressive..! 👏

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

RichardK — Wed, 07 Apr 2021 09:52:18 GMT

I only have one word for this. Awesome.

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

HarshvardhanSwami-Provista — Wed, 11 Aug 2021 03:41:27 GMT

Hi @Anonymous User ,

Greetings!

I hope you are doing well. I must have to say this solution is great and, I have a question, can we implement this for ArcGIS Online (if yes, then where can we put this code). I am asking this because I am implementing this with ArcGIS web app builder custom application and AGOL in the backend.

Any assistance you can provide would be greatly appreciated.

Thank you,

Harsh

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

Anonymous User — Wed, 11 Aug 2021 05:22:56 GMT

Hi Harsh, well that I don't know. never worked with the webapp builder so not sure to what extent you can control the oauth process, tbh I don't think it's possible as the core of the application that runs your web application builder code handles all the oauth communication. Sorry

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

luckachi — Wed, 17 Nov 2021 19:15:44 GMT

Michal, I am looking to implement this in a pure ArcGIS JS page but I am unsure where this is supposed to go. I receive an error message that reads

Uncaught SyntaxError: Unexpected token '{'

Should this be part of a function?

What I am trying to do is, I have a link in the feature popup within my web app that opens up an external page that shows just the desired feature and the attributes, what I'd like is for the log in information to persist to that page so users do not have to log in again or click allow for "Request for Permission" everytime they click on a link.

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

Anonymous User — Wed, 17 Nov 2021 19:49:43 GMT

Hi, that's bit unusual to login and query for data on one page, and then
from popup open new page where you query rest service again.

If you already have the token, just pass it in the queryparams to a new
page and use it for your queries on the new page..

You are not providing enough details about the error, but perhaps you are
not formatting the response as JSON or the JSON has an invalid structure?
Hard to say

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

luckachi — Wed, 17 Nov 2021 19:59:54 GMT

Sorry I was not very clear. I have a web mapping application (not JS, AGO) that is not public due to the nature of the information collected. The link within the popup opens a page that sits within our website structure that only displays the selected feature (the feature in which you viewed the popup for and clicked the link) and the attributes. This is so users can print it for annual reporting.

That must be, I was not aware this involved JSON. Right now I just have this, which worked to get rid of the full log in and just requires you to click Allow but I would like this page to know whether or not the user is already logged in to AGO and not ask anything prior to the page loading.

var appURL = "our URL", appURLSharing = appURL + "/sharing"; let info = new OAuthInfo({ appId: "our app ID", popup: false, preserveUrlHash: true }); esriId.registerOAuthInfos([info]);

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

fdeters — Mon, 16 Dec 2024 18:18:55 GMT

EDIT: The original method ended up not working in some cases. If the user refreshed the page at any point, it would log them out.

As it turns out, there is a supported but not well-documented way to do this in the API using the IdentityManager's toJSON() and initialize() methods. My approach (which appears to work just fine) is this:

1. Any time the IdentityManager object might be updated (e.g. when a user logs in or out), store its state in localStorage:

import esriId from '@arcgis/core/identity/IdentityManager' const jsonId = esriId.toJSON(); window.localStorage.setItem( 'my-app:identity-manager', JSON.stringify(jsonID) );

2. Whenever your application loads/initializes, grab the IdentityManager state from localStorage:

const jsonId = JSON.parse( window.localStorage.getItem('my-app:identity-manager') ); if (jsonId) { esriId.initialize(jsonId); }

---

ORIGINAL REPLY:

This was a lifesaver, even a few years down the road. Thanks! Here's my implementation. I just streamlined things a bit and took out the part where we delete the sessionStorage entry (that was causing issues for me).

[EDIT WARNING: Read note at the top of this reply. This method does not work.]

changeOAuthStorage() { if (!window?.sessionStorage || !window?.localStorage) return; const key = 'esriJSAPIOAuth'; const sessionOAuthString = window.sessionStorage.getItem(key); if (!sessionOAuthString) return; const localOAuthString = window.localStorage.getItem(key); if (!localOAuthString) { window.localStorage.setItem(key, sessionOAuthString); } else { const sessionOAuthObj = JSON.parse(sessionOAuthString); const localOAuthObj = JSON.parse(localOAuthString); // copy the new session obj over the localstorage entry but keep any // properties that aren't in the new session obj localOAuthObj['/'] = { ...localOAuthObj['/'], ...sessionOAuthObj['/']}; window.localStorage.setItem(key, JSON.stringify(localOAuthObj)); } };

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

LucVanDijk — Tue, 03 Jun 2025 14:53:40 GMT

Hi @fdeters ,
This solution seems like exactly what I need. Could you please explain where I should implement this code? I want to apply this solution to my web app which is built using ArcGIS Experience Builder Developer Edition.
Cheers,
Luc

Re: ESRI JS API: IdentityManager: Store the oauth state in local-storage ?

fdeters — Wed, 04 Jun 2025 21:47:43 GMT

Hi @LucVanDijk! Unfortunately, I am not familiar with Experience Builder Developer Edition. My recommendation is to search the Experience Builder Developer Edition documentation (the documentation page for jimu/core/State might be a good place to start).

Ultimately, you want to make sure that:

Whenever the user's login status changes, the IdentityManager is saved in LocalStorage.
The app looks for IdentityManager data stored in LocalStorage before redirecting the user to the login flow.

Because of my lack of Experience Builder Developer Edition knowledge, I'm not sure either of those things are possible. Good luck! I'd be interested to know if you find a solution.