Esri / Esri/esri-react-boot

Problems accessing portal with auth

Open
#14 0 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.