Louis•3y ago

Louis – 12-43 Jun 29

Does this seem like a sensible approach to managing authentication state? I'm using Cognito via Amplify and have an authentication context that provides the user to the rest of the application. I need to perform side effects in the authentication context and on the page, so I'm exposing a React Query mutation from the context provider that facilitates this... * CODE IN THREAD * Thanks 🙂

2 Replies

LouisOP•3y ago

export const AuthenticationContextProvider = ({
  children,
}: AuthenticationContextProviderProps) => {
  const [user, setUser] = useState<CustomCognitoUser>();

  const { isLoading: isGettingAuthenticatedUser } = useQuery<CustomCognitoUser>(
    "getAuthenticatedUser",
    () => authenticationService.getAuthenticatedUser(),
    {
      onSuccess: (user) => {
        setUser(user);
      },
    },
  );

  const signInMutation = useMutation<
    CustomCognitoUser,
    Error,
    AuthenticationCredentials
  >(
    ({ emailAddress, password }: AuthenticationCredentials) =>
      authenticationService.signIn({
        emailAddress,
        password,
      }),
    {
      onSuccess: (user) => {
        setUser(user);
      },
    },
  );

  // ...

export const AuthenticationContextProvider = ({
  children,
}: AuthenticationContextProviderProps) => {
  const [user, setUser] = useState<CustomCognitoUser>();

  const { isLoading: isGettingAuthenticatedUser } = useQuery<CustomCognitoUser>(
    "getAuthenticatedUser",
    () => authenticationService.getAuthenticatedUser(),
    {
      onSuccess: (user) => {
        setUser(user);
      },
    },
  );

  const signInMutation = useMutation<
    CustomCognitoUser,
    Error,
    AuthenticationCredentials
  >(
    ({ emailAddress, password }: AuthenticationCredentials) =>
      authenticationService.signIn({
        emailAddress,
        password,
      }),
    {
      onSuccess: (user) => {
        setUser(user);
      },
    },
  );

  // ...

export const SignInPage = () => {
    const navigate = useNavigate();
  
    const { signInMutation } = useAuthenticationContext();
  
    const {
      mutate: signIn,
      isLoading: isSigningIn,
      error: signInError,
    } = signInMutation;
  
    const handleSignInFormSubmit = ({
      emailAddress,
      password,
    }: AuthenticationCredentials) => {
      signIn(
        { emailAddress, password },
        {
          onSuccess: () => {
            navigate(pagePaths.home);
          },
          onError: (error) => {
            const isUserNotConfirmedException =
              error.name === "UserNotConfirmedException";
  
            if (isUserNotConfirmedException) {
              toast.success(
                `A verification code has been sent to ${emailAddress}.`,
              );
  
              navigate(
                `${pagePaths.verifyEmailAddress}/?emailAddress=${emailAddress}`,
              );
            }
          },
        },
      );
    };

    // ...

export const SignInPage = () => {
    const navigate = useNavigate();
  
    const { signInMutation } = useAuthenticationContext();
  
    const {
      mutate: signIn,
      isLoading: isSigningIn,
      error: signInError,
    } = signInMutation;
  
    const handleSignInFormSubmit = ({
      emailAddress,
      password,
    }: AuthenticationCredentials) => {
      signIn(
        { emailAddress, password },
        {
          onSuccess: () => {
            navigate(pagePaths.home);
          },
          onError: (error) => {
            const isUserNotConfirmedException =
              error.name === "UserNotConfirmedException";
  
            if (isUserNotConfirmedException) {
              toast.success(
                `A verification code has been sent to ${emailAddress}.`,
              );
  
              navigate(
                `${pagePaths.verifyEmailAddress}/?emailAddress=${emailAddress}`,
              );
            }
          },
        },
      );
    };

    // ...

reactibot•3y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/991685288587968522