Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Update override function calls reference to v6 #4872

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+60 −39
Open

fix: Update override function calls reference to v6 #4872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bc5ec5c
fix: update overried function calls to v6
nadetastic Dec 26, 2023
39d3adf
update sample signUp handler
nadetastic Dec 26, 2023
3513dda
fix spelling
nadetastic Dec 28, 2023
94fe27a
Add v5 column
nadetastic Jan 3, 2024
5268e38
Merge remote branch 'fix/override-function-calls' of https://github.c…
nadetastic Jan 3, 2024
0024ddf
add v5 column
nadetastic Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 14 additions & 8 deletions ...henticator/customization/customization.override-function-calls.react-native.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { TableCell, TableBody, TableHead, TableRow, Alert } from '@aws-amplify/u

## Override Function Calls

You can override the call to `signUp`, `signIn`, `confirmSignIn`, `confirmSignUp`, `forgotPassword` and `forgotPasswordSubmit` functions.
You can override the call to `signUp`, `signIn`, `confirmSignIn`, `confirmSignUp`, `resetPassword` and `confirmResetPassword` functions.
To override a call you must create a new `services` object with an `async` `handle*` function that returns an `aws-amplify` `Auth.*` promise.

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`.
Expand All @@ -20,7 +20,7 @@ This would be overriden like so:



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>
Expand All @@ -31,32 +31,38 @@ Each `handle*` function will return the neccessary values you'll need to make th
</TableHead>
<TableBody>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.signUp`</ResponsiveTableCell>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we still have customers using v5, we should keep both versions in the docs.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pushed a commit that adds a v5 column @reesscot how does this look?

<ResponsiveTableCell label="Function Call v6">`signUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.signUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, password, attributes }`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.signIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`signIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.signIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleSignIn` </ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, password}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.confirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`confirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.confirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleConfirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{user, code, mfaType}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.confirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`confirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.confirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleConfirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, code}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.forgotPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`resetPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.forgotPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleForgotPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.forgotPasswordSubmit`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`confirmResetPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.forgotPasswordSubmit`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleForgotPasswordSubmit`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, code, password}`</ResponsiveTableCell>
</TableRow>
Expand Down
20 changes: 13 additions & 7 deletions ...nents/authenticator/customization/customization.override-function-calls.web.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { TableCell, TableBody, TableHead, TableRow, Alert } from '@aws-amplify/u

## Override Function Calls

You can override the call to `signUp`, `signIn`, `confirmSignIn`, `confirmSignUp`, `forgotPassword` and `forgotPasswordSubmit` functions.
You can override the call to `signUp`, `signIn`, `confirmSignIn`, `confirmSignUp`, `resetPassword` and `confirmResetPassword` functions.
To override a call you must create a new `services` object with an `async` `handle*` function that returns an `aws-amplify` `Auth.*` promise.

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`.
Expand All @@ -31,32 +31,38 @@ Each `handle*` function will return the neccessary values you'll need to make th
</TableHead>
<TableBody>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.signUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`signUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.signUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, password, attributes }`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.signIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`signIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.signIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleSignIn` </ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, password}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.confirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`confirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.confirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleConfirmSignIn`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{user, code, mfaType}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.confirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`confirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.confirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleConfirmSignUp`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, code}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.forgotPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`resetPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.forgotPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleForgotPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username}`</ResponsiveTableCell>
</TableRow>
<TableRow>
<ResponsiveTableCell label="Function Call">`Auth.forgotPasswordSubmit`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v6">`confirmResetPassword`</ResponsiveTableCell>
<ResponsiveTableCell label="Function Call v5">`Auth.forgotPasswordSubmit`</ResponsiveTableCell>
<ResponsiveTableCell label="Override Name">`handleForgotPasswordSubmit`</ResponsiveTableCell>
<ResponsiveTableCell label="formData Properties">`{username, code, password}`</ResponsiveTableCell>
</TableRow>
Expand Down
19 changes: 11 additions & 8 deletions ...connected-components/authenticator/customization/overrides/username.angular.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,17 @@ _app.component.ts_

```js{14}
import { Component, OnInit } from '@angular/core';
import { Amplify, Auth } from 'aws-amplify';
import awsExports from './aws-exports';
import { Amplify } from 'aws-amplify';
import { signUp } from 'aws-amplify/auth'
import amplifyconfig from './amplifyconfiguration.json';

@Component({
selector: 'sign-up-with-email',
templateUrl: 'sign-up-with-email.component.html',
})
export class SignUpWithEmailComponent implements OnInit {
constructor() {
Amplify.configure(awsExports);
Amplify.configure(amplifyconfig);
}

services = {
Expand All @@ -39,13 +40,15 @@ export class SignUpWithEmailComponent implements OnInit {
// custom username
username = username.toLowerCase();
attributes.email = attributes.email.toLowerCase();
return Auth.signUp({
return signUp({
username,
password,
attributes,
autoSignIn: {
enabled: true,
},
options: {
userAttributes: {
...attributes
},
autoSignIn: true
}
});
},
};
Expand Down
19 changes: 11 additions & 8 deletions ...]/connected-components/authenticator/customization/overrides/username.react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
```jsx{8}
import { Amplify, Auth } from 'aws-amplify';
import { Amplify } from 'aws-amplify';
import { signUp } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
import amplifyconfig from './amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

export default function AuthenticatorWithEmail() {
const services = {
Expand All @@ -12,13 +13,15 @@ export default function AuthenticatorWithEmail() {
// custom username
username = username.toLowerCase();
attributes.email = attributes.email.toLowerCase();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add amend this to options.userAttributes.email = options.userAttributes.email.toLowerCase(); please?

return Auth.signUp({
return signUp({
username,
password,
attributes,
autoSignIn: {
enabled: true,
},
options: {
userAttributes: {
...attributes
},
autoSignIn: true
}
});
},
};
Expand Down
19 changes: 11 additions & 8 deletions ...rm]/connected-components/authenticator/customization/overrides/username.vue.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
```html
<script setup lang="ts">
import { Amplify, Auth } from 'aws-amplify';
import { Amplify } from 'aws-amplify';
import { signUp } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-vue';
import '@aws-amplify/ui-vue/styles.css';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
import amplifyconfig from './amplifyconfiguration';
Amplify.configure(amplifyconfig);

const services = {
async handleSignUp(formData) {
let { username, password, attributes } = formData;
// custom username
username = username.toLowerCase();
attributes.email = attributes.email.toLowerCase();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here I believe :)
https://github.com/aws-amplify/amplify-ui/pull/4872/files#r1522794298

return Auth.signUp({
return signUp({
username,
password,
attributes,
autoSignIn: {
enabled: true,
},
options: {
userAttributes: {
...attributes
},
autoSignIn: true
}
});
},
};
Expand Down