add page for configuring client library in functions (#8167)

* add page for configuring client library in functions

* Update src/pages/[platform]/build-a-backend/functions/configure-client-library/index.mdx

Co-authored-by: Kethan sai <[email protected]>

* Update cspell.json

---------

Co-authored-by: Kethan sai <[email protected]>
Co-authored-by: Dan Kiuna <[email protected]>
Co-authored-by: ashika112 <[email protected]>

Author: 4 people

cspell.json

@@ -1623,6 +1623,7 @@
     "rehype",
     "assetlinks",
     "AMPLIFYRULES",
+    "preconfigured",
     "manylinux",
     "GOARCH",
     "norpc"

src/directory/directory.mjs

@@ -408,6 +408,9 @@ export const directory = {
                 {
                   path: 'src/pages/[platform]/build-a-backend/functions/configure-functions/index.mdx'
                 },
+                {
+                  path: 'src/pages/[platform]/build-a-backend/functions/configure-client-library/index.mdx'
+                },
                 {
                   path: 'src/pages/[platform]/build-a-backend/functions/scheduling-functions/index.mdx'
                 },

src/pages/[platform]/build-a-backend/functions/configure-client-library/index.mdx

@@ -0,0 +1,94 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+  title: 'Configure client library',
+  description:
+    'Learn how to configure the aws-amplify client library in function handlers',
+  platforms: [
+    'android',
+    'angular',
+    'flutter',
+    'javascript',
+    'nextjs',
+    'react',
+    'react-native',
+    'swift',
+    'vue'
+  ]
+};
+
+export function getStaticPaths() {
+  return getCustomStaticPath(meta.platforms);
+}
+
+export function getStaticProps() {
+  return {
+    props: {
+      meta
+    }
+  };
+}
+
+The [`aws-amplify`](https://www.npmjs.com/package/aws-amplify) client library can be configured for use inside function handler files by using the credentials available from the AWS Lambda runtime. To get started, use the `getAmplifyDataClientConfig` from the backend runtime package and pass the generated `env` object to retrieve the preconfigured `resourceConfig` and `libraryOptions`.
+
+```ts title="amplify/my-function/handler.ts"
+import { getAmplifyDataClientConfig } from '@aws-amplify/backend/function/runtime';
+import { env } from '$amplify/env/my-function';
+
+const { resourceConfig, libraryOptions } = await getAmplifyDataClientConfig(
+  env
+);
+```
+
+<Callout warning>
+
+When using `getAmplifyDataClientConfig`, your function requires schema information stored in an Amplify deployed Amazon S3 bucket. This bucket is created during backend deployment and includes necessary access grants for your function. Modifying this bucket outside of the backend deployment process may cause unexpected failures on your function.
+
+</Callout>
+
+`resourceConfig` and `libraryOptions` are returned for you to pass into `Amplify.configure`. This will instruct the client library which resources it can interact with, and where to retrieve AWS credentials to use when signing requests to those resources.
+
+```ts title="amplify/my-function/handler.ts"
+import { getAmplifyDataClientConfig } from '@aws-amplify/backend/function/runtime';
+// highlight-next-line
+import { Amplify } from 'aws-amplify';
+import { env } from '$amplify/env/my-function';
+
+const { resourceConfig, libraryOptions } = await getAmplifyDataClientConfig(
+  env
+);
+
+// highlight-next-line
+Amplify.configure(resourceConfig, libraryOptions);
+```
+
+The client library will now have access to perform operations against other AWS resources as specified by the function's IAM role. This is handled for you when [granting access to other resources using the `access` property](/[platform]/build-a-backend/functions/grant-access-to-other-resources/#using-the-access-property), however it can also be [extended using CDK](/[platform]/build-a-backend/functions/grant-access-to-other-resources/#using-cdk).
+
+## Under the hood
+
+The `getAmplifyDataClientConfig` function assists with creating the arguments' values to pass to `Amplify.configure`, which reads from the generated `env` object in order to produce configuration for the resources you have granted your function access to interact with. Under the hood this is also generating the configuration that specifies how the client library should behave, namely where the library should read credentials.
+
+```ts title="amplify/my-function/handler.ts"
+import { env } from "$amplify/env/my-function";
+
+Amplify.configure(
+  {/* resource configuration */},
+  {
+    Auth: {
+      credentialsProvider: {
+        // instruct the client library to read credentials from the environment
+        getCredentialsAndIdentityId: async () => ({
+          credentials: {
+            accessKeyId: env.AWS_ACCESS_KEY_ID,
+            secretAccessKey: env.AWS_SECRET_ACCESS_KEY,
+            sessionToken: env.AWS_SESSION_TOKEN,
+          },
+        }),
+        clearCredentialsAndIdentityId: () => {
+          /* noop */
+        },
+      },
+    },
+  }
+);
+```