aws-amplify#I18n TypeScript Examples

The following examples show how to use aws-amplify#I18n. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AuthLogin.tsx    From crossfeed with Creative Commons Zero v1.0 Universal 6 votes vote down vote up 
I18n.putVocabulariesForLanguage('en-US', {
  [Translations.TOTP_HEADER_TEXT]:
    'Set up 2FA by scanning the QR code with an authenticator app on your phone:',
  [Translations.TOTP_LABEL]: 'Enter 2FA security code from the app:',
  [Translations.TOTP_ISSUER]: TOTP_ISSUER_PREFIX,
  [Translations.CONFIRM_TOTP_CODE]: 'Enter 2FA Code',
  [Translations.CONFIRM_SIGN_UP_CODE_LABEL]: 'Email Confirmation Code',
  [Translations.CONFIRM_SIGN_UP_CODE_PLACEHOLDER]:
    'Enter code sent to your email address',
  [Translations.CODE_LABEL]: 'Enter code:', // 2FA prompt and reset password label
  [Translations.LESS_THAN_TWO_MFA_VALUES_MESSAGE]: ''
});
Example #2
Source File: AuthLogin.tsx    From crossfeed with Creative Commons Zero v1.0 Universal 4 votes vote down vote up 
AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
  showSignUp = false
}) => {
  const { apiPost, refreshUser } = useAuthContext();
  const [errors, setErrors] = useState<Errors>({});

  useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      if (nextAuthState === 'TOTPSetup') {
        // We want to set the issuer to have the email address, so that the authenticator app will show the email address.
        // userDataKey is in the format: "CognitoIdentityServiceProvider.[app_client_id][email protected]"
        const email = (authData as any).userDataKey?.match(
          /^.*?\..*?\.(.*?)\.userData$/
        )[1];
        if (email) {
          I18n.putVocabulariesForLanguage('en-US', {
            [Translations.TOTP_ISSUER]: `${TOTP_ISSUER_PREFIX}: ${email}`
          });
        } else {
          I18n.putVocabulariesForLanguage('en-US', {
            [Translations.TOTP_ISSUER]: TOTP_ISSUER_PREFIX
          });
        }
      }
      refreshUser();
    });
  }, [refreshUser]);

  const onSubmit: React.FormEventHandler = async (e) => {
    e.preventDefault();
    try {
      const { redirectUrl, state, nonce } = await apiPost('/auth/login', {
        body: {}
      });
      localStorage.setItem('state', state);
      localStorage.setItem('nonce', nonce);
      window.location.href = redirectUrl;
    } catch (e) {
      console.error(e);
      setErrors({
        global: 'Something went wrong logging in.'
      });
    }
  };

  if (process.env.REACT_APP_USE_COGNITO) {
    return (
      <AuthForm>
        <h1>Welcome to Crossfeed</h1>
        <AmplifyAuthenticator usernameAlias="email">
          <AmplifySelectMfaType MFATypes={{ TOTP: true }} />
          {/* Hide the sign up button unless we are 1) on the /signup page or 2) in development mode. */}
          <AmplifySignIn
            slot="sign-in"
            hideSignUp={
              !showSignUp && !(process.env.NODE_ENV === 'development')
            }
          />
          <AmplifySignUp
            slot="sign-up"
            formFields={[{ type: 'email' }, { type: 'password' }]}
            usernameAlias="email"
          />
        </AmplifyAuthenticator>
      </AuthForm>
    );
  }

  return (
    <AuthForm onSubmit={onSubmit}>
      <h1>Welcome to Crossfeed</h1>
      {errors.global && <p className="text-error">{errors.global}</p>}
      <Button type="submit" size="big">
        Login with Login.gov
      </Button>
      <br></br>
      <Link to="#" onClick={onSubmit}>
        New to Crossfeed? Register with Login.gov
      </Link>
    </AuthForm>
  );
}