Merge remote-tracking branch 'upstream/main' into update-cdk-examples…

…-using-amplify-stacks

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'
             },

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
 

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({

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)
+

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 `<main>` 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 `<App>` 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
+  <React.StrictMode>
+    <Authenticator>
+      <App />
+    </Authenticator>
+  </React.StrictMode>
+  // 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<Schema>();
 
 function App() {
+  // highlight-next-line
+  const { signOut } = useAuthenticator();
+
   // ...
+
   return (
-    // highlight-start
-    <Authenticator>
-      {({ signOut }) => (
-    // highlight-end
-        <main>
-          {/*...*/}
-          // highlight-next-line
-          <button onClick={signOut}>Sign out</button>
-        </main>
-    // highlight-start
-      )}
-    </Authenticator>
-    // highlight-end
-  )
+    <main>
+      {/* ... */}
+      // highlight-next-line
+      <button onClick={signOut}>Sign out</button>
+    </main>
+  );
 }
-```
 
-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 (
-    <Authenticator>
+    <main>
       // highlight-next-line
-      {({ signOut, user }) => (
-        <main>
-          // highlight-next-line
-          <h1>{user?.signInDetails?.loginId}'s todos</h1>
-          {/* ... rest of the UI */}
-        </main>
-      )}
-    </Authenticator>
+      <h1>{user?.signInDetails?.loginId}'s todos</h1>
+      {/* ... */}
+    </main>
   )
 }
 ```