search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
875 stars 277 forks source link

User friendly invalid username error #2776

Closed DennisNurtio closed 1 year ago

DennisNurtio commented 1 year ago

Before opening, please confirm:

JavaScript Framework

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: Windows 10 10.0.22000 Binaries: Node: 16.18.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 106.0.5249.119 Edge: Spartan (44.22000.120.0), Chromium (106.0.1370.47) Internet Explorer: 11.0.22000.120 npmPackages: @apollo/client: ^3.6.9 => 3.6.9 @apollo/client/cache: undefined () @apollo/client/core: undefined () @apollo/client/errors: undefined () @apollo/client/link/batch: undefined () @apollo/client/link/batch-http: undefined () @apollo/client/link/context: undefined () @apollo/client/link/core: undefined () @apollo/client/link/error: undefined () @apollo/client/link/http: undefined () @apollo/client/link/persisted-queries: undefined () @apollo/client/link/retry: undefined () @apollo/client/link/schema: undefined () @apollo/client/link/subscriptions: undefined () @apollo/client/link/utils: undefined () @apollo/client/link/ws: undefined () @apollo/client/react: undefined () @apollo/client/react/components: undefined () @apollo/client/react/context: undefined () @apollo/client/react/hoc: undefined () @apollo/client/react/hooks: undefined () @apollo/client/react/parser: undefined () @apollo/client/react/ssr: undefined () @apollo/client/testing: undefined () @apollo/client/testing/core: undefined () @apollo/client/utilities: undefined () @apollo/client/utilities/globals: undefined () @aws-amplify/auth: ^4.6.7 => 4.6.7 @aws-amplify/ui-vue: ^2.4.22 => 2.4.22 @babel/core: ^7.19.1 => 7.19.1 (7.12.9) @capacitor/android: 4.3.0 => 4.3.0 @capacitor/app: 4.0.1 => 4.0.1 @capacitor/cli: 4.3.0 => 4.3.0 @capacitor/core: 4.3.0 => 4.3.0 @capacitor/haptics: 4.0.1 => 4.0.1 @capacitor/ios: 4.3.0 => 4.3.0 @capacitor/keyboard: 4.0.1 => 4.0.1 @capacitor/status-bar: 4.0.1 => 4.0.1 @cypress/angular: 0.0.0-development @cypress/mount-utils: 0.0.0-development @cypress/react: 0.0.0-development @cypress/react18: 0.0.0-development @cypress/svelte: 0.0.0-development @cypress/vue: 0.0.0-development @cypress/vue2: 0.0.0-development @graphql-codegen/cli: ^2.12.1 => 2.12.1 @graphql-codegen/schema-ast: ^2.5.1 => 2.5.1 @graphql-codegen/typescript: ^2.7.3 => 2.7.3 @graphql-codegen/typescript-operations: ^2.5.3 => 2.5.3 @graphql-codegen/typescript-vue-apollo: ^3.3.3 => 3.3.3 @ionic/core: ^6.2.8 => 6.2.8 @ionic/core/components: 0.0.0 @ionic/core/hydrate: undefined () @ionic/vue: ^6.2.8 => 6.2.8 @ionic/vue-router: ^6.2.8 => 6.2.8 @mdi/js: ^7.0.96 => 7.0.96 @sentry/tracing: ^7.13.0 => 7.13.0 @sentry/vue: ^7.13.0 => 7.13.0 @storybook/addon-actions: ^6.5.12 => 6.5.12 @storybook/addon-essentials: ^6.5.12 => 6.5.12 @storybook/addon-interactions: ^6.5.12 => 6.5.12 @storybook/addon-links: ^6.5.12 => 6.5.12 @storybook/builder-webpack5: ^6.5.12 => 6.5.12 @storybook/manager-webpack5: ^6.5.12 => 6.5.12 @storybook/testing-library: ^0.0.13 => 0.0.13 @storybook/vue3: ^6.5.12 => 6.5.12 @types/jest: ^27.0.2 => 27.5.2 @types/lodash: ^4.14.185 => 4.14.185 @types/luxon: ^3.0.1 => 3.0.1 @types/pica: ^9.0.1 => 9.0.1 @typescript-eslint/eslint-plugin: ^5.38.0 => 5.38.0 @typescript-eslint/parser: ^5.38.0 => 5.38.0 @vue/apollo-composable: ^4.0.0-alpha.19 => 4.0.0-alpha.19 @vue/cli-plugin-babel: ~5.0.8 => 5.0.8 @vue/cli-plugin-e2e-cypress: ~5.0.8 => 5.0.8 @vue/cli-plugin-eslint: ~5.0.8 => 5.0.8 @vue/cli-plugin-pwa: ~5.0.8 => 5.0.8 @vue/cli-plugin-router: ~5.0.8 => 5.0.8 @vue/cli-plugin-typescript: ~5.0.8 => 5.0.8 @vue/cli-plugin-unit-jest: ~5.0.8 => 5.0.8 @vue/cli-service: ~5.0.8 => 5.0.8 @vue/eslint-config-typescript: ^11.0.2 => 11.0.2 @vue/test-utils: ^2.0.2 => 2.0.2 @vue/vue3-jest: ^27.0.0 => 27.0.0 apexcharts: ^3.35.5 => 3.35.5 aws-amplify: ^4.3.36 => 4.3.36 aws-appsync: ^4.1.7 => 4.1.7 babel-jest: ^27.3.1 => 27.5.1 babel-loader: ^8.2.5 => 8.2.5 convert: ^4.6.3 => 4.6.3 convert-units: ^3.0.0-beta.3 => 3.0.0-beta.4 cordova-plugin-ionic: 5.5.3 => 5.5.3 () core-js: ^3.25.2 => 3.25.2 cypress: ^10.8.0 => 10.8.0 eslint: ^8.23.1 => 8.23.1 eslint-config-prettier: ^8.5.0 => 8.5.0 eslint-plugin-prettier: ^4.2.1 => 4.2.1 eslint-plugin-storybook: ^0.6.4 => 0.6.4 eslint-plugin-vue: ^9.5.1 => 9.5.1 html5-qrcode: ^2.2.1 => 2.2.1 humanize-duration-ts: ^2.1.1 => 2.1.1 image-blob-reduce: ^4.1.0 => 4.1.0 npm-check-updates: 16.1.0 prettier: 2.7.1 rollup: 2.34.1 serverless: 2.8.0 yarn-check: 0.0.3 yarn: 1.22.5 ```

Describe the bug

When a username does not meet formatting requirements, for example by having trailing spaces in it, the following error message is displayed to the user:

2 validation errors detected: Value at 'userAlias' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+; Value at 'userName' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+

Expected behavior

Either trim the username (#9150 ) or give a human readable message (#3862 / aws-amplify/amplify-js#6737 ).

Reproduction steps

  1. Install: "@aws-amplify/auth": "4.6.7", "@aws-amplify/ui-vue": "2.4.22",
  2. Use Snippet below
  3. type "test " (with trailing space) into username field
  4. Add password and push "Sign in"

Code Snippet

// Put your code below this line.
<script setup lang="ts">
import { Authenticator } from '@aws-amplify/ui-vue';
import '@aws-amplify/ui-vue/styles.css';
</script>

<template>
    <ion-page>
        <authenticator></authenticator>
    </ion-page>
</template>

Log output

``` // Put your logs below this line ```

aws-exports.js

{
    Auth: {
        region: 'eu-west-1',
        userPoolId: 'eu-west-1_xxxxxxxxx',
        userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
        identityPoolId: 'eu-west-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    },
};

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

image

tannerabread commented 1 year ago

This needs to be addressed on the new web UI components as well as React Native. Going to transfer to the ui repo for better feedback and support.

React Native issue aws-amplify/amplify-ui#2777