Widget identifying when user logs in (Dev 1.1)

2531
10
Jump to solution
09-30-2020 08:30 AM
PhilLarkin1
Occasional Contributor III

How might a widget know that a user has successfully logged in? Is there a message I can listen for? Seems the message/action route isn't ready for this yet as the message list is short: https://developers.arcgis.com/experience-builder/api-reference/jimu-core/MessageType 

Is there some other built-in method for identifying a successful log in? I'm currently waiting for props.user to populate but this is problematic for several reasons. 

0 Kudos
1 Solution

Accepted Solutions
JunshanLiu
Occasional Contributor III

I have a test, the user is not updated after popup login, but the token is updated. So, can you check "this.props.token"?

The user prop should be updated after login, we'll try to fix it in next release.

View solution in original post

10 Replies
PhilLarkin1
Occasional Contributor III

Here is an example of why waiting for this.props has been an issue for me. The object is sometimes Null....which seems very odd.

import { AllWidgetProps, BaseWidget, jsx, React } from 'jimu-core';
import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";
import { IMConfig } from '../config';

export default class Widget extends BaseWidget<AllWidgetProps<IMConfig>, any> {
  constructor(props) {
     super(props);
   
     console.log(this.props) // This returns the props object. props.user is empty 
                             // as I would expect since the user has not logged in yet.

     this.state = {
        jimuMapView: null
     }
}
activeViewChangeHandler = (jmv: JimuMapView) => {
   if (jmv) {
      this.setState({
          jimuMapView: jmv
       })
   }
 };


// "is invoked immediately after updating occurs. This method is not called for the initial render. "
 // "Use this as an opportunity to operate on the DOM when the component has been updated."
 //https://reactjs.org/docs/react-component.html#componentdidupdate
componentDidUpdate(prevProps) {
   // console log will be updated after user logs in. 
   console.log(prevProps.user) // returns Null
    console.log(this.props.user) // returns Null
   if (this.props.user !== prevProps.user) {
        console.log(this.props.user)  // Condition not met
    }
}

render() {
   let mvc = <p>Please select a map.</p>;
       if (
          this.props.hasOwnProperty("useMapWidgetIds") &&
          this.props.useMapWidgetIds &&
          this.props.useMapWidgetIds.length === 1
       ) {
       mvc = (
          <JimuMapViewComponent
          useMapWidgetIds={this.props.useMapWidgetIds}
          onActiveViewChange={this.activeViewChangeHandler}
          />
          ); 
       };

 return (
   <div className="widget-demo jimu-widget m-2">
    {mvc}
   </div> 
    );
 }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
PhilLarkin1
Occasional Contributor III

It seems as if post-login props.user is not refreshed. This is problematic for widgets that are in a Widget Controller and are set to open by default. Since the widget is rendered before the login prompt is displayed it only has access to props rendered at that time. props.user is effectively worthless to a widget in this scenario.

Or, am I wrong? Is there a way I can force a refresh of props? 

Thanks for any help you can provide.

Gavin Rehkemper , David Martinez , Mingyang HanMingyang Han

0 Kudos
DavidMartinez
Esri Regular Contributor

Hey Phil,

You can use a global to check if there is a value for the user. For example, to see if there is a username available use getAppStore().getState().user.username;  getAppStore is part of jimu-core. 

David 

0 Kudos
PhilLarkin1
Occasional Contributor III

Hi David, 

Thanks for your reply. I gave getAppStore a try but encountered the same problem as when I tried to retrieve props as shown in the earlier comment. 


Here is a way you can validate my workflow:

  1. Add a secured map to your editor sample.
  2. In widget.tsx add this function, and call that function in return()

         

checkUserStatus() {
   let test = getAppStore().getState().user
   console.log(test)
} 
return (
{this.checkUserStatus()} )

   3. On the initial load of the app a user will be prompted to log in. After the map loads click on the widget, open up Dev Tools: Console will show null. 

   4. Load app again. Credentials are grabbed from the cache and both methods successfully return the user details.   

My wild hypothesis is that the framework is not updating props after credentials are verified. Really struggling to find a way to make this work for secured content. 

0 Kudos
DavidMartinez
Esri Regular Contributor

Hi Phil,

That makese sense because there are no globals yet since you haven't authenticated. What you can do is do something like this where you can detect the null value of the token before the login and then check if the token exists in the componentDidUpdate function. I will check with my team to see if we have some kind of prop for successful login. 

static mapExtraStateProps = (state: IMState, props: AllWidgetProps<IMConfig>): Props => {
if (!state.token) {
return{
userLog: state.token
};
};
componentDidUpdate(){
const {userLog} = this.props
if (userLog) {
do something
}else{
do something else`
}
}
0 Kudos
PhilLarkin1
Occasional Contributor III

Hi David, Thank you for your reply. 
I suppose if a fix doesn't come by next release I could give your suggestion a try. 

DavidMartinez
Esri Regular Contributor

Hi Phil,

We have this logged as an issue for us to fix user prop.

Cheers,

David

PhilLarkin1
Occasional Contributor III

Thanks David

0 Kudos
JunshanLiu
Occasional Contributor III

I have a test, the user is not updated after popup login, but the token is updated. So, can you check "this.props.token"?

The user prop should be updated after login, we'll try to fix it in next release.