Problems accessing portal with auth
- Dominant language
- JavaScript
- Stars
- 46
- Forks
- 27
- PR merge metrics
- No merged PRs in 30d
Description
I'm working on a web app that uses a single sign on event in order to allow access to multiple ArcGIS portal items. The general workflow I'm going for is this:
1. User signs into portal specified in config.json file
2. Once signed in, authorization info is sent to Redux and stored in "auth" (boilerplate)
3. An authorization token is pulled from Redux (auth.token) and sent to [IdentityManager](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) to access a portal item without having to sign in again
I'm running into problems with the third step. For some reason, when I include step 3 and try to use the initial login to the app, I get the following error:
`SyntaxError: JSON Parse error: Unexpected identifier ""`
_(Where CLIENT ID is the clientID specified in the config.json file)_
I'm using the boilerplate code, except I've adapted it slightly to utilize the Javascript 4.18 modules to be more Reactive. I've included my code for Map.js below.
Any guidance on the best workflow to utilize the initial portal sign in to access portal items without a second login?
Map.js:
```
import React, { useRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useSelector } from 'react-redux';
import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';
import IdentityManager from '@arcgis/core/identity/IdentityManager';
import MapContext from 'context/MapContext';
const MapContainer = styled.div(({ style, theme }) => ({
width: '100%',
height: '100%',
color: theme.lightGrey1,
...style
}));
const Map = ({ children, mapConfig, clientId }) => {
const mapDiv = useRef(null);
const auth = useSelector(state => state.auth);
const [viewObj, setView] = useState(null);
const [mapObj, setMap] = useState(null);
useEffect(() => {
if (auth.token) {
const portalItem = {
id: ,
portal: {
portalUrl: ,
authMode: 'immediate'
}
};
IdentityManager.registerToken(auth.token);
const map = new WebMap({ ...mapConfig, portalItem });
if (mapDiv.current) {
const view = new MapView({
map,
container: mapDiv.current,
ui: {
components: ['zoom']
}
});
setView(view);
setMap(map);
}
}
}, [auth]);
return (
{children}
);
};
Map.defaultProps = {
children: null,
mapConfig: {},
clientId: ''
};
Map.propTypes = {
children: PropTypes.any,
mapConfig: PropTypes.object,
clientId: PropTypes.string
};
export default Map;
```
Alternatively, I've been able to get the following workflow to work, but it's not ideal:
1. Remove portalUrl from config.json
2. Use [OAuthInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-OAuthInfo.html) and [IdentityManager.registerOAuthInfos()](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html#registerOAuthInfos)
The problem with this approach is that you don't have a global login accessible in Redux
Contributor guide
Assessment
This issue has not been assessed yet.