diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index 852077ead4d..c186704179e 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -382,6 +382,9 @@ export const directory = { { path: 'src/pages/[platform]/build-a-backend/functions/streaming-logs/index.mdx' }, + { + path: 'src/pages/[platform]/build-a-backend/functions/add-lambda-layers/index.mdx' + }, { path: 'src/pages/[platform]/build-a-backend/functions/grant-access-to-other-resources/index.mdx' }, @@ -909,9 +912,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]/build-a-backend/auth/moving-to-production/index.mdx b/src/pages/[platform]/build-a-backend/auth/moving-to-production/index.mdx index 806169a83e0..cf624701280 100644 --- a/src/pages/[platform]/build-a-backend/auth/moving-to-production/index.mdx +++ b/src/pages/[platform]/build-a-backend/auth/moving-to-production/index.mdx @@ -44,31 +44,50 @@ To get started with Amazon SES in production, you must first [request production After you have configured your account for production access and have verified your _sender_ email, you can configure your Cognito user pool to send emails using the verified sender: -```ts title="amplify/backend.ts" -import { EmailIdentity } from 'aws-cdk-lib/aws-ses'; -import { defineBackend } from '@aws-amplify/backend'; -import { auth } from './auth/resource'; - -const backend = defineBackend({ - auth -}); - -const { cfnUserPool } = backend.auth.resources.cfnResources; - -const email = EmailIdentity.fromEmailIdentityName( - backend.auth.stack, - 'EmailIdentity', - // your email configured for use in SES - process.env.EMAIL -); - -cfnUserPool.emailConfiguration = { - emailSendingAccount: 'DEVELOPER', - sourceArn: email.emailIdentityArn -}; +```ts title="amplify/auth/resource.ts" +import { defineAuth } from "@aws-amplify/backend" + +/** + * Define and configure your auth resource + * @see https://docs.amplify.aws/react/build-a-backend/auth + */ +export const auth = defineAuth({ + loginWith: { + email: true, + }, + senders: { + email: { + // configure using the email registered and verified in Amazon SES + fromEmail: "registrations@example.com", + }, + }, +}) ``` -Now when emails are sent on new user sign-ups, password resets, etc., the sending account will be your verified email. +Now when emails are sent on new user sign-ups, password resets, etc., the sending account will be your verified email! To customize further, you can change the display name of the sender, or optionally apply a custom address for your users to reply. + +```ts title="amplify/auth/resource.ts" +import { defineAuth } from "@aws-amplify/backend" + +/** + * Define and configure your auth resource + * @see https://docs.amplify.aws/react/build-a-backend/auth + */ +export const auth = defineAuth({ + loginWith: { + email: true, + }, + senders: { + email: { + fromEmail: "registrations@example.com", + // highlight-start + fromName: "MyApp", + replyTo: "inquiries@example.com" + // highlight-end + }, + }, +}) +``` ## SMS 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({ diff --git a/src/pages/[platform]/build-a-backend/functions/add-lambda-layers/index.mdx b/src/pages/[platform]/build-a-backend/functions/add-lambda-layers/index.mdx new file mode 100644 index 00000000000..692dd796868 --- /dev/null +++ b/src/pages/[platform]/build-a-backend/functions/add-lambda-layers/index.mdx @@ -0,0 +1,61 @@ +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Lambda Layers', + description: + 'Learn how to add layers to your function', + platforms: [ + 'android', + 'angular', + 'flutter', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'swift', + 'vue' + ] +}; + +export function getStaticPaths() { + return getCustomStaticPath(meta.platforms); +} + +export function getStaticProps() { + return { + props: { + meta + } + }; +} + +Amplify offers the ability to add layers to your Functions which contain your library dependencies. To get started, specify the `layers` property in `defineFunction`: + +```ts title="amplify/functions/my-function/resource.ts" +import { defineFunction } from "@aws-amplify/backend"; + +export const myFunction = defineFunction({ + name: "my-function", + layers: { + "@aws-lambda-powertools/logger": + "arn:aws:lambda:us-east-1:094274105915:layer:AWSLambdaPowertoolsTypeScriptV2:12", + }, +}); +``` + +The Lambda layer is represented by an object of key/value pairs where the key is the module name that is exported from your layer and the value is the ARN of the layer. The key (module name) is used to externalize the module dependency so it doesn't get bundled with your lambda function. A maximum of 5 layers can be attached to a function, and they must be in the same region as the function. + +Then use the locally installed module in the function handler: +```ts title="amplify/functions/my-function/handler.ts" +import { Logger } from "@aws-lambda-powertools/logger"; +import type { Handler } from "aws-lambda"; + +const logger = new Logger({ serviceName: "serverlessAirline" }); + +export const handler: Handler = async (event, context) => { + logger.info("Hello World"); +}; +``` + +For further information on creating and managing your layers refer to [AWS documentation for Lambda layers](https://docs.aws.amazon.com/lambda/latest/dg/chapter-layers.html) + 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. diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index ae339cb1935..757302d6aa1 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. @@ -540,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

+ {/* ... */} +
) } ``` 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 c1be1953949..086032158b9 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 @@ -219,43 +219,73 @@ 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 **app/layout.tsx** file, import the Authenticator UI component and wrap the children or pages components. -```bash showLineNumbers={false} -npm add @aws-amplify/ui-react -``` - -Next, import the Authenticator UI component and wrap your `
` element. +```tsx title="app/layout.tsx" +"use client" -```tsx title="app/page.tsx" +import React from "react"; +import { Amplify } from "aws-amplify"; +import "./app.css"; // highlight-start -import { Authenticator } from '@aws-amplify/ui-react' -import '@aws-amplify/ui-react/styles.css' +import { Authenticator } from "@aws-amplify/ui-react"; +import "@aws-amplify/ui-react/styles.css"; // highlight-end -// ... other imports +import outputs from "@/amplify_outputs.json"; -function App() { - // ... +Amplify.configure(outputs); + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { return ( // highlight-start - - {({ signOut, user }) => ( + + + + {children} + + + // highlight-end -
- {/*...*/} - // highlight-next-line - -
- )} - // 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. +In your **app/page.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="app/page.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.