Merge pull request #2642 from aws-amplify/next-release/auto-sign-in

refactor(authenticator)!: use Amplify JS auto sign in
aws-amplify · Nov 1, 2022 · 394556a · 394556a
2 parents 8413aa1 + b458299
commit 394556a
Show file tree

Hide file tree

Showing 40 changed files with 570 additions and 182 deletions.
diff --git a/.changeset/brown-lies-wonder.md b/.changeset/brown-lies-wonder.md
@@ -0,0 +1,26 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+"@aws-amplify/ui-angular": patch
+"@aws-amplify/ui-vue": patch
+---
+
+**BREAKING**: When overriding `Auth.signUp`, update the override function call to include the `autoSignIn` option set to enabled. This is now required.
+
+```diff
+ async handleSignUp(formData) {
+  let { username, password, attributes } = formData;
+  // custom username
+  username = username.toLowerCase();
+  attributes.email = attributes.email.toLowerCase();
+  return Auth.signUp({
+    username,
+    password,
+    attributes,
++   autoSignIn: {
++     enabled: true
++   }
+  });
+}
+
+```
diff --git a/...nents/authenticator/customization/customization.override-function-calls.web.mdx b/...nents/authenticator/customization/customization.override-function-calls.web.mdx
@@ -1,6 +1,6 @@
 import { Fragment } from '@/components/Fragment';
 import { ResponsiveTable, ResponsiveTableCell } from '@/components/ResponsiveTable';
-import { TableCell, TableBody, TableHead, TableRow } from '@aws-amplify/ui-react';
+import { TableCell, TableBody, TableHead, TableRow, Alert } from '@aws-amplify/ui-react';
 
 ## Override Function Calls
 
@@ -10,12 +10,17 @@ To override a call you must create a new `services` object with an `async` `hand
 The service object must then be passed into the `authenticator` component as a `services` prop. For example, let's imagine you'd like to lowercase the `username` and the `email` attributes during `signUp`.
 This would be overriden like so:
 
+<Alert role="none" variation="warning" heading="Sign Up Auto Sign In">
+  When overriding `signUp` you must include the `autoSignIn` key and set `enabled` to true, as show in the example below.
+</Alert>
+
 <Fragment>
   {({ platform }) => import(`./overrides/username.${platform}.mdx`)}
 </Fragment>
 
-Each `handle*` function will return the neccessary values you'll need to make the call to the `Auth.*` function call. Here is a table of each override function name, and the values returned from `formData`.
 
+
+Each `handle*` function will return the neccessary values you'll need to make the call to the `Auth.*` function call. Here is a table of each override function name, and the values returned from `formData`.
 <ResponsiveTable labelWidth="10rem">
   <TableHead>
     <TableRow>

diff --git a/...connected-components/authenticator/customization/overrides/username.angular.mdx b/...connected-components/authenticator/customization/overrides/username.angular.mdx
@@ -43,6 +43,9 @@ export class SignUpWithEmailComponent implements OnInit {
         username,
         password,
         attributes,
+        autoSignIn: {
+          enabled: true,
+        },
       });
     },
   };

diff --git a/...]/connected-components/authenticator/customization/overrides/username.react.mdx b/...]/connected-components/authenticator/customization/overrides/username.react.mdx
@@ -16,6 +16,9 @@ export default function AuthenticatorWithEmail() {
         username,
         password,
         attributes,
+        autoSignIn: {
+          enabled: true,
+        },
       });
     },
   };

diff --git a/...rm]/connected-components/authenticator/customization/overrides/username.vue.mdx b/...rm]/connected-components/authenticator/customization/overrides/username.vue.mdx
@@ -16,6 +16,9 @@
         username,
         password,
         attributes,
+        autoSignIn: {
+          enabled: true,
+        },
       });
     },
   };

diff --git a/docs/src/pages/[platform]/getting-started/migration/migration.angular.mdx b/docs/src/pages/[platform]/getting-started/migration/migration.angular.mdx
@@ -1,21 +1,68 @@
 import { Tabs, TabItem } from '@aws-amplify/ui-react';
 import { Alert } from '@aws-amplify/ui-react';
 
+## 2.x to 3.x
+### Installation
+Install the 3.x version of the `@aws-amplify/ui-angular` library and the 5.x version of the `aws-amplify` library.
+
+<Tabs>
+<TabItem title="npm">
+
+```shell
+npm install aws-amplify@5.x @aws-amplify/ui-angular@3.x
+```
+
+</TabItem>
+<TabItem title="yarn">
+```shell
+yarn add aws-amplify@5.x @aws-amplify/ui-angular@3.x
+```
+
+</TabItem>
+</Tabs>
+
+### Update and usage
+
+The following breaking changes were introduced in `@aws-amplify/ui-angular` major version `3.0`:
+
+#### 1. Automatic signin on signup logic moved to `aws-amplify`. 
+
+If you are overriding `Auth.signUp`, update the override function call to include the `autoSignIn` option set to `enabled`. If this change is not made, users will not be automatically signed in on signup.
+
+```diff
+ async handleSignUp(formData) {
+  let { username, password, attributes } = formData;
+  // custom username
+  username = username.toLowerCase();
+  attributes.email = attributes.email.toLowerCase();
+  return Auth.signUp({
+    username,
+    password,
+    attributes,
++   autoSignIn: {
++     enabled: true
++   }
+  });
+}
+
+```
+
+## 1.x to 2.x
 ## Installation
 
-Install the latest version of the `@aws-amplify/ui-angular` library.
+Install the 2.x version of the `@aws-amplify/ui-angular` library.
 
 <Tabs>
 <TabItem title="npm">
 
 ```shell
-npm install aws-amplify @aws-amplify/ui-angular@latest
+npm install aws-amplify @aws-amplify/ui-angular@2.x
 ```
 
 </TabItem>
 <TabItem title="yarn">
 ```shell
-yarn add aws-amplify @aws-amplify/ui-angular@latest
+yarn add aws-amplify @aws-amplify/ui-angular@2.x
 ```
 
 </TabItem>
@@ -83,24 +130,25 @@ Below is an example of how to create an Authenticator.
 +    <button (click)="signOut()">Sign Out</button>
 +  </ng-template>
 +</amplify-authenticator>
+
 ```
 
 ## Breaking changes
 
-The latest version of the `Authenticator` component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.
+The 2.x version of the `Authenticator` component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.
 
 ### Slots
 
-All the slot locations have changed with the latest version of the `Authenticator`. To get a
+All the slot locations have changed with the 2.x version of the `Authenticator`. To get a
 sense of the changes please check out the [Headers and Footers](../connected-components/authenticator/customization#headers--footers) section.
 
 ### Form Fields
 
-The latest version of the `Authenticator` has a different format for the `formFields` prop. It also no long accepts
-`inputProps` nor `hint`. Instead it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
+The 2.x version of the `Authenticator` has a different format for the `formFields` prop. It also no longer accepts
+`inputProps` nor `hint`. Instead, it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
 [Sign Up Fields custimization](../connected-components/authenticator/customization#sign-up-fields). For more information on form field customizations
 please see the [Form Field Customization](../connected-components/authenticator/customization#form-field-customization) section.
 
 ### CSS Styling
 
-The latest version of the `Authenticator` has a completely different set of CSS variables. Please look over the [Amplify CSS Variables](../connected-components/authenticator/customization#styling) section for more information.
+The 2.x version of the `Authenticator` has a completely different set of CSS variables. Please look over the [Amplify CSS Variables](../connected-components/authenticator/customization#styling) section for more information.
diff --git a/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx b/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx
@@ -3,19 +3,19 @@ import { Alert } from '@aws-amplify/ui-react';
 
 ## 3.x to 4.x
 ### Installation
-Install the 4.x version of the `@aws-amplify/ui-react` library.
+Install the 4.x version of the `@aws-amplify/ui-react` library and the 5.x version of the `aws-amplify` library.
 
 <Tabs>
 <TabItem title="npm">
 
 ```shell
-npm install aws-amplify @aws-amplify/ui-react@4.x
+npm install aws-amplify@5.x @aws-amplify/ui-react@4.x
 ```
 
 </TabItem>
 <TabItem title="yarn">
 ```shell
-yarn add aws-amplify @aws-amplify/ui-react@4.x
+yarn add aws-amplify@5.x @aws-amplify/ui-react@4.x
 ```
 
 </TabItem>
@@ -79,6 +79,28 @@ Hopefully this change won't affect your code but will allow for more customizati
   The TextAreaField component does apply 1 style prop directly on the `textarea` element: `resize`. We felt this one makes sense to apply direclty on the the `textarea` element and not the wrapper element.
 </Alert>
 
+#### 5. Automatic signin on signup logic moved to `aws-amplify`. 
+
+If you are overriding `Auth.signUp`, update the override function call to include the `autoSignIn` option set to `enabled`. If this change is not made, users will not be automatically signed in on signup.
+
+```diff
+ async handleSignUp(formData) {
+  let { username, password, attributes } = formData;
+  // custom username
+  username = username.toLowerCase();
+  attributes.email = attributes.email.toLowerCase();
+  return Auth.signUp({
+    username,
+    password,
+    attributes,
++   autoSignIn: {
++     enabled: true
++   }
+  });
+}
+
+```
+
 ## 2.x to 3.x
 
 ### Installation
@@ -186,8 +208,8 @@ sense of the changes please check out the [Headers and Footers](../connected-com
 
 #### Form Fields
 
-The latest version of the `Authenticator` has a different format for the `formFields` prop. It also no long accepts
-`inputProps` nor `hint`. Instead it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
+The latest version of the `Authenticator` has a different format for the `formFields` prop. It also no longer accepts
+`inputProps` nor `hint`. Instead, it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
 [Sign Up Fields customization](../connected-components/authenticator/customization#sign-up-fields). For more information on form field customizations
 please see the [Form Field Customization](../connected-components/authenticator/customization#form-field-customization) section.
 

diff --git a/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx b/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx
@@ -1,25 +1,74 @@
 import { Tabs, TabItem } from '@aws-amplify/ui-react';
 import { Alert } from '@aws-amplify/ui-react';
 
+## 2.x to 3.x
+### Installation
+For Vue.js 2 users please continue to use our legacy library found [here](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue).
+
+Install the 3.x version of the `@aws-amplify/ui-vue` library and the 5.x version of the `aws-amplify` library.
+
+<Tabs>
+<TabItem title="npm">
+
+```shell
+npm install aws-amplify@5.x @aws-amplify/ui-vue@3.x
+```
+
+</TabItem>
+<TabItem title="yarn">
+```shell
+yarn add aws-amplify@5.x @aws-amplify/ui-vue@3.x
+```
+
+</TabItem>
+</Tabs>
+
+### Update and usage
+
+The following breaking changes were introduced in `@aws-amplify/ui-vue` major version `3.0`:
+
+#### 1. Automatic signin on signup logic moved to `aws-amplify`. 
+
+If you are overriding `Auth.signUp`, update the override function call to include the `autoSignIn` option set to `enabled`. If this change is not made, users will not be automatically signed in on signup.
+
+```diff
+ async handleSignUp(formData) {
+  let { username, password, attributes } = formData;
+  // custom username
+  username = username.toLowerCase();
+  attributes.email = attributes.email.toLowerCase();
+  return Auth.signUp({
+    username,
+    password,
+    attributes,
++   autoSignIn: {
++     enabled: true
++   }
+  });
+}
+
+```
+
+## 1.x to 2.x
 ## Installation
 
 For Vue.js 2 users please continue to use our legacy library found [here](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue).
 
 For Vue.js 3 users please continue on with the following steps:
 
-Install the latest version of the `@aws-amplify/ui-vue` library.
+Install the 2.x version of the `@aws-amplify/ui-vue` library.
 
 <Tabs>
 <TabItem title="npm">
 
 ```shell
-npm install aws-amplify @aws-amplify/ui-vue@latest
+npm install aws-amplify @aws-amplify/ui-vue@2
 ```
 
 </TabItem>
 <TabItem title="yarn">
 ```shell
-yarn add aws-amplify @aws-amplify/ui-vue@latest
+yarn add aws-amplify @aws-amplify/ui-vue@2
 ```
 
 </TabItem>
@@ -93,20 +142,20 @@ Below is an example of how to create an Authenticator.
 
 ## Breaking changes
 
-The latest version of the `Authenticator` component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.
+The 2.x version of the `Authenticator` component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.
 
 ### Slots
 
-All the slot locations have changed with the latest version of the `Authenticator`. To get a
+All the slot locations have changed with the 2.x version of the `Authenticator`. To get a
 sense of the changes please check out the [Headers and Footers](../connected-components/authenticator/customization#headers--footers) section.
 
 ### Form Fields
 
-The latest version of the `Authenticator` has a different format for the `formFields` prop. It also no long accepts
-`inputProps` nor `hint`. Instead it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
+The 2.x version of the `Authenticator` has a different format for the `formFields` prop. It also no longer accepts
+`inputProps` nor `hint`. Instead, it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
 [Sign Up Fields custimization](../connected-components/authenticator/customization#sign-up-fields). For more information on form field customizations
 please see the [Form Field Customization](../connected-components/authenticator/customization#form-field-customization) section.
 
 ### CSS Styling
 
-The latest version of the `Authenticator` has a completely different set of CSS variables. Please look over the [Amplify CSS Variables](../connected-components/authenticator/customization#styling) section for more information.
+The 2.x version of the `Authenticator` has a completely different set of CSS variables. Please look over the [Amplify CSS Variables](../connected-components/authenticator/customization#styling) section for more information.
diff --git a/...mponents/authenticator/sign-up-with-email-lambda/sign-up-with-email-lambda.component.html b/...mponents/authenticator/sign-up-with-email-lambda/sign-up-with-email-lambda.component.html
@@ -4,7 +4,7 @@
     let-user="user"
     let-signOut="signOut"
   >
-    <h2>Welcome, {{ user.username }}!</h2>
+    <h2>Welcome, {{ user.attributes?.email }}!</h2>
     <button (click)="signOut()">Sign Out</button>
   </ng-template>
 </amplify-authenticator>
diff --git a/.../src/pages/ui/components/authenticator/sign-up-with-email/sign-up-with-email.component.ts b/.../src/pages/ui/components/authenticator/sign-up-with-email/sign-up-with-email.component.ts
@@ -47,6 +47,9 @@ export class SignUpWithEmailComponent implements OnInit {
         username,
         password,
         attributes,
+        autoSignIn: {
+          enabled: true,
+        },
       });
     },
   };

diff --git a/examples/next/pages/ui/components/authenticator/sign-up-with-email-lambda/index.page.tsx b/examples/next/pages/ui/components/authenticator/sign-up-with-email-lambda/index.page.tsx
@@ -1,13 +1,18 @@
 import { Amplify } from 'aws-amplify';
 
-import { withAuthenticator } from '@aws-amplify/ui-react';
+import { withAuthenticator, Text } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
 Amplify.configure(awsExports);
 
-function App({ signOut }) {
-  return <button onClick={signOut}>Sign out</button>;
+function App({ signOut, user }) {
+  return (
+    <>
+      <Text>{user.attributes?.email}</Text>
+      <button onClick={signOut}>Sign out</button>
+    </>
+  );
 }
 
 export default withAuthenticator(App, {