在属性更新后更新用户上下文 - AWS Amplify

Question

I have a requirement that a first time user is presented with a popup that they need to agree to after logging in. I have created a custom attribute in Cognito that is marked "Yes" until the user clicks the agree button. All of that logic works except when you refresh the page the user is presented with the popup again despite agreeing and the attribute being changed in Cognito.

I am using the React context api with useContext hook. I noticed in React tools that the context is not getting updated and this may be the problem.

AuthContext.js

import React from 'react';

export const AuthContext = React.createContext();

export const AuthProvider = AuthContext.Provider;

App.js

import React from 'react';
import { withRouter } from 'react-router-dom';
import Header from './components/Header';
import Routes from './Routes';
import useAmplifyAuth from './libs/useAmplifyAuth';
import { AuthProvider } from './context/AuthContext';
import InitialLoginModal from './components/InitialLoginModal';

function App() {
  const {
    state: { user },
    handleSignout
  } = useAmplifyAuth();

  return (
    <>
      <AuthProvider value={{ user, handleSignout }}>
        <>
          <Header />
          <Routes />
          <InitialLoginModal />
        </>
      </AuthProvider>
    </>
  );
}

export default withRouter(App);

InitialLoginModal.js

import React, { useContext, useState, useEffect } from 'react';
import { Modal, Button, Image } from 'react-bootstrap';
import { Auth } from 'aws-amplify';
import imgLogo from '../img/logo.jpg';
import { AuthContext } from '../context/AuthContext';

const InitialLoginModal = () => {
  const { user, handleSignout } = useContext(AuthContext);

  const [showModal, setShowModal] = useState(false);
  const [initialLogin, setInitialLogin] = useState('');

  const noAccept = () => {
    setShowModal(false);
    handleSignout();
  };

  useEffect(() => {
    if (user) {
      console.log(user.attributes['custom:initiallogin']);
      if (user.attributes['custom:initiallogin'] === 'Yes') {
        setShowModal(true);
      }
    }
  }, [user]);

  const accept = () => {
    updateInitialLogin();
    setShowModal(false);
  };

  const updateInitialLogin = async () => {
    await Auth.updateUserAttributes(user, { 'custom:initiallogin': 'No' });
    setInitialLogin('No');
    setShowModal(false);
  };

  return (
    <>
      {/* Initial login modal */}
      <Modal
        show={showModal}
        onHide={noAccept}
        dialogClassName="modal-70w modal-item"
        aria-labelledby="Initial Login Modal"
      >
        <Modal.Header closeButton>
          <Modal.Title>
            <Image
              src={imgLogo}
              alt="Logo"
              fluid
              className="modal-image-center"
            />
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>
            Text that I must agree to.
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={accept}>Next</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default InitialLoginModal;

useAmplifyAuth.js

import { useReducer, useState, useEffect } from 'react';
import { Auth, Hub } from 'aws-amplify';

const amplifyAuthReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_USER_DATA_INIT':
      return {
        ...state,
        isLoading: true,
        isError: false
      };
    case 'FETCH_USER_DATA_SUCCESS':
      return {
        ...state,
        isLoading: false,
        isError: false,
        user: action.payload.user
      };
    case 'FETCH_USER_DATA_FAILURE':
      return { ...state, isLoading: false, isError: true };
    case 'RESET_USER_DATA':
      return { ...state, user: null };
    default:
      throw new Error();
  }
};

const useAmplifyAuth = () => {
  const initialState = {
    isLoading: true,
    isError: false,
    user: null
  };
  const [state, dispatch] = useReducer(amplifyAuthReducer, initialState);
  const [triggerFetch, setTriggerFetch] = useState(false);
  useEffect(() => {
    let isMounted = true;
    const fetchUserData = async () => {
      if (isMounted) {
        dispatch({ type: 'FETCH_USER_DATA_INIT' });
      }
      try {
        if (isMounted) {
          const data = await Auth.currentAuthenticatedUser();
          if (data) {
            dispatch({
              type: 'FETCH_USER_DATA_SUCCESS',
              payload: { user: data }
            });
          }
        }
      } catch (error) {
        if (isMounted) {
          dispatch({ type: 'FETCH_USER_DATA_FAILURE' });
        }
      }
    };
    const HubListener = () => {
      Hub.listen('auth', data => {
        const { payload } = data;
        onAuthEvent(payload);
      });
    };
    const onAuthEvent = payload => {
      switch (payload.event) {
        case 'signIn':
          if (isMounted) {
            setTriggerFetch(true);
            console.log('signed in');
          }
          break;
        default:
          return;
      }
    };
    HubListener();
    fetchUserData();
    return () => {
      Hub.remove('auth');
      isMounted = false;
    };
  }, [triggerFetch]);
  const handleSignout = async () => {
    try {
      console.log('signed out');
      await Auth.signOut();
      setTriggerFetch(false);
      dispatch({ type: 'RESET_USER_DATA' });
    } catch (error) {
      console.error('Error signing out user ', error);
    }
  };
  return { state, handleSignout };
};
export default useAmplifyAuth;

In the end, I just need the user to be able to agree to the terms, have their custom attribute be updated, and not be presented with the modal again after that. Any help would be appreciated. Thanks.

• New InitialLoginModal.js after @vencovsky suggestion

import React, { useContext, useEffect, useState } from 'react';
import { Modal, Button, Image } from 'react-bootstrap';
import { Auth } from 'aws-amplify';
import imgLogo from '../img/logo.jpg';
import { AuthContext } from '../context/AuthContext';

const InitialLoginModal = () => {
  const {
    user,
    handleSignout,
    shouldShowModal,
    setShouldShowModal
  } = useContext(AuthContext);

  const [showModal, setShowModal] = useState(shouldShowModal);
  // const [initialLogin, setInitialLogin] = useState('');

  const noAccept = () => {
    setShowModal(false);
    handleSignout();
  };

  useEffect(() => {
    if (user) {
      if (user.attributes['custom:initiallogin'] === 'Yes') {
        setShowModal(true);
      }
    }
  }, [user, setShouldShowModal]);

  const accept = () => {
    updateInitialLogin();
    // setShouldShowModal(false);
  };

  const updateInitialLogin = async () => {
    if (user) {
      await Auth.updateUserAttributes(user, { 'custom:initiallogin': 'No' });
      setShowModal(false);
    }
  };

  return (
    <>
      {/* Initial login modal */}
      <Modal
        show={showModal}
        onHide={noAccept}
        dialogClassName="modal-70w modal-item"
        aria-labelledby="Initial Login Modal"
      >
        <Modal.Header closeButton>
          <Modal.Title>
            <Image
              src={imgLogo}
              alt="Logo"
              fluid
              className="modal-image-center"
            />
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>
            Info here
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={accept}>Next</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default InitialLoginModal;

Answer 1

I just ran into this issue myself, and I believe that this is the line that needs updating from:

const data = await Auth.currentAuthenticatedUser();

to:

const data = await Auth.currentAuthenticatedUser({bypassCache: true});

This will retrieve the updated attributes directly from Cognito so that the user is not presented with the modal when the attribute is set to custom:initiallogin = 'No'.

Answer 2

Not sure if this is correct, but you should have a state in your context that decides if it should show the modal or not.

function App() {
  const [shouldShowModal, setShouldShowModal] = useState(true) // you can choose if you want true or false
  const {
    state: { user },
    handleSignout
  } = useAmplifyAuth();

  return (
    <>
      <AuthProvider value={{ user, handleSignout, shouldShowModal, setShouldShowModal }}>
        <>
          <Header />
          <Routes />
          <InitialLoginModal />
        </>
      </AuthProvider>
    </>
  );
}

And the default value of the showModal should be from the context.

const InitialLoginModal = () => {
  const { user, handleSignout, shouldShowModal, setShouldShowModal } = useContext(AuthContext);

  const [showModal, setShowModal] = useState(shouldShowModal );

  ...

}

And then you can do some more things with setShouldShowModal so when you get the authentication, you choose if it should show or not.

Answer 3

在需要访问数据的应用客户端的 Cognito AWS 界面中选择“oauth scopes”下的“profile”。