Is there a simple way to check if the user is logged in or not (in code)?

Is your feature request related to a problem? Please describe. A user navigates to my webapp. I have a header on the webapp that depends on the user’s login state (eg. a button says “Account” if the user is logged in or “Sign Up” if the user is not logged in). I don’t want to use the Authenticator component because I don’t want to force the user to login immediately.

Describe the solution you’d like In my header’s render function, something like:

// header.tsx
import Auth from '@aws-amplify/auth';
const header = () => (Auth.isUserLoggedIn()) ? <div>Account</div> : <div>Sign In</div>;

Describe alternatives you’ve considered

I believe that this code is close, but I think that it forces the user to login in order to view the header, which not necessary

const header = ({authState}) => (
      (authState === `signedIn`) ? <div>Account</div> : <div>Sign In</div>;
)

return withAuthenticator(header);

Additional context Add any other context or screenshots about the feature request here.

[all-iver]

@ajhool judging from this and your other recent issue I think you’re at the same point I’m at, going through the tutorials and slowly realizing the intended workflow doesn’t apply to you. All the methods I could find to do this are async, so there was no obvious way to do this just from a render function. I ended up using the Authenticator component manually (i.e. don’t use withAuthenticator unless you’re forcing the user to log in), and I have my top-level component provide the user to children as React context.

  let [user, setUser] = useState(null)
  useEffect(() => {
    let updateUser = async authState => {
      try {
        let user = await Auth.currentAuthenticatedUser()
        setUser(user)
      } catch {
        setUser(null)
      }
    }
    Hub.listen('auth', updateUser) // listen for login/signup events
    updateUser() // check manually the first time because we won't get a Hub event
    return () => Hub.remove('auth', updateUser) // cleanup
  }, []);

This code is in my top level component’s render function (using React hooks), and then it uses React context to provide the user to its children. This seems to work, although there is probably a small window where you render without having the user, so there’s a flash when it updates. I’m just learning Amplify so I don’t know if this is the best way to do it.

[nielsboecker]

I’ve put together a simple custom hook based on the code from @all-iver 😃

import Auth from "@aws-amplify/auth";
import { Hub } from "@aws-amplify/core";
import { CognitoUser } from "amazon-cognito-identity-js";
import { useEffect, useState } from "react";

export interface UseAuthHookResponse {
  currentUser: CognitoUser | null;
  signIn: () => void;
  signOut: () => void;
}

const getCurrentUser = async (): Promise<CognitoUser | null> => {
  try {
    return await Auth.currentAuthenticatedUser();
  } catch {
    // currentAuthenticatedUser throws an Error if not signed in
    return null;
  }
};

const useAuth = (): UseAuthHookResponse => {
  const [currentUser, setCurrentUser] = useState<CognitoUser | null>(null);

  useEffect(() => {
    const updateUser = async () => {
      setCurrentUser(await getCurrentUser());
    };
    Hub.listen("auth", updateUser); // listen for login/signup events
    updateUser(); // check manually the first time because we won't get a Hub event
    return () => Hub.remove("auth", updateUser);
  }, []);

  const signIn = () => Auth.federatedSignIn();

  const signOut = () => Auth.signOut();

  return { currentUser, signIn, signOut };
};

export default useAuth;

export { getCurrentUser };