When my app fires up it runs AsyncStorage.getItem(‘authToken’).then(…) to try to revive the users’ session rather than re-authenticating the user. console logging shows things running right up to that point, but never returns to execute the .then(…) code. The app never loads up and eventually the app closes and I am returned to the Expo app launcher screen. My app works fine when I am debugging remotely in Chrome, but when I disable remote debugging, this behavior happens.
Any ideas what might be different in non-remote-debug vs. debug mode?
Here is my code:
class AppContainer extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
}
}
componentWillMount() {
console.log("Restoring Auth Token")
this.restoreAuthToken()
}
restoreAuthToken = () => {
console.log('check for authToken');
try {
AsyncStorage.getItem('authToken').then((authToken) => {
console.log('validating authToken');
if (authToken != null) {
console.log('authToken found');
console.log(this.props)
this.props.dispatch(this.props.setAuthToken(authToken));
this.props.dispatch(this.props.setAuthStatus(true));
}
else {
console.log('authToken not found');
}
this.setState({isLoading: false});
});
}
catch(error){
console.log(error);
}
}
render() {
// console.log(this)
// Wait for the restoreAuthToken to finish.
if (this.state.isLoading) {
console.log('Waiting...')
return <Expo.AppLoading />
}
const { navigationState, dispatch } = this.props
BackHandler.addEventListener('hardwareBackPress', this.backAction)
if (this.props.isAuthenticated) {
console.log('Calling AppNavigator');
return <AppNavigator
ref={(ref) => this.navigator = ref}
navigation={
addNavigationHelpers({
dispatch: dispatch,
state: navigationState
})
}
/>
}
else {
console.log('Calling AuthNavigator')
return <AuthNavigator
ref={(ref) => this.navigator = ref}
navigation={
addNavigationHelpers({
dispatch: dispatch,
state: navigationState
})
}
/>
}
}
Running this code I see the following logging:
4:27:48 PM: Finished building JavaScript bundle in 409ms
4:27:54 PM: Running app on SM-G935V in development mode4:27:55 PM: Restoring Auth Token
4:27:55 PM: check for authToken
4:27:55 PM: Waiting…
It never gets to the point where it logs: “validating authToken” after the promise is returned.
Also, to see if I could get my app running I disabled the code for caching the session token in AsyncStorage and it hung in the same way, but in a different spot waiting for a promise. Here it hangs in the same way at the line where it is trying to convert the response into json with resp.json(). It works fine when I am in remote JS debugging mode with Chrome.
export function authenticate(email, password) {
console.log("authenticating...")
return (dispatch, getState) => {
return Api.post(`/api/v1/user/authenticate/`, '', getPostData(email, password))
.then(resp => {
switch (resp.status) {
case 200: {
console.log('authenticate returned 200')
console.log(resp)
resp.json().then(token => {
console.log('setAuthToken')
dispatch(setAuthToken(token.token));
console.log('setAuthStatus')
dispatch(setAuthStatus(true));
//storeAuthToken(token.token);
}).catch((error) => {
console.log("error processing response token");
console.log(error);
})
break;
}
default: {
console.log('authenticate returned ' + resp.status)
dispatch(setLoginFailed(true));
removeAuthToken()
break;
}
}
}).catch((ex) => {
console.log("Error Authenticating");
console.log(ex);
throw (ex);
})
}
}
Here the last thing logged is “authenticate returned 200”.
It doesn’t log anything after that including the console.log(resp).
HOWEVER,
If I comment-out the entire resp.json(… section up through break; it will log the resp to the console and the application continues normally.