verifyCredentials does not return a Promise

[aguynamedben]

Hi, thanks for the time you take to make this a public module for others to use. I was happy to find it and it's working pretty good so far.

When my app launches, I'd like to see if the user is logged in via verifyCredentials. I want to wait until verifyCredentials returns before redirecting the user to their logged-in page. I don't know TypeScript well, but it looks like the TS method signature of verifyCredentials means the method will return a Promise...

const verifyCredentials = async (store: Store<{}>): Promise<void> => {
   //...
}

I'd like my code to do this:

verifyCredentials(store)
  .then(() => {
    // check state to see if the user is now logged in
    // redirect the user
  })

It seems like verifyCredentials only ever returns undefined. The method functionality doesn't return a new Promise, but the method signature implies a Promise.

How can I know that verifyCredentials is finished?

The workarounds I can think of are:

• Catch the login in a reducer, fire an action from a reducer, which is an anti-pattern.
• Implement my own customVerifyCredentials that does similar logic to verifyCredentials but returns a promise (and maybe the status of the API call).

Thanks for any input you can offer.

[djvs]

+1, either a fix of the race condition with verifyCredentials or making this return a proper promise is an absolute must for this library to be used in production.

[joshudev]

Also see my pull request https://github.com/kylecorbelli/redux-token-auth/pull/35 which checks for hasVerificationBeenAttempted before redirecting in the require sign in wrapper.

[usamakamran1]

Facing same issue. There is no way of knowing that validate token request has completed. So, my app renders before the server response and logs the user out.

Possible workaround (Have not tried it myself yet): In your root component,

class Root extends React.Component{

    isLoading(){
        return this.props.isLoading
    }

    render(){
        return(
            this.isLoading() ? <LoaderComponent /> : <App />
        )
    }
}

function mapStateToProps(state){
    return {
        isLoading: state.reduxTokenAuth.currentUser.isLoading
    }
}

export default connect(mapStateToProps,null)(Root);

Hopefully this solves it. :)

EDIT: It works :)

[pnikrat]

Great work @joshudev with this PR! I used your fork and it fixed the issue with user being redirected to sign in after typing url when user was already logged in. It was a tricky bug as at first I thought it was problem with react router. I had to add additional storage config changes as mentioned in PR discussion to make build pass. Cheers :+1: