From 121c506c1dd3577d12c3e671d5e9c89565892c82 Mon Sep 17 00:00:00 2001 From: "Peter V." <98245483+p5quared@users.noreply.github.com> Date: Mon, 7 Oct 2024 14:38:01 -0700 Subject: [PATCH 1/9] fix: default() applies to scalars and enums, not arrays (#7997) --- .../build-a-backend/data/data-modeling/add-fields/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/data/data-modeling/add-fields/index.mdx b/src/pages/[platform]/build-a-backend/data/data-modeling/add-fields/index.mdx index 37d008a8cdf..62688b8f777 100644 --- a/src/pages/[platform]/build-a-backend/data/data-modeling/add-fields/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/data-modeling/add-fields/index.mdx @@ -224,7 +224,7 @@ const schema = a.schema({ ## Assign default values for fields -You can use the `.default(...)` modifier to specify a default value for optional [scalar type fields and arrays](https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html). The `.default(...)` modifier is not available for custom types, enums, or relationships. +You can use the `.default(...)` modifier to specify a default value for optional [scalar type fields and enums](https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html). The `.default(...)` modifier is not available for custom types, arrays, or relationships. ```ts const schema = a.schema({ From 58be95127b299e3c07f5dd47c414a3f586513e8c Mon Sep 17 00:00:00 2001 From: josef Date: Mon, 7 Oct 2024 17:34:59 -0500 Subject: [PATCH 2/9] temporarily remove permissions boundary page (#7902) --- src/directory/directory.mjs | 3 -- .../reference/permissions-boundary/index.mdx | 49 ------------------- 2 files changed, 52 deletions(-) delete mode 100644 src/pages/[platform]/reference/permissions-boundary/index.mdx diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index 852077ead4d..2be82428481 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -909,9 +909,6 @@ export const directory = { { path: 'src/pages/[platform]/reference/iam-policy/index.mdx' }, - { - path: 'src/pages/[platform]/reference/permissions-boundary/index.mdx' - }, { path: 'src/pages/[platform]/reference/telemetry/index.mdx' }, diff --git a/src/pages/[platform]/reference/permissions-boundary/index.mdx b/src/pages/[platform]/reference/permissions-boundary/index.mdx deleted file mode 100644 index 2daaa5c8bf8..00000000000 --- a/src/pages/[platform]/reference/permissions-boundary/index.mdx +++ /dev/null @@ -1,49 +0,0 @@ -import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; - -export const meta = { - title: 'IAM Permissions Boundary', - description: 'Apply a Permissions Boundary to all IAM Roles created by Amplify.', - 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 - } - }; -} - - -To set the maximum permissions that can be granted to IAM Roles created by Amplify, configure a [permissions boundary](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_boundaries.html) for the [AWS environment](https://docs.aws.amazon.com/cdk/v2/guide/environments.html) (i.e. AWS account & region). Then, Amplify-generated IAM roles can perform only the actions that are allowed by both the roles’ policies and permissions boundary. - -The IAM permissions boundary will apply to all IAM Roles created by Amplify. This includes the "auth role" assumed by users that log into the app and the "unauth role" assumed by guest users. It also applies to Lambda execution roles, Cognito user group roles, and any role configured in a [custom resource stack](/[platform]/build-a-backend/add-aws-services/custom-resources/). - -The IAM Policy to be used as a permissions boundary must be configured outside of Amplify. A permissions boundary is an [IAM Policy](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_create-console.html). This is usually part of an AWS Organization rule or some other corporate governance requirement. Once you have created an IAM Policy to use as a permissions boundary, copy the IAM Policy ARN for the next steps. - -## Set up a permissions boundary in an AWS environment - - -```bash title="Terminal" showLineNumbers={false} -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. From 8efcad166dbf8846291daec81a3c2176490af964 Mon Sep 17 00:00:00 2001 From: josef Date: Tue, 8 Oct 2024 12:33:45 -0500 Subject: [PATCH 3/9] update react quickstart to revise todo state, authenticator placement (#8016) --- .../[platform]/start/quickstart/index.mdx | 71 +++++++++++++------ 1 file changed, 49 insertions(+), 22 deletions(-) diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index ae339cb1935..43813e53684 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -436,36 +436,63 @@ This should start a local dev server at http://localhost:5173. The starter application already has a pre-configured auth backend defined in the **amplify/auth/resource.ts** file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook. -The fastest way to get your login experience up and running is to use our Authenticator UI component. In your **src/App.tsx** file, import the Authenticator UI component and wrap your `
` element. +The fastest way to get your login experience up and running is to use our Authenticator UI component. In your **src/main.tsx** file, import the Authenticator UI component and wrap your `` component. + +```tsx title="src/main.tsx" +import React from 'react'; +import ReactDOM from 'react-dom/client'; +// highlight-next-line +import { Authenticator } from '@aws-amplify/ui-react'; +import { Amplify } from 'aws-amplify'; +import App from './App.tsx'; +import outputs from '../amplify_outputs.json'; +import './index.css'; +// highlight-next-line +import '@aws-amplify/ui-react/styles.css'; + +Amplify.configure(outputs); + +ReactDOM.createRoot(document.getElementById('root')!).render( + // highlight-start + + + + + + // highlight-end +); +``` + +The Authenticator component auto-detects your auth backend settings and renders the correct UI state based on the auth backend's authentication flow. + +In your `src/App.tsx` file, add a button to enable users to sign out of the application. Import the [`useAuthenticator`](https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced#access-auth-state) hook from the Amplify UI library to hook into the state of the Authenticator. ```tsx title="src/App.tsx" -// highlight-start -import { Authenticator } from '@aws-amplify/ui-react' -import '@aws-amplify/ui-react/styles.css' -// highlight-end -// ... other imports +import type { Schema } from '../amplify/data/resource'; +// highlight-next-line +import { useAuthenticator } from '@aws-amplify/ui-react'; +import { useEffect, useState } from 'react'; +import { generateClient } from 'aws-amplify/data'; + +const client = generateClient(); function App() { + // highlight-next-line + const { signOut } = useAuthenticator(); + // ... + return ( - // highlight-start - - {({ signOut }) => ( - // highlight-end -
- {/*...*/} - // highlight-next-line - -
- // highlight-start - )} - - // highlight-end - ) +
+ {/* ... */} + // highlight-next-line + +
+ ); } -``` -The Authenticator component auto-detects your auth backend settings and renders the correct UI state based on the auth backend's authentication flow. +export default App; +``` Try out your application in your localhost environment again. You should be presented with a login experience now. From 10480fd3b8c01038b66a9fab48b2eb46d0ea23a7 Mon Sep 17 00:00:00 2001 From: Jay Raval Date: Wed, 9 Oct 2024 18:35:18 -0400 Subject: [PATCH 4/9] update react quickstart to remove Authenticator reference from App.tsx (#8027) * remove Authenticator ref from src/App.tsx * update code style --- .../[platform]/start/quickstart/index.mdx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index 43813e53684..757302d6aa1 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -567,24 +567,23 @@ export const data = defineData({ }); ``` -In the application client code, let's also render the username to distinguish different users once they're logged in. Go to your **src/App.tsx** file and render the `user` property. +In the application client code, let's also render the username to distinguish different users once they're logged in. Go to your **src/App.tsx** file and render the `user` property from the `useAuthenticator` hook. ```tsx title="src/App.tsx" // ... imports function App() { + // highlight-next-line + const { user, signOut } = useAuthenticator(); + // ... + return ( - +
// highlight-next-line - {({ signOut, user }) => ( -
- // highlight-next-line -

{user?.signInDetails?.loginId}'s todos

- {/* ... rest of the UI */} -
- )} - +

{user?.signInDetails?.loginId}'s todos

+ {/* ... */} +
) } ``` From d489f47665d68d29d4efebb671cc7433d601eeb6 Mon Sep 17 00:00:00 2001 From: Jay Raval Date: Wed, 9 Oct 2024 18:43:40 -0400 Subject: [PATCH 5/9] update next pages quickstart to revise todo state and authenticator placement (#8026) * update next pages quickstart to revise todo state and authenticator placement * update code style --- .../quickstart/nextjs-pages-router/index.mdx | 85 +++++++++++-------- 1 file changed, 51 insertions(+), 34 deletions(-) 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 ed36e518f96..334af273969 100644 --- a/src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx +++ b/src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx @@ -221,39 +221,28 @@ This should start a local dev server at http://localhost:3000. The starter application already has a pre-configured auth backend defined in the **amplify/auth/resource.ts** file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook. -The fastest way to get your login experience up and running is to use our Authenticator UI component. First, install the Amplify UI component library: +The fastest way to get your login experience up and running is to use our Authenticator UI component. In your **pages/_app.tsx** file, import the Authenticator UI component and wrap your `` component. -```bash showLineNumbers={false} -npm add @aws-amplify/ui-react -``` - -Next, import the Authenticator UI component and wrap your `
` element. - - -```tsx title="pages/index.tsx" +```tsx title="pages/_app.tsx" +import type { AppProps } from "next/app"; // highlight-start import { Authenticator } from '@aws-amplify/ui-react' import '@aws-amplify/ui-react/styles.css' // highlight-end -// ... other imports +import "@/styles/app.css"; +import { Amplify } from "aws-amplify"; +import outputs from "@/amplify_outputs.json"; -function App() { - // ... - return ( +Amplify.configure(outputs); + +export default function App({ Component, pageProps }: AppProps) { + return( // highlight-start - {({ signOut, user }) => ( - // highlight-end -
- {/*...*/} - // highlight-next-line - -
- // highlight-start - )} + ; // highlight-end - ) + ) } ``` @@ -305,6 +294,35 @@ export const auth = defineAuth({ The Authenticator component auto-detects your auth backend settings and renders the correct UI state based on the auth backend's authentication flow. +In your **pages/index.tsx** file, add a button to enable users to sign out of the application. Import the [`useAuthenticator`](https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced#access-auth-state) hook from the Amplify UI library to hook into the state of the Authenticator. + +```tsx title="pages/index.tsx" +import type { Schema } from "@/amplify/data/resource"; +// highlight-next-line +import { useAuthenticator } from "@aws-amplify/ui-react"; +import { useState, useEffect } from "react"; +import { generateClient } from "aws-amplify/data"; + +const client = generateClient(); + +export default function HomePage() { + + // highlight-start + const { signOut } = useAuthenticator(); + // highlight-end + + // ... + + return ( +
+ {/* ... */} + // highlight-next-line + +
+ ); +} +``` + Try out your application in your localhost environment again. You should be presented with a login experience now.