Android QuickStart fixes and amplify_outputs.json naming issues. (#7395)

Author: tylerjroach

src/components/MDXComponents/MDXCode.tsx

@@ -27,6 +27,10 @@ const addVersions = (code: string) => {
   );
   code = code.replace(/ANDROID_SDK_VERSION/g, versions.ANDROID_SDK_VERSION);
   code = code.replace(/KOTLIN_SDK_VERSION/g, versions.KOTLIN_SDK_VERSION);
+  code = code.replace(
+    /ANDROID_AUTHENTICATOR_VERSION/g,
+    versions.ANDROID_AUTHENTICATOR_VERSION
+  );
   return code;
 };
 

src/constants/versions.ts

@@ -1,9 +1,10 @@
 export const versions = {
-  ANDROID_VERSION: '2.14.11',
+  ANDROID_VERSION: '2.16.0',
   ANDROID_DEVPREVIEW: '1.36.5-dev-preview.0',
   ANDROID_V1_VERSION: '1.38.8',
   ANDROID_V1_GEO_VERSION: '1.0.1',
   ANDROID_V1_KOTLIN_VERSION: '0.22.8',
   ANDROID_SDK_VERSION: '2.73.0',
-  KOTLIN_SDK_VERSION: '1.0.44'
+  KOTLIN_SDK_VERSION: '1.0.44',
+  ANDROID_AUTHENTICATOR_VERSION: '1.2.0'
 };

src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx

@@ -631,9 +631,8 @@ Add the following dependencies to your *app*'s `build.gradle` file and click "Sy
 <Block name="Kotlin DSL">
 ```kotlin
 dependencies {
-    implementation("androidx.compose.material3:material3:1.1.0")
     implementation("com.amplifyframework.ui:authenticator:1.1.0")
-    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:1.1.5")
+    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.3")
 }
 ```
 </Block>
@@ -644,10 +643,9 @@ dependencies {
   dependencies {    
     // Authenticator dependency
     implementation 'com.amplifyframework.ui:authenticator:1.1.0'
-    implementation 'androidx.compose.material3:material3:1.1.0'
     
     // Support for Java 8 features
-    coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:1.1.5'
+    coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:2.0.3'
   }
 }
 ```

src/pages/[platform]/start/quickstart/index.mdx

@@ -137,18 +137,18 @@ git clone https://github.com/<github-user>/amplify-vite-react-template.git
 cd amplify-vite-react-template && npm install
 ```
 
-Now move the `amplify-outputs.json` file you downloaded above to the root of your project.
+Now move the `amplify_outputs.json` file you downloaded above to the root of your project.
 
 ```text
 ├── amplify
 ├── src
-├── amplify-outputs.json <== backend outputs file
+├── amplify_outputs.json <== backend outputs file
 ├── package.json
 └── tsconfig.json
 ```
 
-<Accordion title='amplify-outputs.json' headingLevel='4' eyebrow='Learn more'>
-The **amplify-outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
+<Accordion title='amplify_outputs.json' headingLevel='4' eyebrow='Learn more'>
+The **amplify_outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
 </Accordion>
 
 
@@ -274,7 +274,7 @@ To start your cloud sandbox, run the following command in a **new Terminal windo
 npx amplify sandbox
 ```
 
-Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify-outputs.json` file updated with connection information to a new isolated authentication and data backend.
+Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify_outputs.json` file updated with connection information to a new isolated authentication and data backend.
 
 <Callout info>
 
@@ -474,18 +474,18 @@ git clone https://github.com/<github-user>/amplify-vue-template.git
 cd amplify-vue-template && npm install
 ```
 
-Now move the `amplify-output.json` file you downloaded above to the root of your project.
+Now move the `amplify_outputs.json` file you downloaded above to the root of your project.
 
 ```text
 ├── amplify
 ├── src
-├── amplify-outputs.json <== backend outputs file
+├── amplify_outputs.json <== backend outputs file
 ├── package.json
 └── tsconfig.json
 ```
 
-<Accordion title='amplify-outputs.json' headingLevel='4' eyebrow='Learn more'>
-The **amplify-outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
+<Accordion title='amplify_outputs.json' headingLevel='4' eyebrow='Learn more'>
+The **amplify_outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
 </Accordion>
 
 
@@ -618,7 +618,7 @@ To start your cloud sandbox, run the following command in a **new Terminal windo
 npx amplify sandbox
 ```
 
-Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify-outputs.json` file updated with connection information to a new isolated authentication and data backend.
+Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify_outputs.json` file updated with connection information to a new isolated authentication and data backend.
 
 <Callout info>
 
@@ -807,18 +807,18 @@ git clone https://github.com/<github-user>/amplify-vite-react-template.git
 cd amplify-vite-react-template && npm install
 ```
 
-Now move the `amplify-output.json` file you downloaded above to the root of your project.
+Now move the `amplify_outputs.json` file you downloaded above to the root of your project.
 
 ```text
 ├── amplify
 ├── src
-├── amplify-outputs.json <== backend outputs file
+├── amplify_outputs.json <== backend outputs file
 ├── package.json
 └── tsconfig.json
 ```
 
-<Accordion title='amplify-outputs.json' headingLevel='4' eyebrow='Learn more'>
-The **amplify-outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
+<Accordion title='amplify_outputs.json' headingLevel='4' eyebrow='Learn more'>
+The **amplify_outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
 </Accordion>
 
 
@@ -966,7 +966,7 @@ To start your cloud sandbox, run the following command in a **new Terminal windo
 npx amplify sandbox
 ```
 
-Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify-outputs.json` file updated with connection information to a new isolated authentication and data backend.
+Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify_outputs.json` file updated with connection information to a new isolated authentication and data backend.
 
 <Callout info>
 
@@ -1523,7 +1523,7 @@ To deploy your backend use Amplify's per-developer cloud sandbox. This feature p
 npx amplify 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.
+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.
 
 <video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
   <source src="/images/gen2/getting-started/ios/ios-getting-started-2.mp4" />
@@ -1945,31 +1945,30 @@ In **Select a Project Template**, select **Empty Activity** or **Empty Compose A
 
 </Accordion>
 
-On the **Deployed backend resources**, choose **Download outputs file** to download the `amplify-output.json` file that contains identifiers for all the deployed backend resources.
+On the **Deployed backend resources**, choose **Download outputs file** to download the `amplify_outputs.json` file that contains identifiers for all the deployed backend resources.
 
 ![outputs](/images/gen2/getting-started/react/amplify-outputs-download.png)
 
 
-Now move the `amplify-output.json` file you downloaded above to `app/src/main/res/raw` in your Android project. You will now be able to connect to this backend.
+Now move the `amplify_outputs.json` file you downloaded above to `app/src/main/res/raw` in your Android project. You will now be able to connect to this backend.
 
-<Accordion title='amplify-outputs.json' headingLevel='4' eyebrow='Learn more'>
-The **amplify-outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
+<Accordion title='amplify_outputs.json' headingLevel='4' eyebrow='Learn more'>
+The **amplify_outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend. 
 </Accordion>
 
 
 ### 5. Implement login UI
 
-The deployed backend 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 deployed backend application already has a pre-configured auth backend defined in the `amplify/auth/resource.ts` file.
 
 The fastest way to get your login experience up and running is to use our Authenticator UI component. To use the Authenticator UI component, you need to add the following dependencies to your app/build.gradle file:
 
 <Callout warning>Be sure to have compileSdk version as 34 or higher.</Callout>
 
 ```kotlin title="app/build.gradle"
 dependencies {
-    implementation("androidx.compose.material3:material3:1.1.0")
-    implementation("com.amplifyframework.ui:authenticator:1.1.0")
-    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:1.1.5")
+    implementation("com.amplifyframework.ui:authenticator:ANDROID_AUTHENTICATOR_VERSION")
+    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.3")
 }
 ```
 
@@ -2071,7 +2070,7 @@ In the command below, replace the APP-ID with your Amplify app ID. Find this in
 
 ```bash title="Terminal" showLineNumbers={false}
 cd my-android-app
-npx @aws-amplify/backend-cli graphql-client-code --format modelgen --model-target java --out app/src/main/java --app-id <your-amplify-app-id> --branch-name main
+npx @aws-amplify/backend-cli generate graphql-client-code --format modelgen --model-target java --out app/src/main/java --app-id <your-amplify-app-id> --branch main
 ```
 
 Once you are done, add the following dependencies to your project:
@@ -2080,8 +2079,7 @@ Once you are done, add the following dependencies to your project:
 dependencies {
     // Amplify API dependencies
     // highlight-start
-    implementation("com.amplifyframework:aws-api:2.14.11")
-    implementation("com.amplifyframework:core:2.14.11")
+    implementation("com.amplifyframework:aws-api:ANDROID_VERSION")
     // highlight-end
     // ... other dependencies
 }
@@ -2296,7 +2294,7 @@ In the command below, replace the APP-ID with your Amplify app ID. Find this in
 </Accordion>
 
 ```bash showLineNumbers={false}
-npx @aws-amplify/backend-cli generate outputs --format modelgen --model-target java --out app/src/main/java --app-id <your-amplify-app-id> --branch-name main
+npx @aws-amplify/backend-cli generate graphql-client-code --format modelgen --model-target java --out app/src/main/java --app-id <your-amplify-app-id> --branch main
 ```
 
 Also update your `amplify_outputs` file with the latest outputs information.

src/pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx

@@ -130,13 +130,13 @@ Now move the `amplifyconfiguration.json` file you downloaded above to the root o
 ```text
 ├── amplify
 ├── src
-├── amplify-outputs.json <== backend outputs file
+├── amplify_outputs.json <== backend outputs file
 ├── package.json
 └── tsconfig.json
 ```
 
-<Accordion title='amplify-outputs.json' headingLevel='4' eyebrow='Learn more'>
-The **amplify-outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
+<Accordion title='amplify_outputs.json' headingLevel='4' eyebrow='Learn more'>
+The **amplify_outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
 </Accordion>
 
 ### 5. Implement delete functionality
@@ -302,7 +302,7 @@ To start your cloud sandbox, run the following command in a **new Terminal windo
 npx amplify sandbox
 ```
 
-Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify-outputs.json` file updated with connection information to a new isolated authentication and data backend.
+Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify_outputs.json` file updated with connection information to a new isolated authentication and data backend.
 
 <Callout info>
 

src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx

@@ -131,13 +131,13 @@ Now move the `amplifyconfiguration.json` file you downloaded above to the root o
 ```text
 ├── amplify
 ├── src
-├── amplify-outputs.json <== backend outputs file
+├── amplify_outputs.json <== backend outputs file
 ├── package.json
 └── tsconfig.json
 ```
 
-<Accordion title='amplify-outputs.json' headingLevel='4' eyebrow='Learn more'>
-The **amplify-outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
+<Accordion title='amplify_outputs.json' headingLevel='4' eyebrow='Learn more'>
+The **amplify_outputs.json** file contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this outputs file to connect to your Amplify Backend.  You can review how the outputs file is imported within the `main.tsx` file and then passed into the `Amplify.configure(...)` function of the Amplify client library. 
 </Accordion>
 
 ### 5. Implement delete functionality
@@ -349,7 +349,7 @@ To start your cloud sandbox, run the following command in a **new Terminal windo
 npx amplify sandbox
 ```
 
-Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify-outputs.json` file updated with connection information to a new isolated authentication and data backend.
+Once the cloud sandbox has been fully deployed (~5 min), you'll see the `amplify_outputs.json` file updated with connection information to a new isolated authentication and data backend.
 
 <Callout info>