Amplify-js: recommended way to get current auth state

[davegariepy]

Hi, thanks for making this package. I am using my custom interface and called the Auth methods manually in React. I have been trying to figure out the best way to get the current auth state a user - logged in or not. I tried the HOC and Authenticator, but they seem to still apply styles to my app even when hideDefault is set to true. I would like to get access to authState prop so I can set my react-router routes to redirect if the user is not signed in. I tried with Auth.currentUser but this makes an async call. I saw that there is Hub helper, but not sure if this would be appropriate to use.

Thanks

[yuyokk]

Hi guys, i'm running into the same question.

On the docs I see the following method Auth.currentUser but it fails in my app with an error Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_aws_amplify__.Auth.currentUser is not a function

I see a different method Auth.currentAuthenticatedUser that is available in the source. Please let me know if it is a right way to check if there is a logged in user already.

Thank you for any information on this.

[manueliglesias]

Hi @ddddave

Both approaches should be fine (Auth.currentUser and Hub), you can find a very similar use case to yours in the awslabs/aws-mobile-react-sample repository, that repo uses AWS Amplify

Specifically, you can take a look at https://github.com/awslabs/aws-mobile-react-sample/blob/master/client/src/index.js

I'll be closing this issue for now, but please feel free to re-open it or create a new one as needed.

[vbudilov]

I've done something like this and it seems to work for my use case, as far as I tested at least (have to check a couple more flows before I'm convinced):

import Amplify, {Auth} from 'aws-amplify';

export const MainNavigator = StackNavigator({
    Auth: { screen:  AuthNavigator},
    Main: { screen: MainNavigator },
}, {
    initialRouteName:  (Auth.user == null) ? 'Auth' : 'Main' ,
    headerMode: 'none',
    animationEnabled: 'true'
});

[nipasarker01]

Its working @vbudilov but While reloading app its going back to the Auth state..How to resist that??

[vbudilov]

The simplest way is to have something like this in your component:

    componentWillMount() {
        let loggedIn = false
        if (Auth.user) {
            console.log("user object exists")
            const {user: {signInUserSession: {accessToken: {payload: {exp, iat}}}}} = Auth
            if (iat < exp) loggedIn = true
            console.log("is logged in", loggedIn)
        }

        if (loggedIn) {
            console.log("Redirecting to main");
            this.props.navigation.navigate('Main');
        }
    }

[nipasarker01]

Not working..may be its due to sign out component is not done

[paulrberg]

What I don't understand is why there's no property in the Auth object to simply query for the session availability. So a property, not a promise, because I have a React Router configuration for protected components and I'm forced to implement one of the following solutions:

1. Set the authenticated state in componentWillMount, which is not desirable, because the browser will actually hit the private route for a specific set of milliseconds until the promise is fulfilled (provided the user was already logged in, as it will hit the public route in the other scenario)
2. Keep a copy of the session in the Redux store, and dispatch the actions when the user logs in/ sign ups. This would add redundancy though.
3. Wait for the session to be loaded before rendering any component.
4. Wait for the session to be loaded before loading React.

I've personally chosen option no. 3, but none of them are good practices. We should have a way to do this simpler, like in HOCs: authState and authData.

[stephenhuh]

Any updates on this from the amplify team?

[fabianleeaws]

Thanks for sharing @PaulRBerg, ran into the same issue. Will prob go with option 3 as well. Hopefully they look at this eventually

[ajhool]

@manueliglesias

The "fix" in this repo https://github.com/awslabs/aws-mobile-react-sample/blob/master/client/src/index.js requires a react component. Sometimes you just want to check if a user is logged in or not by checking a field in code. I believe the Authenticator component also forces a Login/Signup flow -- I just want to display a simple "User is signed in / Not signed in" icon in my App Header but I don't want the Authenticator component to activate on my header.

From the large number of likes on @PaulRBerg comment, maybe this issue could be reopened/revisited?

[ajhool]

There was some recent, similar discussion in #3640 that should make it much easier to keep track of, cache, and check the user's login state. It still presents some of the issues mentioned by @PaulRBerg, but it is clean and simple. That solution can also be enhanced with a localStorage isUserLoggedIn flag that would allow the router to make a fast/good guess about where to go