Cognito and amplify in my html/css landing page

To integrate Amazon Cognito and AWS Amplify into your HTML/CSS landing page, you'll need to make some adjustments to your current setup and approach. Here's a revised process to help you achieve your objective:

1. Amplify CLI Setup: Ensure you have the latest version of the Amplify CLI installed. Run npm install -g @aws-amplify/cli to update if necessary.

2. Project Initialization: Instead of trying to link to an existing AppID, start fresh with a new Amplify project. In your project directory, run amplify init and follow the prompts. When asked about the type of app you're building, select "javascript" and then "react" (even though you're using HTML/CSS, this will set up the necessary configurations).

3. Adding Authentication: After initialization, add authentication to your project by running amplify add auth. Choose the default configuration for a quick setup, or customize as needed.

4. Amplify Configuration: In your HTML file, add the following script tags to include the Amplify library:

<script src="https://cdn.jsdelivr.net/npm/aws-amplify/dist/aws-amplify.min.js"></script>

Then, in a separate JavaScript file or within a <script> tag in your HTML, configure Amplify:

Amplify.configure({
Auth: {
region: 'us-east-1', // your region
userPoolId: 'YOUR_USER_POOL_ID', // you'll get this after running amplify push
userPoolWebClientId: 'YOUR_USER_POOL_WEB_CLIENT_ID' // you'll get this after running amplify push
}
});

5. Implementing Authentication: Use Amplify's authentication methods in your JavaScript code. For example:

// To sign up a user
Auth.signUp({ username, password, attributes: { email } })
.then(data => console.log(data))
.catch(err => console.log(err));

// To sign in a user
Auth.signIn(username, password)
.then(user => console.log(user))
.catch(err => console.log(err));

6. Deploying Your Project: Run amplify push to provision the backend resources in AWS. This will create the necessary Cognito User Pool and Identity Pool.

7. Hosting: If you want to host your static site with Amplify, run amplify add hosting and choose the hosting option that suits your needs.

8. Version Control: Commit your changes to Git and push to your GitHub repository. Make sure to include the amplify directory in your repository, but exclude the amplify/team-provider-info.json file (add it to .gitignore).

9. Continuous Deployment: In the Amplify Console, connect your GitHub repository and set up continuous deployment. This will automatically deploy your site when you push changes to your repository.

By following these steps, you should be able to successfully integrate Cognito authentication into your HTML/CSS landing page using Amplify, and deploy it to AWS. Remember to replace placeholder values (like region, userPoolId, and userPoolWebClientId) with your actual values after running amplify push.

If you encounter any specific errors during this process, make sure to check the Amplify CLI version, ensure your AWS credentials are correctly set up, and verify that you're in the correct directory when running Amplify commands.
Sources
Managing the hosted UI and authorization server - Amazon Cognito
Integrating Amazon Cognito authentication and authorization with web and mobile apps - Amazon Cognito
Create a React app by using AWS Amplify and add authentication with Amazon Cognito - AWS Prescriptive Guidance
Authenticate existing React application users by using Amazon Cognito and AWS Amplify UI - AWS Prescriptive Guidance