diff --git a/Readme.md b/Readme.md
index ad7ad7438d7..4610e6201fc 100644
--- a/Readme.md
+++ b/Readme.md
@@ -175,7 +175,7 @@ let mut a = String::from("a");
Videos can be added using the `` component and referencing a path to the video file. The video should be an `.mp4` file and should exist in the `/public` directory
```jsx
-
+
```
## Accessibility testing
diff --git a/cspell.json b/cspell.json
index 33fc3d5d2d9..fc2a062244a 100644
--- a/cspell.json
+++ b/cspell.json
@@ -1396,6 +1396,7 @@
"validationData",
"vanillajs",
"varchar",
+ "vendedlogs",
"verify.js",
"VerifyAuthChallengeResponse",
"VeriSign",
diff --git a/package.json b/package.json
index 0861e00620d..70d29dd6554 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
"@types/react": "^18.0.0",
"@types/url-parse": "^1.4.3",
"@typescript-eslint/eslint-plugin": "^6.13.1",
- "axios": "^1.3.4",
+ "axios": "^1.7.4",
"cheerio": "^1.0.0-rc.12",
"classnames": "^2.3.2",
"cross-env": "^7.0.3",
@@ -89,7 +89,7 @@
"loader-utils": "2.0.4",
"minimatch": "3.1.2",
"decode-uri-component": "0.2.1",
- "fast-xml-parser": "4.2.5",
+ "**/fast-xml-parser": "4.4.1",
"semver": "7.5.2",
"tough-cookie": "4.1.3",
"aws-cdk-lib": "2.80.0",
diff --git a/public/images/gen2/fullstack-branching/monorepo.png b/public/images/gen2/fullstack-branching/monorepo.png
index 91320edce10..05a3563233f 100644
Binary files a/public/images/gen2/fullstack-branching/monorepo.png and b/public/images/gen2/fullstack-branching/monorepo.png differ
diff --git a/public/images/gen2/manage/data-manager.mp4 b/public/images/gen2/manage/data-manager.mp4
new file mode 100644
index 00000000000..f7b1ce86735
Binary files /dev/null and b/public/images/gen2/manage/data-manager.mp4 differ
diff --git a/public/images/gen2/manage/storage-manager.mp4 b/public/images/gen2/manage/storage-manager.mp4
new file mode 100644
index 00000000000..8612929f00b
Binary files /dev/null and b/public/images/gen2/manage/storage-manager.mp4 differ
diff --git a/public/images/gen2/manage/user-manager.mp4 b/public/images/gen2/manage/user-manager.mp4
new file mode 100644
index 00000000000..fc40fccf8ec
Binary files /dev/null and b/public/images/gen2/manage/user-manager.mp4 differ
diff --git a/src/components/ExternalLink/__tests__/ExternalLink.test.tsx b/src/components/ExternalLink/__tests__/ExternalLink.test.tsx
index 8986df21080..8d81e7520eb 100644
--- a/src/components/ExternalLink/__tests__/ExternalLink.test.tsx
+++ b/src/components/ExternalLink/__tests__/ExternalLink.test.tsx
@@ -14,20 +14,27 @@ describe('ExternalLink', () => {
it('should render the ExternalLink component', async () => {
render(component);
const externalLink = await screen.getByRole('link', {
- name: 'Click Here!'
+ name: '(opens in new tab)'
});
+ const externalLinkText = await screen.findByText('Click Here!');
- expect(externalLink).toBeInTheDocument();
+ await waitFor(() => {
+ expect(externalLink).toBeInTheDocument();
+ expect(externalLinkText).toBeInTheDocument();
+ });
});
it('should open external links in a new window', async () => {
render(component);
const externalLink = await screen.getByRole('link', {
- name: 'Click Here!'
+ name: '(opens in new tab)'
});
+ const externalLinkText = await screen.findByText('Click Here!');
expect(externalLink).toHaveAttribute('rel', 'noopener noreferrer');
expect(externalLink).toHaveAttribute('target', '_blank');
+ expect(externalLinkText).toHaveAttribute('rel', 'noopener noreferrer');
+ expect(externalLinkText).toHaveAttribute('target', '_blank');
});
it('should trackExternalLink on click', async () => {
diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
index 54c4970851f..87be1475abf 100644
--- a/src/components/ExternalLink/index.tsx
+++ b/src/components/ExternalLink/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
import { trackExternalLink } from '../../utils/track';
type ExternalLinkProps = {
@@ -15,15 +15,27 @@ const ExternalLink: React.FC = ({
href,
className
}) => {
+ const [label, setLabel] = React.useState('');
+ const linkRef = useRef(null);
+
+ useEffect(() => {
+ if (linkRef.current) {
+ const text = linkRef.current.innerText;
+ setLabel(text ? text : '');
+ }
+ }, []);
+
return (
{
trackLink(href);
}}
+ ref={linkRef}
>
{children}
diff --git a/src/components/ExternalLinkButton/ExternalLinkButton.tsx b/src/components/ExternalLinkButton/ExternalLinkButton.tsx
index cdfca20c12a..daf8d5b4f3a 100644
--- a/src/components/ExternalLinkButton/ExternalLinkButton.tsx
+++ b/src/components/ExternalLinkButton/ExternalLinkButton.tsx
@@ -1,6 +1,8 @@
import { Button, ButtonProps } from '@aws-amplify/ui-react';
import { IconExternalLink } from '../Icons';
import { trackExternalLink } from '../../utils/track';
+import { useEffect, useRef } from 'react';
+import React from 'react';
interface ExternalLinkButtonProps {
variation?: ButtonProps['variation'];
@@ -21,6 +23,16 @@ export const ExternalLinkButton = ({
children,
className
}: ExternalLinkButtonProps) => {
+ const [label, setLabel] = React.useState('');
+ const buttonRef = useRef(null);
+
+ useEffect(() => {
+ if (buttonRef.current) {
+ const text = buttonRef.current.innerText;
+ setLabel(text ? text : '');
+ }
+ }, []);
+
return (
diff --git a/src/components/ExternalLinkButton/__tests__/ExternalLinkButton.test.tsx b/src/components/ExternalLinkButton/__tests__/ExternalLinkButton.test.tsx
index 08864e60f8e..d495a495b7a 100644
--- a/src/components/ExternalLinkButton/__tests__/ExternalLinkButton.test.tsx
+++ b/src/components/ExternalLinkButton/__tests__/ExternalLinkButton.test.tsx
@@ -18,10 +18,15 @@ describe('ExternalLinkButton', () => {
it('should render the ExternalLinkButton component', async () => {
render(component);
- const externalLinkButtonNode = await screen.findByRole('link', {
- name: 'Click Here!'
+ const externalLinkButtonNode = await screen.getByRole('link', {
+ name: '(opens in new tab)'
+ });
+ const externalLinkButtonNodeText = await screen.findByText('Click Here!');
+
+ await waitFor(() => {
+ expect(externalLinkButtonNode).toBeInTheDocument();
+ expect(externalLinkButtonNodeText).toBeInTheDocument();
});
- expect(externalLinkButtonNode).toBeInTheDocument();
});
it('should render the ExternalLink icon', async () => {
diff --git a/src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap b/src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
index edd66b76623..bde562993a2 100644
--- a/src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
+++ b/src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Footer should render component that matches snapshot 1`] = `""`;
+exports[`Footer should render component that matches snapshot 1`] = `""`;
diff --git a/src/components/GlobalNav/__tests__/GlobalNav.test.tsx b/src/components/GlobalNav/__tests__/GlobalNav.test.tsx
index 9de9a3f5ae7..98c210937be 100644
--- a/src/components/GlobalNav/__tests__/GlobalNav.test.tsx
+++ b/src/components/GlobalNav/__tests__/GlobalNav.test.tsx
@@ -29,7 +29,9 @@ describe('GlobalNav', () => {
it('should render the GlobalNav component', async () => {
render(component);
- const link = await screen.findByRole('link', { name: 'About AWS Amplify' });
+ const link = await screen.findByRole('link', {
+ name: 'About AWS Amplify (opens in new tab)'
+ });
expect(link).toBeInTheDocument();
});
});
diff --git a/src/components/GlobalNav/components/NavMenuLink.tsx b/src/components/GlobalNav/components/NavMenuLink.tsx
index 31f4d1a64d1..85a842867e5 100644
--- a/src/components/GlobalNav/components/NavMenuLink.tsx
+++ b/src/components/GlobalNav/components/NavMenuLink.tsx
@@ -40,6 +40,7 @@ export function NavMenuLink({
return (
diff --git a/src/components/LinkCard/LinkCard.tsx b/src/components/LinkCard/LinkCard.tsx
index ac626b351f8..b4e4c91d7f0 100644
--- a/src/components/LinkCard/LinkCard.tsx
+++ b/src/components/LinkCard/LinkCard.tsx
@@ -16,7 +16,12 @@ const LinkCard: React.FC = ({
}) => {
return (
href && (
-
+
{icon()}{children}
diff --git a/src/components/LinkCards/__tests__/LinkCards.test.tsx b/src/components/LinkCards/__tests__/LinkCards.test.tsx
index e6edf6ba7e2..1c841d50d30 100644
--- a/src/components/LinkCards/__tests__/LinkCards.test.tsx
+++ b/src/components/LinkCards/__tests__/LinkCards.test.tsx
@@ -7,7 +7,7 @@ describe('LinkCards', () => {
it('should render the LinkCards component', async () => {
render(component);
const linkCardNode = await screen.findByRole('link', {
- name: 'React Libraries on GitHub'
+ name: 'React Libraries on GitHub (opens in new tab)'
});
expect(linkCardNode).toBeInTheDocument();
});
@@ -15,13 +15,13 @@ describe('LinkCards', () => {
it('should link each card to external href', async () => {
render(component);
const githubCard = await screen.findByRole('link', {
- name: 'React Libraries on GitHub'
+ name: 'React Libraries on GitHub (opens in new tab)'
});
const discordCard = await screen.findByRole('link', {
- name: 'Amplify Discord'
+ name: 'Amplify Discord (opens in new tab)'
});
const learnCard = await screen.findByRole('link', {
- name: 'Amplify Learn'
+ name: 'Amplify Learn (opens in new tab)'
});
expect(githubCard.href).toBe('https://github.com/aws-amplify/amplify-ui');
diff --git a/src/components/MDXComponents/__tests__/MDXLink.test.tsx b/src/components/MDXComponents/__tests__/MDXLink.test.tsx
index 4d8261e956f..73fc76ce176 100644
--- a/src/components/MDXComponents/__tests__/MDXLink.test.tsx
+++ b/src/components/MDXComponents/__tests__/MDXLink.test.tsx
@@ -16,7 +16,7 @@ const routerMock = {
jest.mock('next/router', () => routerMock);
describe('MDXLink', () => {
- it('should render external link', () => {
+ it('should render external link', async () => {
const externalUrl = 'https://amazon.com';
const linkText = 'External Site';
@@ -26,10 +26,16 @@ describe('MDXLink', () => {
);
- const linkElement = screen.getByRole('link', { name: linkText });
+ const linkElement = await screen.getByRole('link', {
+ name: '(opens in new tab)'
+ });
+ const linkElementText = await screen.findByText('External Site');
expect(linkElement).toBeInTheDocument();
expect(linkElement).toHaveAttribute('href', externalUrl);
expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');
+ expect(linkElementText).toBeInTheDocument();
+ expect(linkElementText).toHaveAttribute('href', externalUrl);
+ expect(linkElementText).toHaveAttribute('rel', 'noopener noreferrer');
});
it('should render internal link', () => {
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 4856308b938..e49cbe2510f 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -156,6 +156,7 @@ export function MenuItem({
className={`menu__list-item__link menu__list-item__link--external ${listItemLinkStyle}`}
href={pageNode.route}
isExternal={true}
+ aria-label={pageNode.title + ' (opens in new tab)'}
onClick={onLinkClick}
>
-
+
Edit on GitHub
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 3d528f2d8ba..450f2bee60e 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -113,7 +113,8 @@ export const Modal = ({ isGen1 }: ModalProps) => {
variation="primary"
className="modal-action modal-action--primary"
>
- Learn more
+ Learn more about Gen 2
+
diff --git a/src/components/PlatformNavigator/index.tsx b/src/components/PlatformNavigator/index.tsx
index 59a0559c039..b5bed713cee 100644
--- a/src/components/PlatformNavigator/index.tsx
+++ b/src/components/PlatformNavigator/index.tsx
@@ -51,9 +51,10 @@ export function PlatformNavigator({
{platformItem.icon}
{platformTitle}
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
index 53d9b966f4e..a8b3c06e2e5 100644
--- a/src/components/Video/Video.tsx
+++ b/src/components/Video/Video.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
import { View } from '@aws-amplify/ui-react';
interface VideoProps {
+ description: string;
autoPlay?: boolean;
muted?: boolean;
loop?: true;
@@ -14,10 +15,9 @@ export const reducedMotionMediaQuery =
/**
* @description The Video component defaults to a muted, auto play video.
- * Currently, we also assume the surrounding content will adequately describe
- * the video so we default to aria-hidden="true".
*/
export const Video = ({
+ description,
autoPlay = true,
muted = true,
loop = true,
@@ -25,6 +25,11 @@ export const Video = ({
testId,
...rest
}: VideoProps) => {
+ if (!description) {
+ throw new Error(
+ `
@@ -147,12 +141,9 @@ export default function HowItWorks() {
You collect an{' '}
-
+
Amplify badge
- {' '}
+ {' '}
for your first contribution or make progress toward the Intermediate
and Advanced badges!
diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs
index e70f57cce61..cc8117d3ed7 100644
--- a/src/directory/directory.mjs
+++ b/src/directory/directory.mjs
@@ -39,7 +39,7 @@ export const directory = {
path: 'src/pages/[platform]/start/manual-installation/index.mdx'
},
{
- path: 'src/pages/[platform]/start/connect-existing-aws-resources/index.mdx'
+ path: 'src/pages/[platform]/start/connect-to-aws-resources/index.mdx'
},
{
path: 'src/pages/[platform]/start/kotlin-coroutines/index.mdx'
@@ -136,6 +136,9 @@ export const directory = {
},
{
path: 'src/pages/[platform]/build-a-backend/auth/manage-users/manage-devices/index.mdx'
+ },
+ {
+ path: 'src/pages/[platform]/build-a-backend/auth/manage-users/with-amplify-console/index.mdx'
}
]
},
@@ -311,6 +314,9 @@ export const directory = {
},
{
path: 'src/pages/[platform]/build-a-backend/data/override-resources/index.mdx'
+ },
+ {
+ path: 'src/pages/[platform]/build-a-backend/data/manage-with-amplify-console/index.mdx'
}
]
},
@@ -402,6 +408,9 @@ export const directory = {
},
{
path: 'src/pages/[platform]/build-a-backend/storage/data-usage/index.mdx'
+ },
+ {
+ path: 'src/pages/[platform]/build-a-backend/storage/manage-with-amplify-console/index.mdx'
}
]
},
diff --git a/src/fragments/lib/auth/common/device_features/common.mdx b/src/fragments/lib/auth/common/device_features/common.mdx
index 034c635a0aa..bb218fb4228 100644
--- a/src/fragments/lib/auth/common/device_features/common.mdx
+++ b/src/fragments/lib/auth/common/device_features/common.mdx
@@ -15,7 +15,6 @@ The [device tracking and remembering](https://aws.amazon.com/blogs/mobile/tracki
**Note:** The [device tracking and remembering](https://aws.amazon.com/blogs/mobile/tracking-and-remembering-devices-using-amazon-cognito-your-user-pools/) features are not available if any of the following conditions are met:
- the federated OAuth flow with Cognito User Pools or Hosted UI is used, or
-- the User Pool uses `email/phone_number` or `alias` sign-in method, or
- when the `signIn` API uses the `USER_PASSWORD_AUTH` as the `authFlowType`.
diff --git a/src/fragments/lib/push-notifications/common/getting_started/cross-platform-prereq.mdx b/src/fragments/lib/push-notifications/common/getting_started/cross-platform-prereq.mdx
index ad49325c223..3fdb66aed6e 100644
--- a/src/fragments/lib/push-notifications/common/getting_started/cross-platform-prereq.mdx
+++ b/src/fragments/lib/push-notifications/common/getting_started/cross-platform-prereq.mdx
@@ -33,6 +33,7 @@ import fcmPreReq from '/src/fragments/lib/push-notifications/android/getting_sta
### Applying the Google services plugin
+
The Firebase documentation directs you to add the Google services plugin to your app `build.gradle` using the [Gradle plugins DSL](https://docs.gradle.org/current/userguide/plugins.html#sec:plugins_block). However, we recommend you continue to use the [Legacy Plugin Application](https://docs.gradle.org/current/userguide/plugins.html#sec:old_plugin_application) instead:
```groovy
@@ -41,5 +42,17 @@ apply plugin: 'com.google.gms.google-services'
If you prefer using the plugins DSL, you should add the `plugins` block to the very top of the file or you may experience issues when building your app for Android.
+
+
+
+
+The Firebase documentation directs you to add the Google services plugin to your app `settings.gradle` using the [Gradle plugins DSL](https://docs.gradle.org/current/userguide/plugins.html#sec:plugins_block). However, we recommend you continue to use the [Legacy Plugin Application](https://docs.gradle.org/current/userguide/plugins.html#sec:old_plugin_application) instead:
+
+```groovy
+id "com.google.gms:google-services" version "4.3.14" apply false
+```
+
+
+
diff --git a/src/pages/[platform]/build-a-backend/auth/concepts/multi-factor-authentication/index.mdx b/src/pages/[platform]/build-a-backend/auth/concepts/multi-factor-authentication/index.mdx
index fb326a52f93..122d25d0f6b 100644
--- a/src/pages/[platform]/build-a-backend/auth/concepts/multi-factor-authentication/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/concepts/multi-factor-authentication/index.mdx
@@ -890,7 +890,6 @@ Remembering a device is useful in conjunction with MFA because it allows the sec
**Note:** The [device tracking and remembering](https://aws.amazon.com/blogs/mobile/tracking-and-remembering-devices-using-amazon-cognito-your-user-pools/) features are not available if any of the following conditions are met:
- the federated OAuth flow with Cognito User Pools or Hosted UI is used, or
-- the User Pool uses `email`, `phone_number`, or alias attributes as sign-in methods
- when the `signIn` API uses the `USER_PASSWORD_AUTH` as the `authFlowType`.
diff --git a/src/pages/[platform]/build-a-backend/auth/customize-auth-lifecycle/email-customization/index.mdx b/src/pages/[platform]/build-a-backend/auth/customize-auth-lifecycle/email-customization/index.mdx
index 430e84aeb8e..eaa5f6a4a5a 100644
--- a/src/pages/[platform]/build-a-backend/auth/customize-auth-lifecycle/email-customization/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/customize-auth-lifecycle/email-customization/index.mdx
@@ -31,9 +31,32 @@ export function getStaticProps() {
{/* verification email (basic) */}
{/* verification email with react.email/jsx.email */}
+## Customize the Verification Email
+
By default, Amplify Auth resources are scaffolded with email as the default method for your users to sign in. When you users sign up they receive a verification email to confirm their ownership of the email they specified during sign-up. Emails such as the verification email can be customized with your app's brand identity.
-To get started, modify `email: true` to an object to begin customizing its default behavior:
+To get started, change the `email` attribute of `loginWith` from `true` to an object to begin customizing its default behavior:
+
+```diff title="amplify/auth/resource.ts"
+import { defineAuth } from "@aws-amplify/backend"
+
+export const auth = defineAuth({
+ loginWith: {
+- email: true,
++ email: {
++ verificationEmailStyle: "CODE",
++ verificationEmailSubject: "Welcome to my app!",
++ verificationEmailBody: (createCode) => `Use this code to confirm your account: ${createCode()}`,
++ },
+ },
+})
+```
+
+## Customize the Invitation Email
+
+In some cases, you may [set up a user account on behalf of a user in the Amplify console](/[platform]/build-a-backend/auth/manage-users/with-amplify-console/). In this case, Amplify Auth will send an invitation email to the user welcoming them to your application. This email includes a brief welcome message, along with the email address they can log in with and the temporary password you've set up for them.
+
+If you'd like to customize that email, you can override the `userInvitation` attribute of the `email` object:
```diff title="amplify/auth/resource.ts"
import { defineAuth } from "@aws-amplify/backend"
@@ -42,14 +65,22 @@ export const auth = defineAuth({
loginWith: {
- email: true,
+ email: {
++ // can be used in conjunction with a customized welcome email as well
+ verificationEmailStyle: "CODE",
+ verificationEmailSubject: "Welcome to my app!",
+ verificationEmailBody: (createCode) => `Use this code to confirm your account: ${createCode()}`,
++ userInvitation: {
++ emailSubject: "Welcome to my app!",
++ emailBody: (user, code) =>
++ `We're happy to have you! You can now login with username ${user()} and temporary password ${code()}`,
++ },
+ },
},
})
```
+Note that when using the `user` and `code` arguments of the `emailBody` function, `user` and `code` are **functions** which must be called. Failure to call them will result in an error when your sandbox deploys.
+
{/* ## With react.email */}
{/* ## With jsx.email */}
diff --git a/src/pages/[platform]/build-a-backend/auth/manage-users/manage-devices/index.mdx b/src/pages/[platform]/build-a-backend/auth/manage-users/manage-devices/index.mdx
index 7c2451af61e..f0e6cf54310 100644
--- a/src/pages/[platform]/build-a-backend/auth/manage-users/manage-devices/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/manage-users/manage-devices/index.mdx
@@ -270,7 +270,7 @@ func forgetDevice() async {
print("Forget device failed with error \(error)")
} catch {
print("Unexpected error: \(error)")
- }
+ }
}
```
@@ -326,6 +326,8 @@ Future fetchAllDevices() async {
```
+
+
@@ -426,6 +428,25 @@ func fetchDevices() -> AnyCancellable {
+
+
+## Fetch the current device
+
+You can fetch the current device by using the following:
+
+```dart
+Future fetchCurrentUserDevice() async {
+ try {
+ final device = await Amplify.Auth.fetchCurrentDevice();
+ safePrint('Device: $device');
+ } on AuthException catch (e) {
+ safePrint('Get current device failed with error: $e');
+ }
+}
+```
+
+
+
You can now set up devices to be remembered, forgotten, and fetched.
{/* user agents */}
diff --git a/src/pages/[platform]/build-a-backend/auth/manage-users/with-amplify-console/index.mdx b/src/pages/[platform]/build-a-backend/auth/manage-users/with-amplify-console/index.mdx
new file mode 100644
index 00000000000..3dfe33763be
--- /dev/null
+++ b/src/pages/[platform]/build-a-backend/auth/manage-users/with-amplify-console/index.mdx
@@ -0,0 +1,81 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+ title: 'Manage users with Amplify console',
+ description:
+ 'Manage applications Cognito users and groups with Amplify console',
+ platforms: [
+ 'android',
+ 'angular',
+ 'flutter',
+ 'javascript',
+ 'nextjs',
+ 'react',
+ 'react-native',
+ 'swift',
+ 'vue'
+ ]
+};
+
+export function getStaticPaths() {
+ return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps(context) {
+ return {
+ props: {
+ platform: context.params.platform,
+ meta
+ }
+ };
+}
+
+The **User management** page in the Amplify console provides a user-friendly interface for managing your application's users. You can create and manage users and groups, edit user attributes, and suspend users.
+
+If you have not yet created an **auth** resource, visit the [Auth setup guide](/[platform]/build-a-backend/auth/set-up-auth/).
+
+## Access User management
+
+After you've deployed your auth resource, you can access the manager on Amplify Console.
+
+1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
+2. Select the branch you would like to access.
+3. Select **Authentication** from the left navigation bar.
+4. Then, select **User management**.
+
+
+
+### To create a user
+
+1. On the **User management** page, select **Users** tab.
+2. Select **Create user**.
+3. In the **Create user** window, for Unique identifier enter a email address, username, or phone number. For Temporary password enter a password.
+4. Choose Create user.
+
+
+
+A user can be confirmed by using the [pre-built UI components](/[platform]/build-a-backend/auth/connect-your-frontend/using-the-authenticator/) and [Amplify libraries](/[platform]/build-a-backend/auth/connect-your-frontend/sign-up/).
+
+
+
+## To create a group
+
+1. On the **User management** page, choose the **Groups** tab and then choose **Create group**.
+2. In the **Create group** window, for **Title** enter a name for the group.
+3. Choose **Create group**.
+
+
+## To add a users to a group
+
+1. On the **User management** page, choose the **Groups** tab.
+2. Select the name of the group to add users to.
+3. Choose **Add users**.
+4. In the **Add users to group** window, choose how you want to search for users to add from the **Search** menu. You can choose _Email_, _Phone number_, or _Username_.
+5. Add one user or multiple users to add to the group and then choose **Add users**.
+
+## To delete a group
+
+1. On the **User management** page, choose the **Groups** tab.
+2. In the **Groups** section, select the name of the group to delete.
+3. Choose **Delete**.
+4. A confirmation window is displayed. Enter _Delete_ and choose, **Confirm deletion**.
diff --git a/src/pages/[platform]/build-a-backend/auth/use-existing-cognito-resources/index.mdx b/src/pages/[platform]/build-a-backend/auth/use-existing-cognito-resources/index.mdx
index 100830f1c6a..b31966b1d01 100644
--- a/src/pages/[platform]/build-a-backend/auth/use-existing-cognito-resources/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/use-existing-cognito-resources/index.mdx
@@ -29,113 +29,20 @@ export function getStaticProps(context) {
};
}
-Amplify Auth can be configured to use an existing Amazon Cognito user pool and identity pool. If you are in a team setting or part of a company that has previously created auth resources, you have a few different options to configure your application to use existing auth resources.
-
-If you are using Amplify to build your backend, it is recommended to [add a reference to your auth resource using `backend.addOutput`](#use-auth-resources-with-an-amplify-backend).
-
-If you do not use Amplify to build your backend, you can [configure the client library directly](#use-auth-resources-without-an-amplify-backend).
+Amplify Auth can be configured to use an existing Amazon Cognito user pool and identity pool. If you are in a team setting or part of a company that has previously created auth resources, you can [configure the client library directly](#use-auth-resources-without-an-amplify-backend), or maintain references with [AWS Cloud Development Kit (AWS CDK)](https://aws.amazon.com/cdk/) in your Amplify backend.
-**Note:** when using existing auth resources, it may be necessary to add policies or permissions for your authenticated and unauthenticated IAM roles. These changes must be performed manually using the [AWS Cloud Development Kit (AWS CDK)](https://aws.amazon.com/cdk/)
-
-
-
-## Use auth resources with an Amplify backend
-
-The easiest way to get started with your existing resource is to use `backend.addOutput` to surface auth configuration to `amplify_outputs.json` automatically. In it's simplest form:
-
-```ts title="amplify/backend.ts"
-import { defineBackend } from "@aws-amplify/backend"
-
-/**
- * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
- */
-const backend = defineBackend({})
-
-backend.addOutput({
- auth: {
- aws_region: "",
- user_pool_id: "",
- user_pool_client_id: "",
- identity_pool_id: "",
- username_attributes: ["email"],
- standard_required_attributes: ["email"],
- user_verification_types: ["email"],
- unauthenticated_identities_enabled: true,
- password_policy: {
- min_length: 8,
- require_lowercase: true,
- require_uppercase: true,
- require_numbers: true,
- require_symbols: true,
- }
- }
-})
-```
-
-
-
-**Warning:** if you are creating an auth resource with `defineAuth`, you cannot override the default auth configuration automatically surfaced to `amplify_outputs.json` by Amplify.
+**Note:** when using existing auth resources, it may be necessary to add additional policies or permissions for your authenticated and unauthenticated IAM roles. These changes must be performed manually.
-You can also use the CDK to dynamically reference existing resources, and use metadata from that resource to set up IAM policies for other resources, or reference as an authorizer for a custom REST API:
-
-```ts title="amplify/backend.ts"
-import { defineBackend } from "@aws-amplify/backend"
-import { UserPool, UserPoolClient } from "aws-cdk-lib/aws-cognito"
-
-/**
- * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
- */
-const backend = defineBackend({})
-
-const authStack = backend.createStack("ExistingAuth")
-const userPool = UserPool.fromUserPoolId(
- authStack,
- "UserPool",
- ""
-)
-const userPoolClient = UserPoolClient.fromUserPoolClientId(
- authStack,
- "UserPoolClient",
- ""
-)
-// Cognito Identity Pools can be referenced directly
-const identityPoolId = ""
-
-backend.addOutput({
- auth: {
- aws_region: authStack.region,
- user_pool_id: userPool.userPoolId,
- user_pool_client_id: userPoolClient.userPoolClientId,
- identity_pool_id: identityPoolId,
- // this property configures the Authenticator's sign-up/sign-in views
- username_attributes: ["email"],
- // this property configures the Authenticator's sign-up/sign-in views
- standard_required_attributes: ["email"],
- // this property configures the Authenticator confirmation views
- user_verification_types: ["email"],
- unauthenticated_identities_enabled: true,
- // this property configures the validation for the Authenticator's password field
- password_policy: {
- min_length: 8,
- require_lowercase: true,
- require_uppercase: true,
- require_numbers: true,
- require_symbols: true,
- },
- },
-})
-```
-
## Use auth resources without an Amplify backend
-Alternatively, you can use existing resources without an Amplify backend.
-
+You can use existing resources without an Amplify backend by configuring the client library directly.
+
```ts title="src/main.ts"
import { Amplify } from "aws-amplify"
@@ -178,7 +85,6 @@ Configuring the mobile client libraries directly is not supported, however you c
-{/* pending hosted outputs schema */}
```json title="amplify_outputs.json"
{
"version": "1",
@@ -204,6 +110,14 @@ Configuring the mobile client libraries directly is not supported, however you c
+## Use auth resources with an Amplify backend
+
+
+
+**Warning:** Amplify resources do not support including auth configurations by referencing with CDK. We are currently working to improve this experience by providing first-class support for referencing existing auth resources. [View the RFC for `referenceAuth` for more details](https://github.com/aws-amplify/amplify-backend/issues/1548)
+
+
+
## Next steps
- [Learn how to connect your frontend](/[platform]/build-a-backend/auth/connect-your-frontend/)
diff --git a/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx
index 5b7f0242fd1..6dd1e49114e 100644
--- a/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx
@@ -195,9 +195,9 @@ const { data: events } = await client.models.event.list()
When deploying your app to production, you need to [add the database connection string as a secret](/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/#set-secrets). Make sure to add the appropriate database connection string with the same secret name you used in the sandbox environment. For example, we used `SQL_CONNECTION_STRING` above.
-
## Rename generated models and fields
diff --git a/src/pages/[platform]/build-a-backend/data/custom-business-logic/search-and-aggregate-queries/index.mdx b/src/pages/[platform]/build-a-backend/data/custom-business-logic/search-and-aggregate-queries/index.mdx
index e93a053e4a2..69d4417ab80 100644
--- a/src/pages/[platform]/build-a-backend/data/custom-business-logic/search-and-aggregate-queries/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/custom-business-logic/search-and-aggregate-queries/index.mdx
@@ -446,7 +446,7 @@ const indexMapping = {
id: {
type: "keyword",
},
- isDone: {
+ done: {
type: "boolean",
},
content: {
@@ -843,7 +843,7 @@ dynamodb-pipeline:
// highlight-start
// Create a CloudWatch log group
const logGroup = new logs.LogGroup(dataStack, "LogGroup", {
- logGroupName: "/aws/vended-logs/OpenSearchService/pipelines/1",
+ logGroupName: "/aws/vendedlogs/OpenSearchService/pipelines/1",
removalPolicy: RemovalPolicy.DESTROY,
});
diff --git a/src/pages/[platform]/build-a-backend/data/manage-with-amplify-console/index.mdx b/src/pages/[platform]/build-a-backend/data/manage-with-amplify-console/index.mdx
new file mode 100644
index 00000000000..4c497d35762
--- /dev/null
+++ b/src/pages/[platform]/build-a-backend/data/manage-with-amplify-console/index.mdx
@@ -0,0 +1,89 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+ title: 'Manage Data with Amplify console',
+ description:
+ 'Manage GraphQL data with Amplify console',
+ platforms: [
+ 'android',
+ 'angular',
+ 'flutter',
+ 'javascript',
+ 'nextjs',
+ 'react',
+ 'react-native',
+ 'swift',
+ 'vue'
+ ]
+};
+
+export function getStaticPaths() {
+ return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps(context) {
+ return {
+ props: {
+ platform: context.params.platform,
+ meta
+ }
+ };
+}
+
+The **Data manager** page in the Amplify Console offers a user-friendly interface for managing the backend GraphQL API data of an application. It enables real-time creation and updates of application data, eliminating the need to build separate admin views.
+
+If you have not yet created a **data** resource, visit the [Data setup guide](/[platform]/build-a-backend/data/set-up-data/).
+
+## Access Data manager
+
+After you've deployed your data resource, you can access the manager on Amplify console.
+
+1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
+2. Select the branch you would like to access.
+3. Select **Data** from the left navigation bar.
+4. Then, select **Data manager**.
+
+
+
+### To create a record
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown. For this example, we are using a *Todo* table.
+2. Select **Create Todo**.
+3. In the **Add Todo** pane, specify your custom values for the fields in the table. For example, enter *my first todo* for the *Content* field and toggle the *Is done* field.
+4. Select **Submit**.
+
+### To update a record
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. From the list of records, select a record you want to update.
+3. In the **Edit Todo** pane, make any changes to your record, and then select **Submit**.
+
+### To delete a record(s)
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. From the list of records, select the checkbox to the left of the record(s) you want to delete.
+3. Select the **Actions** dropdown, and then select **delete item(s)** .
+
+### To Seed records
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. Select the **Actions** dropdown and then select **Auto-generate data**.
+3. In the **Auto-generate data** pane, specify how many rows of data you want to generate and constraints for the generated data.
+4. Then select **Generate data**
+
+You can generate up to 100 records at a time.
+
+
+
+ Seed data cannot be generated for tables that have the following field types: AWSPhone, Enum, Custom Type, or Relationship
+
+
+
+### To download records
+
+1. On the **Data manager** page, select a table from the **Select table** dropdown.
+2. Select the **Actions** dropdown.
+3. Here you have two options for downloading data.
+ - Choose **Download selected items (.csv)** to download only the selected rows of data.
+ - Choose **Download all items (.csv)** to download all rows of records on the currently selected table.
+4. Once you have selected a download option, your data should immediately start downloading as a CSV file.
diff --git a/src/pages/[platform]/build-a-backend/q-developer/index.mdx b/src/pages/[platform]/build-a-backend/q-developer/index.mdx
index 7a32fc6b863..bc6807f33b7 100644
--- a/src/pages/[platform]/build-a-backend/q-developer/index.mdx
+++ b/src/pages/[platform]/build-a-backend/q-developer/index.mdx
@@ -81,7 +81,7 @@ import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
**Step 3:** Select the inline code suggestion generated by Amazon Q developer. The inline code suggestion feature assists you in defining the schema and hover over the output to select from other options.
-
+
diff --git a/src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx b/src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx
index 4adeda331c6..085f9aa10d6 100644
--- a/src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx
@@ -66,11 +66,48 @@ Cross identity ID copying is only allowed if the destination path has the the ri
-### More `copy` options
+## Specify a bucket or copy across buckets / regions
-Option | Type | Description | Reference Links |
-| -- | -- | ----------- | -- |
-| useAccelerateEndpoint | boolean | Whether to use accelerate endpoint. | [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
+You can also perform an `copy` operation to a specific bucket by providing the `bucket` option. This option can either be a string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
+
+```javascript
+import { copy } from 'aws-amplify/storage';
+
+const copyFile = async () => {
+ try {
+ const response = await copy({
+ source: {
+ path: 'album/2024/1.jpg',
+ // Specify a target bucket using name assigned in Amplify Backend
+ // or bucket name from console and associated region
+ bucket: 'assignedNameInAmplifyBackend'
+ },
+ destination: {
+ path: 'shared/2024/1.jpg',
+ // Specify a target bucket using name assigned in Amplify Backend
+ // or bucket name from console and associated region
+ bucket: {
+ bucketName: 'generated-second-bucket-name',
+ region: 'us-east-2'
+ }
+ }
+ });
+ } catch (error) {
+ console.error('Error', err);
+ }
+};
+```
+
+
+In order to copy to or from a bucket other than your default, both source and destination must have `bucket` explicitly defined.
+
+
+## Copy `source` and `destination` options
+
+Option | Type | Default | Description |
+| -- | :--: | :--: | ----------- |
+| path | string \| (\{ identityId \}) => string | Required | A string or callback that represents the path in source and destination bucket to copy the object to or from |
+| bucket | string \| \{ bucketName: string; region: string; \} | Default bucket and region from Amplify configuration | A string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
Read more at [Configure additional storage buckets](/[platform]/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets). |
@@ -92,7 +129,7 @@ Future copy() async {
}
```
-### More `copy` options
+## More `copy` options
Option | Type | Description |
| -- | -- | ----------- |
diff --git a/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx b/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx
index b2a3a6fb994..a269f6337ca 100644
--- a/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx
@@ -70,16 +70,10 @@ import { getUrl } from 'aws-amplify/storage';
const linkToStorageFile = await getUrl({
path: "album/2024/1.jpg",
// Alternatively, path: ({identityId}) => `album/{identityId}/1.jpg`
- options: {
- validateObjectExistence?: false, // defaults to false
- expiresIn?: 20 // validity of the URL, in seconds. defaults to 900 (15 minutes) and maxes at 3600 (1 hour)
- useAccelerateEndpoint: true; // Whether to use accelerate endpoint.
- },
});
console.log('signed URL: ', linkToStorageFile.url);
console.log('URL expires at: ', linkToStorageFile.expiresAt);
```
-
Inside your template or JSX code, you can use the `url` property to create a link to the file:
```tsx
@@ -94,13 +88,34 @@ This function does not check if the file exists by default. As result, the signe
-### More `getUrl` options
+### More getUrl options
-Option | Type | Description |
-| -- | -- | ----------- |
-| useAccelerateEndpoint | boolean | Whether to use accelerate endpoint.
Read more at [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) | |
-| validateObjectExistence | boolean | Whether to head object to make sure the object existence before downloading. Defaults to false |
-| expiresIn | number | Number of seconds till the URL expires.
The expiration time of the presigned url is dependent on the session and will max out at 1 hour. |
+The behavior of the `getUrl` API can be customized by passing in options.
+
+```typescript
+import { getUrl } from 'aws-amplify/storage';
+
+const linkToStorageFile = await getUrl({
+ path: "album/2024/1.jpg",
+ options: {
+ // specify a target bucket using name assigned in Amplify Backend
+ bucket: 'assignedNameInAmplifyBackend',
+ // ensure object exists before getting url
+ validateObjectExistence: true,
+ // url expiration time in seconds.
+ expiresIn: 300,
+ // whether to use accelerate endpoint
+ useAccelerateEndpoint: true,
+ }
+});
+```
+
+Option | Type | Default | Description |
+| :--: | :--: | :--: | ----------- |
+| bucket | string \| \{ bucketName: string; region: string; \} | Default bucket and region from Amplify configuration | A string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
Read more at [Configure additional storage buckets](/[platform]/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets)
+| validateObjectExistence | boolean | false | Whether to head object to make sure the object existence before downloading. |
+| expiresIn | number | 900 | Number of seconds till the URL expires.
The expiration time of the presigned url is dependent on the session and will max out at 1 hour. |
+| useAccelerateEndpoint | boolean | false | Whether to use accelerate endpoint.
Read more at [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
@@ -296,18 +311,7 @@ import { downloadData } from 'aws-amplify/storage';
// Downloads file content to memory
const { body, eTag } = await downloadData({
- path: "/album/2024/1.jpg",
- options: {
- // optional progress callback
- onProgress: (event) => {
- console.log(event.transferredBytes);
- }
- // optional bytes range parameter to download a part of the file, the 2nd MB of the file in this example
- bytesRange: {
- start: 1024,
- end: 2048
- }
- }
+ path: "album/2024/1.jpg"
}).result;
```
@@ -505,7 +509,7 @@ import { downloadData } from 'aws-amplify/storage';
try {
const downloadResult = await downloadData({
- path: "/album/2024/1.jpg"
+ path: "album/2024/1.jpg"
}).result;
const text = await downloadResult.body.text();
// Alternatively, you can use `downloadResult.body.blob()`
@@ -569,6 +573,45 @@ let resultSink = downloadTask
+
+### Download from a specified bucket
+
+You can also perform an upload operation to a specific bucket by providing the `bucket` option. You can pass in a string representing the target bucket's assigned name in Amplify Backend.
+
+```ts
+import { downloadData } from 'aws-amplify/storage';
+
+const result = await downloadData({
+ path: 'album/2024/1.jpg',
+ options: {
+ // highlight-start
+ // Specify a target bucket using name assigned in Amplify Backend
+ bucket: 'assignedNameInAmplifyBackend'
+ // highlight-end
+ }
+}).result;
+
+```
+Alternatively, you can also pass in an object by specifying the bucket name and region from the console.
+
+```ts
+import { downloadData } from 'aws-amplify/storage';
+
+const result = await downloadData({
+ path: 'album/2024/1.jpg',
+ options: {
+ // highlight-start
+ // Alternatively, provide bucket name from console and associated region
+ bucket: {
+ bucketName: 'bucket-name-from-console',
+ region: 'us-east-2'
+ }
+ // highlight-end
+ }
+}).result;
+
+```
+
### Monitor download progress
```javascript
@@ -577,7 +620,7 @@ import { downloadData } from 'aws-amplify/storage';
// Download a file from S3 bucket
const { body, eTag } = await downloadData(
{
- path: "/album/2024/1.jpg",
+ path: 'album/2024/1.jpg',
options: {
onProgress: (progress) {
console.log(`Download progress: ${(progress.transferredBytes/progress.totalBytes) * 100}%`);
@@ -592,7 +635,7 @@ const { body, eTag } = await downloadData(
```javascript
import { downloadData, isCancelError } from 'aws-amplify/storage';
-const downloadTask = downloadData({ path: "/album/2024/1.jpg" });
+const downloadTask = downloadData({ path: 'album/2024/1.jpg' });
downloadTask.cancel();
try {
await downloadTask.result;
@@ -602,6 +645,7 @@ try {
}
}
```
+
@@ -905,12 +949,32 @@ Download tasks are run using `URLSessionTask` instances internally. You can lear
### More download options
+The behavior of the `downloadData` API can be customized by passing in options.
+
+```javascript
+import { downloadData } from 'aws-amplify/storage';
+
+// Downloads file content to memory
+const { body, eTag } = await downloadData({
+ path: "album/2024/1.jpg",
+ options: {
+ // optional bytes range parameter to download a part of the file, the 2nd MB of the file in this example
+ bytesRange: {
+ start: 1024,
+ end: 2048
+ },
+ useAccelerateEndpoint: true,
+ }
+}).result;
+
+```
-Option | Type | Description | Reference Links |
-| -- | -- | ----------- | -- |
-| useAccelerateEndpoint | boolean | Whether to use accelerate endpoint. | [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
-| bytesRange | \{ start: number; end:number; \} | bytes range parameter to download a part of the file. | |
-| onProgress | callback | Callback function tracking the upload/download progress. | |
+Option | Type | Default | Description |
+| :--: | :--: | :--: | ----------- |
+| bucket | string \| \{ bucketName: string; region: string; \} | Default bucket and region from Amplify configuration | A string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
Read more at [Configure additional storage buckets](/[platform]/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets) |
+| onProgress | callback | — | Callback function tracking the upload/download progress. |
+| bytesRange | \{ start: number; end:number; \} | — | Bytes range parameter to download a part of the file. |
+| useAccelerateEndpoint | boolean | false | Whether to use accelerate endpoint.
Read more at [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
## Frequently Asked Questions
diff --git a/src/pages/[platform]/build-a-backend/storage/list-files/index.mdx b/src/pages/[platform]/build-a-backend/storage/list-files/index.mdx
index 0f3b7abdcae..5a45125e633 100644
--- a/src/pages/[platform]/build-a-backend/storage/list-files/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/list-files/index.mdx
@@ -29,7 +29,7 @@ export function getStaticProps(context) {
};
}
-You can list files without having to download all the files. You can do this by using the `list` API from the Amplify Library for Storage. You can also get properties individually for a file using the getProperties API.
+You can list files without having to download all the files. You can do this by using the `list` API from the Amplify Library for Storage. You can also get properties individually for a file using the `getProperties` API.
## List Files
@@ -38,12 +38,12 @@ You can list files without having to download all the files. You can do this by
import { list } from 'aws-amplify/storage';
const result = await list({
- path: 'photos/',
+ path: 'album/photos/',
// Alternatively, path: ({identityId}) => `album/{identityId}/photos/`
});
```
-Note the trailing slash `/` - if you had requested `list({ path : 'photos' })` it would also match against files like `photos123.jpg` alongside `photos/123.jpg`.
+Note the trailing slash `/` - if you had requested `list({ path : 'album/photos' })` it would also match against files like `album/photos123.jpg` alongside `album/photos/123.jpg`.
The format of the response will look similar to the below example:
@@ -51,7 +51,7 @@ The format of the response will look similar to the below example:
{
items: [
{
- path: "photos/123.jpg",
+ path: "album/photos/123.jpg",
eTag: "30074401292215403a42b0739f3b5262",
lastModified: "Thu Oct 08 2020 23:59:31 GMT+0800 (Singapore Standard Time)",
size: 138256
@@ -61,6 +61,45 @@ The format of the response will look similar to the below example:
}
````
+If the `pageSize` is set lower than the total file size, a single `list` call only returns a subset of all the files. To list all the files with multiple calls, users can use the `nextToken` flag:
+
+```javascript
+import { list } from 'aws-amplify/storage';
+
+const PAGE_SIZE = 20;
+let nextToken = undefined;
+//...
+const loadNextPage = async () => {
+ let response = await list({
+ path: 'photos/',
+ // Alternatively, path: ({ identityId }) => `album/{identityId}/photos/`
+ pageSize: PAGE_SIZE,
+ nextToken: nextToken
+ }
+ });
+ if (response.nextToken) {
+ nextToken = response.nextToken;
+ } else {
+ nextToken = undefined;
+ }
+ // render list items from response.items
+};
+```
+
+### List All files
+```javascript
+import { list } from 'aws-amplify/storage';
+
+const result = await list({
+ path: 'album/photos/',
+ // Alternatively, path: ({identityId}) => `album/{identityId}/photos/`,
+ options: {
+ listAll: true,
+ }
+});
+```
+
+
{/* in other files we're referring to paths instead of folders, can we be consistent on terminology? */} Manually created folders will show up as files with a `size` of 0, but you can also match keys against a regex like `file.key.match(/\.[0-9a-z]+$/i)` to distinguish files from folders. Since "folders" are a virtual concept in Amazon S3, any file may declare any depth of folder just by having a `/` in its name.
To access the contents and subpaths of a "folder", you have two options:
@@ -170,40 +209,38 @@ const result = await list({
});
```
-### More `list` options
-
-| Option | Type | Description |
-| --- | --- | --- |
-| listAll | boolean | Set to true to list all files within the specified `path` |
-| pageSize | number | Sets the maximum number of files to be return. The range is 0 - 1000 |
-| nextToken | string | Indicates whether the list is being continued on this bucket with a token |
-| useAccelerateEndpoint | boolean | Whether to use accelerate endpoint.
Read more at [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
+### List files from a specified bucket
-If the `pageSize` is set lower than the total file size, a single `list` call only returns a subset of all the files. To list all the files with multiple calls, users can use the `nextToken` flag:
+You can also perform an `copy` operation to a specific bucket by providing the `bucket` option. This option can either be a string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
-```javascript
+```ts
import { list } from 'aws-amplify/storage';
-const PAGE_SIZE = 20;
-let nextToken = undefined;
-//...
-const loadNextPage = async () => {
- let response = await list({
- path: 'photos/',
- // Alternatively, path: ({ identityId }) => `album/{identityId}/photos/`
- pageSize: PAGE_SIZE,
- nextToken: nextToken
- }
- });
- if (response.nextToken) {
- nextToken = response.nextToken;
- } else {
- nextToken = undefined;
+const result = await list({
+ path: 'photos/',
+ options: {
+ // Specify a target bucket using name assigned in Amplify Backend
+ bucket: 'assignedNameInAmplifyBackend',
+ // Alternatively, provide bucket name from console and associated region
+ // bucket: {
+ // bucketName: 'generated-secondary-bucket-name',
+ // region: 'us-east-2'
+ // }
}
- // render list items from response.items
-};
+});
```
+### More `list` options
+
+| Option | Type | Default | Description |
+| -- | :--: | :--: | ----------- |
+| bucket | string \| \{ bucketName: string; region: string; \} | Default bucket and region from Amplify configuration | A string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
Read more at [Configure additional storage buckets](/[platform]/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets) |
+| listAll | boolean | false | Set to true to list all files within the specified `path` |
+| pageSize | number | 1000 | Sets the maximum number of files to be return. The range is 0 - 1000 |
+| nextToken | string | — | Indicates whether the list is being continued on this bucket with a token |
+| subpathStrategy | \{ strategy: 'include' \} \| \{ 'exclude', delimiter?: string \} | \{ strategy: 'include' \} | An object representing the subpath inclusion strategy and the delimiter used to group results for exclusion.
Read more at [Excluding subpaths](/[platform]/build-a-backend/storage/list-files/#excluding-subpaths) |
+| useAccelerateEndpoint | boolean | false | Whether to use accelerate endpoint.
Read more at [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
+
@@ -765,8 +802,12 @@ import { getProperties } from 'aws-amplify/storage';
try {
const result = await getProperties({
- path: 'album/2024/1.jpg'
+ path: 'album/2024/1.jpg',
// Alternatively, path: ({ identityId }) => `album/{identityId}/1.jpg`
+ options: {
+ // Specify a target bucket using name assigned in Amplify Backend
+ bucket: 'assignedNameInAmplifyBackend'
+ }
});
console.log('File Properties ', result);
} catch (error) {
@@ -789,9 +830,10 @@ The properties and metadata will look similar to the below example
### More `getProperties` options
-Option | Type | Description |
-| -- | -- | ----------- |
-| useAccelerateEndpoint | boolean | Whether to use accelerate endpoint. | [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
+Option | Type | Default | Description |
+| -- | -- | -- | ----------- |
+| bucket | string \| \{ bucketName: string; region: string; \} | Default bucket and region from Amplify configuration | A string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
Read more at [Configure additional storage buckets](/[platform]/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets) |
+| useAccelerateEndpoint | boolean | false | Whether to use accelerate endpoint. | [Transfer Acceleration](/[platform]/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration) |
diff --git a/src/pages/[platform]/build-a-backend/storage/manage-with-amplify-console/index.mdx b/src/pages/[platform]/build-a-backend/storage/manage-with-amplify-console/index.mdx
new file mode 100644
index 00000000000..67b2167a54a
--- /dev/null
+++ b/src/pages/[platform]/build-a-backend/storage/manage-with-amplify-console/index.mdx
@@ -0,0 +1,72 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+ title: 'Manage files with Amplify console',
+ description:
+ 'Manage your applications storage files with Amplify console',
+ platforms: [
+ 'android',
+ 'angular',
+ 'flutter',
+ 'javascript',
+ 'nextjs',
+ 'react',
+ 'react-native',
+ 'swift',
+ 'vue'
+ ]
+};
+
+export function getStaticPaths() {
+ return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps(context) {
+ return {
+ props: {
+ platform: context.params.platform,
+ meta
+ }
+ };
+}
+
+The **File storage** page in the Amplify console provides a user-friendly interface for managing your application's backend file storage. It allows for efficient testing and management of your files.
+
+If you have not yet created a **storage** resource, visit the [Storage setup guide](/[platform]/build-a-backend/storage/set-up-storage/).
+
+## Access File storage
+
+After you've deployed your storage resource, you can access the manager on Amplify Console.
+
+1. Log in to the [Amplify console](https://console.aws.amazon.com/amplify/home) and choose your app.
+2. Select the branch you would like to access.
+3. Select **Storage** from the left navigation bar.
+
+
+
+### To upload a file
+
+1. On the **Storage** page, select the **Upload** button
+2. Select the file you would like to upload and then select **Done**
+
+Alternatively, you can **Drag and drop** a file onto the Storage page.
+
+### To delete a file
+
+1. On the **Storage** page, select the file you want to delete.
+2. Select the **Actions** dropdown and then select **Delete**.
+
+### To copy a file
+
+1. On the **Storage** page, select the file you want to copy.
+2. Select the **Actions** dropdown and then select **Copy to**.
+3. Select or create the folder you want a copy of your file to be saved to.
+4. Select **Copy** to copy your file to the selected folder.
+
+### To move a file
+
+1. On the **Storage** page, select the file you want to move.
+3. Select the **Actions** dropdown and then select **Move to**.
+4. Select or create the folder you want to move your file to.
+5. Select **Move** to move your file to the selected folder.
+
diff --git a/src/pages/[platform]/build-a-backend/storage/remove-files/index.mdx b/src/pages/[platform]/build-a-backend/storage/remove-files/index.mdx
index 1260ecc7a02..26d8395f052 100644
--- a/src/pages/[platform]/build-a-backend/storage/remove-files/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/remove-files/index.mdx
@@ -31,6 +31,8 @@ export function getStaticProps(context) {
Files can be removed from a storage bucket using the 'remove' API. If a file is protected by an identity Id, only the user who owns the file will be able to remove it.
+You can also perform an upload operation to a specific bucket by providing the target bucket's assigned name from Amplify Backend in `bucket` option.
+
```javascript
@@ -40,6 +42,7 @@ try {
await remove({
path: 'album/2024/1.jpg',
// Alternatively, path: ({identityId}) => `album/{identityId}/1.jpg`
+ bucket: 'assignedNameInAmplifyBackend', // Specify a target bucket using name assigned in Amplify Backend
});
} catch (error) {
console.log('Error ', error);
@@ -47,6 +50,30 @@ try {
```
+Alternatively, you can also pass in an object by specifying the bucket name and region from the console.
+
+
+
+```javascript
+import { remove } from 'aws-amplify/storage';
+
+try {
+ await remove({
+ path: 'album/2024/1.jpg',
+ // Alternatively, provide bucket name from console and associated region
+ bucket: {
+ bucketName: 'bucket-name-from-console',
+ region: 'us-east-2'
+ }
+
+ });
+} catch (error) {
+ console.log('Error ', error);
+}
+```
+
+
+
@@ -172,3 +199,12 @@ Future remove() async {
```
+
+
+
+## More `remove` options
+
+Option | Type | Default | Description |
+| -- | :--: | :--: | ----------- |
+| bucket | string \| \{ bucketName: string; region: string; \} | Default bucket and region from Amplify configuration | A string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
Read more at [Configure additional storage buckets](/[platform]/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets) |
+
diff --git a/src/pages/[platform]/build-a-backend/storage/set-up-storage/index.mdx b/src/pages/[platform]/build-a-backend/storage/set-up-storage/index.mdx
index 0918ea16bbe..ba0b7719563 100644
--- a/src/pages/[platform]/build-a-backend/storage/set-up-storage/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/set-up-storage/index.mdx
@@ -100,6 +100,92 @@ export const storage = defineStorage({
});
```
+### Configure additional storage buckets
+
+Amplify Storage gives you the flexibility to configure your backend to automatically provision and manage multiple storage resources.
+
+You can define additional storage buckets by using the same `defineStorage` function and providing a unique, descriptive `name` to identify the storage bucket. You can pass this `name` to the storage APIs to specify the bucket you want to perform the action to. Ensure that this `name` attribute is unique across the defined storage buckets in order to reliably identify the correct bucket and prevent conflicts.
+
+It's important to note that if additional storage buckets are defined one of them must be marked as default with the `isDefault` flag.
+
+```ts title="amplify/storage/resource.ts"
+export const firstBucket = defineStorage({
+ name: 'firstBucket',
+ isDefault: true, // identify your default storage bucket (required)
+});
+
+export const secondBucket = defineStorage({
+ name: 'secondBucket',
+ access: (allow) => ({
+ 'private/{entity_id}/*': [
+ allow.entity('identity').to(['read', 'write', 'delete'])
+ ]
+ })
+})
+```
+
+Add additional storage resources to the backend definition.
+
+```ts title="amplify/backend.ts"
+import { defineBackend } from '@aws-amplify/backend';
+import { auth } from './auth/resource';
+import { firstBucket, secondBucket } from './storage/resource';
+
+defineBackend({
+ auth,
+ firstBucket,
+ // highlight-next-line
+ secondBucket
+});
+```
+
+
+### Storage bucket client usage
+
+Additional storage buckets can be referenced from application code by passing the `bucket` option to Amplify Storage APIs. You can provide a target bucket's name assigned in Amplify Backend.
+
+```ts
+import { downloadData } from 'aws-amplify/storage';
+
+try {
+ const result = downloadData({
+ path: "album/2024/1.jpg",
+ options: {
+ // highlight-start
+ // Specify a target bucket using name assigned in Amplify Backend
+ bucket: "secondBucket"
+ // highlight-end
+ }
+ }).result;
+} catch (error) {
+ console.log(`Error: ${error}`)
+}
+```
+Alternatively, you can also pass in an object by specifying the bucket name and region from the console. See each Amplify Storage API page for additional usage examples.
+
+```ts
+import { downloadData } from 'aws-amplify/storage';
+
+try {
+ const result = downloadData({
+ path: 'album/2024/1.jpg',
+ options: {
+ // highlight-start
+ // Alternatively, provide bucket name from console and associated region
+ bucket: {
+ bucketName: 'second-bucket-name-from-console',
+ region: 'us-east-2'
+ }
+ // highlight-end
+ }
+ }).result;
+} catch (error) {
+ console.log(`Error: ${error}`);
+}
+
+```
+
+
## Connect your app code to the storage backend
The Amplify Storage library provides client APIs that connect to the backend resources you defined.
@@ -754,9 +840,7 @@ Future uploadFile(File file) async {
## Manage files in Amplify console
-After successfully publishing your storage backend and connecting your project with client APIs, you can manage files and folders in [the Amplify console](https://console.aws.amazon.com/amplify). You can perform on-demand actions like upload, download, copy, and more under the Storage tab in the console.
-
-
+After successfully publishing your storage backend and connecting your project with client APIs, you can manage files and folders in [the Amplify console](https://console.aws.amazon.com/amplify). You can perform on-demand actions like upload, download, copy, and more under the Storage tab in the console. Refer to [Manage files in Amplify Console](/[platform]/build-a-backend/storage/manage-with-amplify-console/) guide for additional information.
## Conclusion
diff --git a/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx b/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
index d28ac018243..7911d0da6f0 100644
--- a/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
@@ -40,7 +40,7 @@ Upload files from your app in minutes by using the cloud-connected Storage Manag
```bash title="Terminal" showLineNumbers={false}
npm add @aws-amplify/ui-react-storage aws-amplify
```
-Then, use the component in your app.
+Then, use the component in your app.
{/* Let's add explanations for the props - which are mandatory now? I know before it was maxFileCount and accessLevel */}
```tsx
@@ -127,8 +127,8 @@ upload.addEventListener("click", () => {
console.log("Complete File read successfully!", event.target.result);
try {
await uploadData({
- data: event.target.result,
- path: file.files[0].name
+ data: event.target.result,
+ path: file.files[0].name
});
} catch (e) {
console.log("error", e);
@@ -140,7 +140,7 @@ upload.addEventListener("click", () => {
### Upload from data
-You can following this example if you have data saved in memory and would like to upload this data to the cloud.
+You can follow this example if you have data saved in memory and would like to upload this data to the cloud.
```javascript
import { uploadData } from 'aws-amplify/storage';
@@ -150,9 +150,6 @@ try {
path: "album/2024/1.jpg",
// Alternatively, path: ({identityId}) => `album/${identityId}/1.jpg`
data: file,
- options: {
- onProgress // Optional progress callback.
- }
}).result;
console.log('Succeeded: ', result);
} catch (error) {
@@ -689,13 +686,54 @@ final operation = Amplify.Storage.uploadData(
);
```
+
+
+
+### Upload to a specified bucket
+
+You can also perform an upload operation to a specific bucket by providing the `bucket` option. You can pass in a string representing the target bucket's assigned name in Amplify Backend.
+
+```ts
+import { uploadData } from 'aws-amplify/storage';
+
+const result = await uploadData({
+ path: 'album/2024/1.jpg',
+ data: file,
+ options: {
+ // highlight-start
+ // Specify a target bucket using name assigned in Amplify Backend
+ bucket: 'assignedNameInAmplifyBackend'
+ // highlight-end
+ }
+}).result;
+```
+Alternatively, you can also pass in an object by specifying the bucket name and region from the console.
+
+```ts
+import { uploadData } from 'aws-amplify/storage';
+
+const result = await uploadData({
+ path: 'album/2024/1.jpg',
+ data: file,
+ options: {
+ // highlight-start
+ // Alternatively, provide bucket name from console and associated region
+ bucket: {
+ bucketName: 'bucket-name-from-console',
+ region: 'us-east-2'
+ }
+ // highlight-end
+ }
+}).result;
+
+```
### Monitor upload progress
-Monitor progress of upload by using the `onProgress` options
+Monitor progress of upload by using the `onProgress` option.
```javascript
import { uploadData } from 'aws-amplify/storage';
@@ -1201,16 +1239,52 @@ func getTempUrls(securityScopedUrls: [URL]) -> [URL] {
+### Transfer with Object Metadata
+
+Custom metadata can be associated with your uploaded object by passing the metadata option.
+
+```ts
+import { uploadData } from 'aws-amplify/storage';
+
+const result = await uploadData({
+ path: 'album/2024/1.jpg',
+ data: file,
+ options: {
+ metadata: {
+ customKey: 'customValue',
+ },
+ },
+});
+```
### More upload options
-Option | Type | Description |
-| -- | -- | ----------- |
-| contentType | String | The default content-type header value of the file when downloading it.
Read more at [Content-Type documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) |
-| contentEncoding | String | The default content-encoding header value of the file when downloading it.
Read more at [Content-Encoding documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding) |
-| contentDisposition | String | Specifies presentational information for the object.
Read more at [Content-Disposition documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) |
-| metadata | map\ | A map of metadata to store with the object in S3.
Read more at [S3 metadata documentation](https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingMetadata.html#UserMetadata) |
-| useAccelerateEndpoint | boolean | Whether to use accelerate endpoint.
Read more at [Transfer Acceleration](/[platform]/build-a-backend/storage/upload-files/#transfer-acceleration) |
+The behavior of `uploadData` and properties of the uploaded object can be customized by passing in additional options.
+
+```ts
+import { uploadData } from 'aws-amplify/storage';
+
+const result = await uploadData({
+ path: 'album/2024/1.jpg',
+ data: file,
+ options: {
+ // content-type header to be used when downloading
+ contentType: "image/jpeg",
+ // configure how object is presented
+ contentDisposition: "attachment",
+ // whether to use accelerate endpoint
+ useAccelerateEndpoint: true
+ },
+});
+```
+Option | Type | Default | Description |
+| -- | :--: | :--: | ----------- |
+| bucket | string \| \{ bucketName: string; region: string; \} | Default bucket and region from Amplify configuration | A string representing the target bucket's assigned name in Amplify Backend or an object specifying the bucket name and region from the console.
Read more at [Configure additional storage buckets](/[platform]/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets) |
+| contentType | string | application/octet-stream | The default content-type header value of the file when downloading it.
Read more at [Content-Type documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) |
+| contentEncoding | string | — | The default content-encoding header value of the file when downloading it.
Read more at [Content-Encoding documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding) |
+| contentDisposition | string | — | Specifies presentational information for the object.
Read more at [Content-Disposition documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) |
+| metadata | map\ | — | A map of metadata to store with the object in S3.
Read more at [S3 metadata documentation](https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingMetadata.html#UserMetadata) |
+| useAccelerateEndpoint | boolean | false | Whether to use accelerate endpoint.
Read more at [Transfer Acceleration](/[platform]/build-a-backend/storage/upload-files/#transfer-acceleration) |
diff --git a/src/pages/[platform]/build-a-backend/storage/use-with-custom-s3/index.mdx b/src/pages/[platform]/build-a-backend/storage/use-with-custom-s3/index.mdx
index e73755afc1d..1ce67bd9ba3 100644
--- a/src/pages/[platform]/build-a-backend/storage/use-with-custom-s3/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/use-with-custom-s3/index.mdx
@@ -32,12 +32,11 @@ export function getStaticProps(context) {
With Amplify Storage APIs, you can use your own S3 buckets instead of the Amplify-created ones.
-
**Important:** To utilize the storage APIs with an S3 bucket outside of Amplify, you must have Amplify Auth configured in your project.
-
+## Use storage resources with an Amplify backend
-## Step 1 - Add necessary permissions to the S3 bucket
+### Add necessary permissions to the S3 bucket
For the specific Amazon S3 bucket that you want to use with these APIs, you need to make sure that the associated IAM role has the necessary permissions to read and write data to that bucket.
@@ -72,7 +71,7 @@ Replace `` with your AWS account ID and `` with the I
You can refer to [Amazon S3's Policies and Permissions documentation](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-policy-language-overview.html) for more ways to customize access to the bucket.
-## Step 2 - Specify S3 bucket in Amplify's backend config
+### Specify S3 bucket in Amplify's backend config
Next, use the `addOutput` method from the backend definition object to define a custom s3 bucket by specifying the name and region of the bucket in your **amplify/backend.ts** file.
@@ -110,7 +109,7 @@ backend.addOutput({
-## Step 3 - Import latest amplify_outputs.json file
+### Import latest amplify_outputs.json file
To ensure the local **amplify_outputs.json** file is up-to-date, you can run [the npx ampx generate outputs command](/[platform]/reference/cli-commands/#npx-ampx-generate-outputs) or download the latest **amplify_outputs.json** from the Amplify console as shown below.
@@ -120,10 +119,78 @@ To ensure the local **amplify_outputs.json** file is up-to-date, you can run [th
-## Step 3 - Import latest amplify_outputs.dart file
+### Import latest amplify_outputs.dart file
To ensure the local **amplify_outputs.dart** file is up-to-date, you can run [the npx ampx generate outputs command](/[platform]/reference/cli-commands/#npx-ampx-generate-outputs).
Now that you've configured the necessary permissions, you can start using the storage APIs with your chosen S3 bucket.
+
+
+## Use storage resources without an Amplify backend
+
+While using the Amplify Backend is the easiest way to get started, existing storage resources can also be integrated with Amplify Storage.
+
+In addition to manually configuring your storage options, you will also need to ensure Amplify Auth is properly configured in your project and associated IAM roles have the necessary permissions to interact with your existing bucket. Read more about [using existing auth resources without an Amplify backend](/[platform]/build-a-backend/auth/use-existing-cognito-resources/#use-auth-resources-without-an-amplify-backend).
+
+### Using Amplify configure
+Existing storage resource setup can be accomplished by passing the resource metadata to `Amplify.configure`. This will configure the Amplify Storage client library to interact with the additional resources. It's recommended to add the Amplify configuration step as early as possible in the application lifecycle, ideally at the root entry point.
+
+
+```ts
+import { Amplify } from 'aws-amplify';
+
+Amplify.configure({
+ Auth: {
+ // add your auth configuration
+ },
+ Storage: {
+ S3: {
+ bucket: '',
+ region: '',
+ // default bucket metadata should be duplicated below with any additional buckets
+ buckets: {
+ '': {
+ bucketName: '',
+ region: ''
+ },
+ '': {
+ bucketName: '',
+ region: ''
+ }
+ }
+ }
+ }
+});
+
+```
+### Using Amplify outputs
+
+Alternatively, existing storage resources can be used by creating or modifying the `amplify_outputs.json` file directly.
+
+```ts title="amplify_outputs.json"
+{
+ "auth": {
+ // add your auth configuration
+ },
+ "storage": {
+ "aws_region": "",
+ "bucket_name": "",
+ // default bucket metadata should be duplicated below with any additional buckets
+ "buckets": [
+ {
+ "name": "",
+ "bucket_name": "",
+ "aws_region": ""
+ },
+ {
+ "name": "",
+ "bucket_name": "",
+ "aws_region": ""
+ }
+ ]
+ }
+}
+```
+
diff --git a/src/pages/[platform]/build-ui/figma-to-code/index.mdx b/src/pages/[platform]/build-ui/figma-to-code/index.mdx
index 2ed35d47594..ef2a1c94976 100644
--- a/src/pages/[platform]/build-ui/figma-to-code/index.mdx
+++ b/src/pages/[platform]/build-ui/figma-to-code/index.mdx
@@ -41,9 +41,17 @@ Please follow the README in our Figma file to learn how to create your component
## Step 2: Run the Amplify UI Builder Figma plugin in dev mode
-After you duplicate the Figma file, you run the Amplify UI Builder figma plugin in dev mode to generate Amplify UI React code.
+After you duplicate the Figma file, you run the Amplify UI Builder figma plugin in dev mode or non-dev mode to generate Amplify UI React code.
-1. Turn on Figma dev mode on your Figma file
-2. Click on the "Plugins" tab
-3. Click on the Amplify UI Builder plugin
-4. Select any layer in your file to get React code and a live preview of the generated code.
+### Dev Mode
+
+1. Turn on Figma dev mode in your Figma file.
+2. Click on the **Plugins** tab.
+3. Select the **AWS Amplify UI Builder** plugin.
+4. Choose any layer in your file to get React code and a live preview of the generated code.
+
+### Non-dev Mode
+
+1. Click on the **Plugins** tab.
+2. Select the **AWS Amplify UI Builder** plugin.
+3. Choose **Download component code** to download the React code for your components.
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx
index f5fe1aa876e..59608c3f2dd 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/branch-deployments/index.mdx
@@ -43,7 +43,7 @@ After you've deployed your [first branch](/[platform]/start/quickstart/), you ca
You can also define a pattern to connect only certain branches. For example, setting `dev`, `staging`, and `feature/*` will automatically connect all three branch types. Your `dev` and `staging` branches, as well as any branch that begins with `feature/`, will be connected.
-
+
3. Push a commit to your `feature/A` and `staging` branches that match the pattern. You should start seeing deployments on the console page. You will now have three fullstack branches deployed.
@@ -104,6 +104,6 @@ npx ampx generate outputs --app-id --branch
+
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
index f29858e97b0..f8cf82bb4d1 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
@@ -38,11 +38,11 @@ This guide walks you through how to create a trunk-based, multi-region deploymen
-### Step 1: Set up an Amazon CodeCatalyst space
+## Step 1: Set up an Amazon CodeCatalyst space
Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/setting-up-topnode.html) for a detailed step-by-step walkthrough to set up your [space](https://docs.aws.amazon.com/codecatalyst/latest/userguide/spaces.html).
-### Step 2: Deploy a fullstack Amplify Gen 2 app
+## Step 2: Deploy a fullstack Amplify Gen 2 app
@@ -68,19 +68,19 @@ Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/cod
-### Step 3: Update build specification
+## Step 3: Update build specification
Add the `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` command to the build spec and comment out the `npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID` command. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` fetches the latest `amplify_outputs.json` for the specified environment.
-### Step 4: Disable automatic builds on the branch
+## Step 4: Disable automatic builds on the branch
You can configure Amplify to disable automatic builds on every code commit. Navigate to the app in the Amplify console. Under **App settings**, select **Branch settings**. From the **Branches** section, select the branch and then choose **Disable auto build** from the **Actions** dropdown menu.
-
+
-### Step 5: Create an incoming webhook
+## Step 5: Create an incoming webhook
You can set up an incoming webhook to trigger a build without committing code to your Git repository. Use the Amplify Console to create an [incoming webhook](https://docs.aws.amazon.com/amplify/latest/userguide/webhooks.html).
@@ -92,7 +92,7 @@ Next, select the webhook and copy the `curl` command which will be used to trigg
-### Step 6: Create a new Amazon CodeCatalyst project
+## Step 6: Create a new Amazon CodeCatalyst project
Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/projects-create.html#projects-create-github) for a detailed step-by-step walkthrough to create a new [project](https://docs.aws.amazon.com/codecatalyst/latest/userguide/projects.html).
@@ -104,11 +104,11 @@ Please refer to this Amazon CodeCatalyst [guide](https://docs.aws.amazon.com/cod
-### Step 7: Set up the resources in a different or target AWS account
+## Step 7: Set up the resources in a different or target AWS account
To achieve a cross-account deployment, you will need to implement Steps 1 through 6 outlined previously in this guide in a different AWS account (for example, `production` account).
-### Step 8: Add the target AWS account to the CodeCatalyst space
+## Step 8: Add the target AWS account to the CodeCatalyst space
Navigate to the CodeCatalyst space created as part of Step 1, select **Settings**, and then select **AWS accounts**. Add the target **AWS account ID** (Step 7) to it and select **Associate AWS account**.
@@ -116,7 +116,7 @@ Navigate to the CodeCatalyst space created as part of Step 1, select **Settings*
You will also need to create an IAM role in the target AWS account which will be assumed by the `staging` environment to perform actions and deploy resources in the `production` environment. As a best practice, we recommend attaching the [`AmplifyBackendDeployFullAccess`](https://docs.aws.amazon.com/amplify/latest/userguide/security-iam-awsmanpol.html#security-iam-awsmanpol-AmplifyBackendDeployFullAccess) AWS managed policy to the IAM role as it contains all the required permissions to deploy Gen 2 resources in your account. You can learn more about adding IAM roles to account connections in the CodeCatalyst [documentation](https://docs.aws.amazon.com/codecatalyst/latest/userguide/ipa-connect-account-addroles.html).
-### Step 9: Create a workflow in the Amazon CodeCatalyst project
+## Step 9: Create a workflow in the Amazon CodeCatalyst project
A workflow is an automated procedure that describes how to build, test, and deploy your code as part of a continuous integration and continuous delivery (CI/CD) system. You can learn more about workflows in the [Amazon CodeCatalyst User Guide](https://docs.aws.amazon.com/codecatalyst/latest/userguide/flows.html).
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx
index a245efa4e26..e52ecf0993d 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/index.mdx
@@ -39,7 +39,7 @@ You can set up your backend deployments using the following steps:
2. Disable Auto-build for your branch. This will ensure code commits to your branch will not trigger a build.
-
+
3. Update the Amplify build specification file to add `npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_ID` and comment out the `pipeline-deploy` script. `ampx pipeline-deploy` runs a script to deploy backend updates, while `ampx generate outputs` fetches the latest `amplify_outputs.json` for the specified environment.
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
index 56548cd3832..6767407744f 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
@@ -107,7 +107,7 @@ npx ampx generate outputs --app-id --branch main
Once the sandbox environment is running, you would also generate the configuration files for your application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
-
+
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx
index 5b4b72f113a..22e69890839 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/secrets-and-vars/index.mdx
@@ -43,7 +43,7 @@ You can set secrets for your fullstack branch deployments or your local dev serv
You can add secrets for branch deployments in the Amplify console. From the App home page, navigate to **Hosting > Secrets**, and then choose the **Manage secrets** button. You can add a secret key or value that applies to all deployed branches or just specific branches.
-
+
Secrets are stored in AWS Systems Manager Parameter Store under the following naming conventions:
@@ -114,7 +114,7 @@ npx ampx sandbox secret remove foo
Environment variables work like key-value pairs to help manage configurable settings across different deployment environments, including development, staging, and production. Unlike secrets, which store sensitive data, environment variables are typically nonconfidential and are used for controlling application behavior in different environments. Another key difference is that environment variables are stored and managed by the Amplify managed service. You can set environment variables in the Amplify console (view the [AWS Amplify Hosting User Guide](https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html#setting-env-vars) for detailed instructions).
-
+
## Access environment variables
diff --git a/src/pages/[platform]/deploy-and-host/sandbox-environments/features/index.mdx b/src/pages/[platform]/deploy-and-host/sandbox-environments/features/index.mdx
index 35f13fb5cbf..96d3df09f4d 100644
--- a/src/pages/[platform]/deploy-and-host/sandbox-environments/features/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/sandbox-environments/features/index.mdx
@@ -210,7 +210,7 @@ npx ampx sandbox --outputs-format json-mobile
Once the sandbox environment is running, you would also generate the configuration files for your application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
-
+
@@ -248,7 +248,7 @@ npx ampx generate outputs --app-id --format json-mobile
Once the sandbox environment is running, it will generate the backend outputs file for your frontend application. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
-
+
diff --git a/src/pages/[platform]/how-amplify-works/concepts/index.mdx b/src/pages/[platform]/how-amplify-works/concepts/index.mdx
index 7a7bc139ad7..9c521647180 100644
--- a/src/pages/[platform]/how-amplify-works/concepts/index.mdx
+++ b/src/pages/[platform]/how-amplify-works/concepts/index.mdx
@@ -58,7 +58,7 @@ All shared environments (such as `production`, `staging`, `gamma`) map 1:1 to Gi
All branches can be managed in the new Amplify console. The Amplify Gen 2 console provides a single place for you to manage your builds, hosting settings (such as custom domains), deployed resources (such as data browser or user management), and environment variables and secrets. Even though you can access deployed resources directly in other AWS service consoles, the Amplify console will offer a first-party experience for the categories almost every app needs—data, auth, storage, and functions. For example, with Data, Amplify offers an API playground and a data manager (coming soon) with relationship building, seed data generation, and file upload capabilities.
-
+
## Build an app
diff --git a/src/pages/[platform]/index.tsx b/src/pages/[platform]/index.tsx
index 4b37d4632d4..699feeaadaf 100644
--- a/src/pages/[platform]/index.tsx
+++ b/src/pages/[platform]/index.tsx
@@ -175,7 +175,9 @@ const Gen2Overview = () => {
Develop
- {!isMobilePlatform && }
+ {!isMobilePlatform && (
+
+ )}
{!isMobilePlatform && (
diff --git a/src/pages/[platform]/reference/iam-policy/index.mdx b/src/pages/[platform]/reference/iam-policy/index.mdx
index 42dad3c049a..d777b5051ce 100644
--- a/src/pages/[platform]/reference/iam-policy/index.mdx
+++ b/src/pages/[platform]/reference/iam-policy/index.mdx
@@ -33,7 +33,7 @@ export function getStaticProps(context) {
Branch deployments require the [`AmplifyBackendDeployFullAccess`](https://docs.aws.amazon.com/amplify/latest/userguide/security-iam-awsmanpol.html#security-iam-awsmanpol-AmplifyBackendDeployFullAccess) managed policy to be able to deploy backend resources during a fullstack deployment. When connecting your project through the console, a role with this policy attached will be automatically created for you.
-
+
## Cloud sandbox deployments
diff --git a/src/pages/[platform]/reference/permissions-boundary/index.mdx b/src/pages/[platform]/reference/permissions-boundary/index.mdx
index 92277878903..2daaa5c8bf8 100644
--- a/src/pages/[platform]/reference/permissions-boundary/index.mdx
+++ b/src/pages/[platform]/reference/permissions-boundary/index.mdx
@@ -40,10 +40,10 @@ The IAM Policy to be used as a permissions boundary must be configured outside o
```bash title="Terminal" showLineNumbers={false}
-cdk bootstrap --custom-permissions-boundary
+cdk bootstrap --custom-permissions-boundary
```
The `cdk bootstrap` command is a one-time operation that configures the AWS account and region for CDK deployments. Once executed, users can continue to utilize Amplify commands (e.g. `sandbox`) without interruption. Any custom IAM permissions boundary set by `cdk bootstrap` will be automatically applied to the roles created by Amplify.
-Check this [guide](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html) to learn more about bootstrapping
+Check this [guide](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html) to learn more about bootstrapping.
diff --git a/src/pages/[platform]/start/account-setup/index.mdx b/src/pages/[platform]/start/account-setup/index.mdx
index 1d4f286e81f..ca1ae699322 100644
--- a/src/pages/[platform]/start/account-setup/index.mdx
+++ b/src/pages/[platform]/start/account-setup/index.mdx
@@ -87,7 +87,7 @@ A dialog will open, prompting you to "Choose how to configure IAM Identity Cente
Next, we are going to automate a number of steps that simulate the operations of setting up a user in the IAM Identity Center console. To get started open CloudShell, located in the console footer.
-
+
Paste the following command in the CloudShell terminal and enter an email address you would like to associate with this AWS account:
@@ -175,7 +175,7 @@ Username: amplify-admin
Now create a password for the user that we need for the next step. In the IdC console, navigate to _Users > amplify_admin > Reset password > Send an email to the user with instructions for resetting the password_.
-
+
Check your email (make sure you also check your spam folder). Click on the _Reset password_ link and choose a password of your choice. When signing in make sure to use _amplify-admin_ as the _Username_.
diff --git a/src/pages/[platform]/start/connect-existing-aws-resources/index.mdx b/src/pages/[platform]/start/connect-existing-aws-resources/index.mdx
deleted file mode 100644
index a4ee29b1ba5..00000000000
--- a/src/pages/[platform]/start/connect-existing-aws-resources/index.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { Card } from '@aws-amplify/ui-react';
-
-export const meta = {
- title: 'Connect to existing AWS resources',
- description: 'You can use Amplify client libraries to connect directly to your AWS resources without having to set up an Amplify backend.',
- platforms: [
- 'android',
- 'angular',
- 'flutter',
- 'javascript',
- 'nextjs',
- 'react',
- 'react-native',
- 'swift',
- 'vue'
- ]
-};
-
-export const getStaticPaths = async () => {
- return getCustomStaticPath(meta.platforms);
-};
-
-export function getStaticProps(context) {
- return {
- props: {
- platform: context.params.platform,
- meta
- }
- };
-}
-
-Amplify client libraries provide you with the flexibility to directly connect your application to AWS resources, regardless of whether you choose to set up an Amplify backend environment or manually configure individual AWS services, such as AWS AppSync, Amazon Cognito, Amazon S3, and more.
-
-If you configured AWS resources outside of an Amplify backend, you can still use the Amplify libraries to connect to them by following the instructions provided:
-
-
-
-[Connect to Cognito](/[platform]/build-a-backend/auth/use-existing-cognito-resources/)
-
-Connect to Cognito resources using Amplify Auth's client library
-
-
diff --git a/src/pages/[platform]/start/connect-to-aws-resources/index.mdx b/src/pages/[platform]/start/connect-to-aws-resources/index.mdx
new file mode 100644
index 00000000000..2123f94ef6b
--- /dev/null
+++ b/src/pages/[platform]/start/connect-to-aws-resources/index.mdx
@@ -0,0 +1,139 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+import { Card } from '@aws-amplify/ui-react';
+
+export const meta = {
+ title: 'Connect to AWS resources',
+ description: 'You can use Amplify client libraries to connect directly to your AWS resources',
+ platforms: [
+ 'android',
+ 'angular',
+ 'flutter',
+ 'javascript',
+ 'nextjs',
+ 'react',
+ 'react-native',
+ 'swift',
+ 'vue'
+ ]
+};
+
+export async function getStaticPaths() {
+ return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps(context) {
+ return {
+ props: {
+ platform: context.params.platform,
+ meta
+ }
+ };
+}
+
+Amplify client libraries provide you with the flexibility to directly connect your application to AWS resources such as AWS AppSync, Amazon Cognito, Amazon S3, and more.
+
+To get started, client libraries must be _configured_. This is typically done by using the [`amplify_outputs.json` file](/[platform]/reference/amplify_outputs) generated by the Amplify backend tooling, however using the client libraries does not require backend resources to be created by Amplify.
+
+
+
+For JavaScript-based applications, the client library can be configured by using the generated outputs file:
+
+```ts title="src/main.ts"
+import { Amplify } from "aws-amplify"
+import outputs from "../amplify_outputs.json"
+
+Amplify.configure(outputs)
+```
+
+Or by configuring the library directly by passing a [`ResourcesConfig`](https://aws-amplify.github.io/amplify-js/api/interfaces/aws_amplify.index.ResourcesConfig.html) object. For example, to configure the client library for use with Amazon Cognito, specify the `Auth` configuration:
+
+```ts title="src/main.ts"
+import { Amplify } from "aws-amplify"
+
+Amplify.configure({
+ Auth: {
+ Cognito: {
+ userPoolId: "",
+ userPoolClientId: "",
+ identityPoolId: "",
+ loginWith: {
+ email: true,
+ },
+ signUpVerificationMethod: "code",
+ userAttributes: {
+ email: {
+ required: true,
+ },
+ },
+ allowGuestAccess: true,
+ passwordFormat: {
+ minLength: 8,
+ requireLowercase: true,
+ requireUppercase: true,
+ requireNumbers: true,
+ requireSpecialCharacters: true,
+ },
+ },
+ },
+})
+```
+
+By configuring the client library, Amplify automates the communication with the underlying AWS resources, and provides a friendly API to author your business logic. In the snippet below, the `signIn` function does not require passing information from your Cognito resource to initiate the sign-in flow.
+
+```ts title="src/main.ts"
+import { signIn } from "aws-amplify/auth"
+
+await signIn({
+ username: "john.doe@example.com",
+ password: "hunter2",
+})
+```
+
+
+
+
+For mobile platforms, the client library can be configured by creating an `amplify_outputs.json` file in your project's directory. To get started, create the file and specify your resource configuration:
+
+```json title="amplify_outputs.json"
+{
+ "$schema": "https://raw.githubusercontent.com/aws-amplify/amplify-backend/main/packages/client-config/src/client-config-schema/schema_v1.json",
+ "version": "1",
+ "auth": {
+ "user_pool_id": "",
+ "aws_region": "",
+ "user_pool_client_id": "",
+ "identity_pool_id": "",
+ "mfa_methods": [],
+ "standard_required_attributes": [
+ "email"
+ ],
+ "username_attributes": [
+ "email"
+ ],
+ "user_verification_types": [
+ "email"
+ ],
+ "mfa_configuration": "NONE",
+ "password_policy": {
+ "min_length": 8,
+ "require_lowercase": true,
+ "require_numbers": true,
+ "require_symbols": true,
+ "require_uppercase": true
+ },
+ "unauthenticated_identities_enabled": true
+ }
+}
+```
+
+
+
+For more information about how to use the Amplify client libraries with existing AWS resources, visit the guides:
+
+
+
+[Connect to Cognito](/[platform]/build-a-backend/auth/use-existing-cognito-resources/)
+
+Connect to Cognito resources using Amplify Auth's client library
+
+
diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx
index 5bb9e103272..ae339cb1935 100644
--- a/src/pages/[platform]/start/quickstart/index.mdx
+++ b/src/pages/[platform]/start/quickstart/index.mdx
@@ -317,7 +317,7 @@ Deploy to AWS
Select **GitHub**. After you give Amplify access to your GitHub account via the popup window, pick the repository and `main` branch to deploy. Make no other changes and click through the flow to **Save and deploy**.
-
+
### 3. View deployed app
@@ -344,11 +344,11 @@ Let's take a tour of the project structure in this starter repository by opening
When the build completes, visit the newly deployed branch by selecting "Visit deployed URL". Since the build deployed an API, database, and authentication backend, you will be able to create new to-do items.
-
+
In the Amplify console, click into the deployment branch (in this case **main**) > select **Data** in the left-hand menu > **Data manager** to see the data entered in your database.
-
+
## Make frontend updates
@@ -358,7 +358,7 @@ Let's learn how to enhance the app functionality by creating a delete flow for t
Now let's set up our local development environment to add features to the frontend. Click on your deployed branch and you will land on the **Deployments** page which shows you your build history and a list of deployed backend resources.
-
+
At the bottom of the page you will see a tab for **Deployed backend resources**. Click on the tab and then click the **Download amplify_outputs.json file** button.
@@ -430,7 +430,7 @@ npm run dev
This should start a local dev server at http://localhost:5173.
-
+
### 6. Implement login UI
@@ -469,7 +469,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Try out your application in your localhost environment again. You should be presented with a login experience now.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -566,7 +566,7 @@ Now, let's go back to your local application and test out the user isolation of
You will need to sign up new users again because now you're working with the cloud sandbox instead of your production backend.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -640,7 +640,7 @@ Deploy to AWS
Select **GitHub**. After you give Amplify access to your GitHub account via the popup window, pick the repository and `main` branch to deploy. Make no other changes and click through the flow to **Save and deploy**.
-
+
### 3. View deployed app
@@ -668,11 +668,11 @@ Let's take a tour of the project structure in this starter repository by opening
When the build completes, visit the newly deployed branch by selecting "Visit deployed URL". Since the build deployed an API, database, and authentication backend, you will be able to create new to-do items.
-
+
In the Amplify console, click into the deployment branch (in this case **main**) > select **Data** in the left-hand menu > **Data manager** to see the data entered in your database.
-
+
## Make frontend updates
@@ -682,7 +682,7 @@ Let's learn how to enhance the app functionality by creating a delete flow for t
Now let's set up our local development environment to add features to the frontend. Click on your deployed branch and you will land on the **Deployments** page which shows you your build history and a list of deployed backend resources.
-
+
At the bottom of the page you will see a tab for **Deployed backend resources**. Click on the tab and then click the **Download amplify_outputs.json file** button.
@@ -759,7 +759,7 @@ npm run dev
This should start a local dev server at http://localhost:5173.
-
+
### 6. Implement login UI
@@ -799,7 +799,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Try out your application in your localhost environment again. You should be presented with a login experience now.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -900,7 +900,7 @@ Now, let's go back to your local application and test out the user isolation of
You will need to sign up new users again because now you're working with the cloud sandbox instead of your production backend.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -960,7 +960,7 @@ Deploy to AWS
Select **GitHub**. After you give Amplify access to your GitHub account via the popup window, pick the repository and `main` branch to deploy. Make no other changes and click through the flow to **Save and deploy**.
-
+
### 3. View deployed app
@@ -987,11 +987,11 @@ Let's take a tour of the project structure in this starter repository by opening
When the build completes, visit the newly deployed branch by selecting "Visit deployed URL". Since the build deployed an API, database, and authentication backend, you will be able to create new to-do items.
-
+
In the Amplify console, click into the deployment branch (in this case **main**) > select **Data** in the left-hand menu > **Data manager** to see the data entered in your database.
-
-
+
+
## Make frontend updates
@@ -1001,7 +1001,7 @@ Let's learn how to enhance the app functionality by creating a delete flow for t
Now let's set up our local development environment to add features to the frontend. Click on your deployed branch and you will land on the **Deployments** page which shows you your build history and a list of deployed backend resources.
-
+
At the bottom of the page you will see a tab for **Deployed backend resources**. Click on the tab and then click the **Download amplify_outputs.json file** button.
@@ -1064,7 +1064,7 @@ npm run start
This should start a local dev server at http://localhost:4200.
-
+
### 6. Implement login UI
@@ -1133,7 +1133,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Try out your application in your localhost environment again. You should be presented with a login experience now.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -1225,7 +1225,7 @@ Now, let's go back to your local application and test out the user isolation of
You will need to sign up new users again because now you're working with the cloud sandbox instead of your production backend.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -1404,7 +1404,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Run your application in your local environment again. You should be presented with a login experience now.
-
+
## Adding Data
@@ -1669,7 +1669,7 @@ return false;
This will delete the Todo item when the user swipes the item from right to left. Now if you run the application you should see the following flow.
-
+
You can terminate the sandbox environment now to clean up the project.
@@ -1761,7 +1761,7 @@ npx ampx sandbox
Once the sandbox environment is deployed, it will create an `amplify_outputs.json`. However, Xcode won't be able to recognize them. For recognizing the files, you need to drag and drop the generated files to your project.
-
+
## Adding Authentication
@@ -1836,7 +1836,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Run your application in your local environment again. You should be presented with a login experience now.
-
+
## Adding Data
@@ -2128,7 +2128,7 @@ struct TodoRow: View {
This will update the UI to show a toggle to update the todo `isDone` and a swipe to delete the todo. Now if you run the application you should see the following flow.
-
+
You can terminate the sandbox environment now to clean up the project.
@@ -2178,7 +2178,7 @@ Deploy to AWS
Select **GitHub**, pick the starter repository, and hit "Save and Deploy".
-
+
### 3: View deployed backend
@@ -2199,7 +2199,7 @@ Let's take a tour of the project structure in this starter repository. The start
When the build completes, visit the newly deployed branch by selecting the branch name and then looking at the **Deployed backend resources** section under deployments.
-
+
## Make app updates
@@ -2351,7 +2351,7 @@ class MainActivity : ComponentActivity() {
Now if you run the application on the Android emulator, you should see the authentication flow working.
-
+
### 7. Read and write data
@@ -2751,7 +2751,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Run your application in your local environment again. You should be presented with a login experience now.
-
+
## Adding Data
@@ -2925,7 +2925,7 @@ const styles = StyleSheet.create({
If you run the application now, you should see the following behavior:
-
+
You can terminate the sandbox environment now to clean up the project.
diff --git a/src/pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx b/src/pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx
index f377d5be3d0..c1be1953949 100644
--- a/src/pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx
+++ b/src/pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx
@@ -65,7 +65,7 @@ Deploy to AWS
Select **Start with an existing app** > **GitHub**. After you give Amplify access to your GitHub account via the popup window, pick the repository and `main` branch to deploy. Make no other changes and click through the flow to **Save and deploy**.
-
+
### 3. View deployed app
@@ -92,11 +92,11 @@ Let's take a tour of the project structure in this starter repository by opening
When the build completes, visit the newly deployed branch by selecting "View deployed URL". Since the build deployed an API, database, and authentication backend, you will be able to create new to-do items.
-
+
In the Amplify console, click into the deployment branch (in this case **main**) > select **Data** in the left-hand menu > **Data manager** to see the data entered in your database.
-
+
## Make frontend updates
@@ -106,7 +106,7 @@ Let's learn how to enhance the app functionality by creating a delete flow for t
Now let's set up our local development environment to add features to the frontend. Click on your deployed branch and you will land on the **Deployments** page which shows you your build history and a list of deployed backend resources.
-
+
At the bottom of the page you will see a tab for **Deployed backend resources**. Click on the tab and then click the **Download amplify_outputs.json file** button.
@@ -213,7 +213,7 @@ npm run dev
This should start a local dev server at http://localhost:3000.
-
+
### 6. Implement login UI
@@ -258,7 +258,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Try out your application in your localhost environment again. You should be presented with a login experience now.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -355,7 +355,7 @@ Now, let's go back to your local application and test out the user isolation of
You will need to sign up new users again because now you're working with the cloud sandbox instead of your production backend.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
diff --git a/src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx b/src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx
index 5254315508e..59143484897 100644
--- a/src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx
+++ b/src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx
@@ -66,7 +66,7 @@ Deploy to AWS
Select **Start with an existing app** > **GitHub**. After you give Amplify access to your GitHub account via the popup window, pick the repository and `main` branch to deploy. Make no other changes and click through the flow to **Save and deploy**.
-
+
### 3. View deployed app
@@ -93,11 +93,11 @@ Let's take a tour of the project structure in this starter repository by opening
When the build completes, visit the newly deployed branch by selecting "View deployed URL". Since the build deployed an API, database, and authentication backend, you will be able to create new to-do items.
-
+
In the Amplify console, click into the deployment branch (in this case **main**) > select **Data** in the left-hand menu > **Data manager** to see the data entered in your database.
-
+
## Make frontend updates
@@ -108,7 +108,7 @@ Let's learn how to enhance the app functionality by creating a delete flow for t
Now let's set up our local development environment to add features to the frontend. Click on your deployed branch and you will land on the **Deployments** page which shows you your build history and a list of deployed backend resources.
-
+
At the bottom of the page you will see a tab for **Deployed backend resources**. Click on the tab and then click the **Download amplify_outputs.json file** button.
@@ -215,7 +215,7 @@ npm run dev
This should start a local dev server at http://localhost:3000.
-
+
### 6. Implement login UI
@@ -306,7 +306,7 @@ The Authenticator component auto-detects your auth backend settings and renders
Try out your application in your localhost environment again. You should be presented with a login experience now.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
@@ -403,7 +403,7 @@ Now, let's go back to your local application and test out the user isolation of
You will need to sign up new users again because now you're working with the cloud sandbox instead of your production backend.
-
+
To get these changes to the cloud, commit them to git and push the changes upstream.
diff --git a/src/pages/contribute/getting-started.tsx b/src/pages/contribute/getting-started.tsx
index 628e0b4cbf0..615f9f00a89 100644
--- a/src/pages/contribute/getting-started.tsx
+++ b/src/pages/contribute/getting-started.tsx
@@ -5,6 +5,7 @@ import {
IconExternalLink
} from '@/components/Icons';
import { MDXCode } from '@/components/MDXComponents';
+import ExternalLink from '@/components/ExternalLink';
const meta = {
title: 'Getting started',
@@ -84,9 +85,9 @@ export default function GettingStarted() {
A GitHub account. You can create one{' '}
-
+
here .
-
+
@@ -97,12 +98,9 @@ export default function GettingStarted() {
Amplify JS development environment. Follow the steps{' '}
-
+
here
- {' '}
+ {' '}
to get set up.
@@ -110,12 +108,9 @@ export default function GettingStarted() {
Set up the Amplify Docs{' '}
-
+
development environment
-
+
.Optional
@@ -127,21 +122,18 @@ export default function GettingStarted() {
Start on the{' '}
-
+
contributing page
- {' '}
+ {' '}
of the Amplify JS repo and find the right issue for you.
@@ -245,12 +237,9 @@ export default function GettingStarted() {
-
+
Amplify JS Contributing Guidelines
-
+
Please read through these guidelines carefully before submitting a PR.
@@ -262,9 +251,9 @@ export default function GettingStarted() {
Learn more about the AWS Amplify JS library.
-
+
Amplify Community Discord server
-
+
This is a great place to meet other developers using Amplify, ask
@@ -272,18 +261,18 @@ export default function GettingStarted() {
-
+
The #contribute-to-javascript Discord channel
-
+
Meet other contributors and ask questions related to contributing to
Amplify JS.
-
+
Amplify Discord Office Hours
-
+
diff --git a/src/pages/gen1/[platform]/build-a-backend/auth/manage-mfa/index.mdx b/src/pages/gen1/[platform]/build-a-backend/auth/manage-mfa/index.mdx
index 4e734ca6dc8..128058f6ec2 100644
--- a/src/pages/gen1/[platform]/build-a-backend/auth/manage-mfa/index.mdx
+++ b/src/pages/gen1/[platform]/build-a-backend/auth/manage-mfa/index.mdx
@@ -755,7 +755,6 @@ Remembering a device is useful in conjunction with MFA because it allows the sec
**Note:** The [device tracking and remembering](https://aws.amazon.com/blogs/mobile/tracking-and-remembering-devices-using-amazon-cognito-your-user-pools/) features are not available if any of the following conditions are met:
- the federated OAuth flow with Cognito User Pools or Hosted UI is used, or
-- the User Pool uses `email/phone_number` or `alias` sign-in method, or
- when the `signIn` API uses the `USER_PASSWORD_AUTH` as the `authFlowType`.
diff --git a/src/pages/gen1/[platform]/build-a-backend/existing-resources/cdk/index.mdx b/src/pages/gen1/[platform]/build-a-backend/existing-resources/cdk/index.mdx
index afe0d3ee387..8d2afc44d30 100644
--- a/src/pages/gen1/[platform]/build-a-backend/existing-resources/cdk/index.mdx
+++ b/src/pages/gen1/[platform]/build-a-backend/existing-resources/cdk/index.mdx
@@ -318,7 +318,7 @@ npm start
**Step 8:** Use the form to create a few to-do items.
-
+
In this section, we generated GraphQL code, created React components, configured Amplify, and connected the app to the API. This enabled full CRUD functionality with our backend through queries and mutations.
@@ -817,7 +817,7 @@ class MyApp extends StatelessWidget {
flutter run -d chrome
```
-
+
diff --git a/src/pages/gen1/[platform]/build-a-backend/existing-resources/cli/index.mdx b/src/pages/gen1/[platform]/build-a-backend/existing-resources/cli/index.mdx
index 4fef338fdde..9c043bfb642 100644
--- a/src/pages/gen1/[platform]/build-a-backend/existing-resources/cli/index.mdx
+++ b/src/pages/gen1/[platform]/build-a-backend/existing-resources/cli/index.mdx
@@ -611,7 +611,7 @@ flutter run
-
+
### Conclusion
@@ -994,7 +994,7 @@ amplify publish
**Step 12:** Use the URL to run the app in the browser.
-
+
### Conclusion
diff --git a/src/pages/gen1/[platform]/build-ui/formbuilder/call-to-action/index.mdx b/src/pages/gen1/[platform]/build-ui/formbuilder/call-to-action/index.mdx
index 9f74e6062dd..fb45f7371b8 100644
--- a/src/pages/gen1/[platform]/build-ui/formbuilder/call-to-action/index.mdx
+++ b/src/pages/gen1/[platform]/build-ui/formbuilder/call-to-action/index.mdx
@@ -33,7 +33,7 @@ You can choose to show the action buttons on the bottom (default), top, or top a
2. Go to **Display** > **Position**
3. Select **Bottom**, **Top**, or **Top & bottom**
-
+
## Customize label for Submit, Cancel, Clear, and Reset buttons
@@ -43,7 +43,7 @@ You can customize action button labels to better describe your form's use case,
2. Go to **Display** > **Submit button label**
3. Enter your custom button label
-
+
## Toggle visibility for Submit, Cancel, Clear, and Reset buttons
@@ -53,6 +53,6 @@ You can customize the visibility of action buttons to better accommodate your fo
2. Go to **Display** > **Submit button is visible**
3. Enter your custom button label
-
+
If you hide all form action buttons, you can still leverage the [`onChange` event handler](/gen1/[platform]/build-ui/formbuilder/lifecycle/#get-form-data-as-your-user-inputs-data---onchange) to self-manage the form lifecycle. This is useful for a form that updates data in real-time without explicit user confirmation.
diff --git a/src/pages/gen1/[platform]/build-ui/formbuilder/customize/index.mdx b/src/pages/gen1/[platform]/build-ui/formbuilder/customize/index.mdx
index a36c7735047..c38bac8878a 100644
--- a/src/pages/gen1/[platform]/build-ui/formbuilder/customize/index.mdx
+++ b/src/pages/gen1/[platform]/build-ui/formbuilder/customize/index.mdx
@@ -48,7 +48,7 @@ Add form inputs to personalize the form to your use case. To add a form element:
3. Click the blue bar with the (+) sign.
4. Select the form input you want to add.
-
+
Every input element in your form can be customized. Select a field in the form to open the configuration menu, where you can customize parts of the input, like its display label and placeholder.
@@ -62,7 +62,7 @@ Rearrange form inputs vertically or horizontally.
2. Move form input above, below, left, or right of another form input
3. Drop when a blue bar appears, indicating the form input's new placement
-
+
## View form as end user
@@ -70,7 +70,7 @@ If you want to quickly test your form customizations, select **View as end user*
**Note:** If your form is connected to a data model, then form data will be saved to the cloud upon clicking **Submit**. If this app is being used in production, the data you are saving may be visible to customers.
-
+
## Configure form spacings (paddings and gaps)
@@ -82,7 +82,7 @@ Add spacing to your form and between inputs. The spacing editor allows you to se
Spacing values can either be a CSS length value (`px`, `rem`, `em`, `%`) or a reference to your theme object's spacing value (`xss`, `medium`, `large`).
-
+
## Configure options for Select, Radio Group, or Autocomplete Field
@@ -92,7 +92,7 @@ Spacing values can either be a CSS length value (`px`, `rem`, `em`, `%`) or a re
2. Go to **Data > Options**
3. Enter available options line-by-line or paste in a JSON array, such as `["Not started", "In progress", "Done"]`
-
+
## Enable list inputs
@@ -106,7 +106,7 @@ Spacing values can either be a CSS length value (`px`, `rem`, `em`, `%`) or a re
Here is what a list input looks like for the end user:
-
+
## Add sectional elements
@@ -118,7 +118,7 @@ Use sectional elements to divide your form up into multiple parts. This is usefu
4. Scroll to the bottom of the element search list
5. Select **Heading**, **Divider**, or **Text**
-
+
## Delete a form input
diff --git a/src/pages/gen1/[platform]/build-ui/formbuilder/special-inputs/index.mdx b/src/pages/gen1/[platform]/build-ui/formbuilder/special-inputs/index.mdx
index 983373ef78c..b77d4185d25 100644
--- a/src/pages/gen1/[platform]/build-ui/formbuilder/special-inputs/index.mdx
+++ b/src/pages/gen1/[platform]/build-ui/formbuilder/special-inputs/index.mdx
@@ -67,7 +67,7 @@ When you are satisfied with your form configuration and style, [your forms can b
[**Storage Manager**](https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager) fields allow your forms to accept file uploads, which are stored in an Amazon S3 bucket connected to your Amplify app. After uploading, that file's S3 key is stored in your data model, allowing for systematic retrieval using the [Amplify JS library](/gen1/[platform]/build-a-backend/storage/download/).
-
+
### Prerequisites
diff --git a/src/pages/gen1/[platform]/build-ui/formbuilder/validations/index.mdx b/src/pages/gen1/[platform]/build-ui/formbuilder/validations/index.mdx
index 50152188710..c24db66ea2c 100644
--- a/src/pages/gen1/[platform]/build-ui/formbuilder/validations/index.mdx
+++ b/src/pages/gen1/[platform]/build-ui/formbuilder/validations/index.mdx
@@ -38,7 +38,7 @@ In [Amplify Studio](/gen1/[platform]/tools/console/adminui/start/#logging-in-and
To test the validation rules, select **View as end user**.
-
+
### Available validation rules within Amplify Studio
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6eaeb253596..3c6d25e3819 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -122,7 +122,7 @@ export default function Page() {
Develop
-
+