Go to this link and clone this repository on your GitHub account.

https://github.com/new?template_name=amplify-vite-react-template&template_owner=aws-samples&name=amplify-vite-react-template&description=My%20Amplify%20Gen%202%20starter%20application

https://ap-south-1.console.aws.amazon.com/amplify/create/add-repo

Go to Update Github Permissions & authenticate your repo, which was created from the first link of this document.

Select this and then next

Keep all these things as it is & click next

Now Save and Deploy

Will See this Window

Go to the Visit deployed URL button or the Domain link.

Your First Application is created, which is a to-do list.

Now clone the repository to your local system, & install npm

git clone https://github.com/<github-user>/amplify-vite-react-template.git 
cd amplify-vite-react-template && npm install

But I want more functionalities in this, like ➖

• Delete function

• User login

• Authentication

• Per user Authorization

First do this :-

Click on this main Deployed✔ tab & it will take you to another window.

Here, now download the amplify_outputs.json file & put it in your local folder where this project you have cloned.

So, let’s do it one by one.

1. Delete Functionality ➖

Go to “src/App.tsx” &

add this code below “function createTodo()”... :-

function deleteTodo(id: string) { 
client.models.Todo.delete({ id }) 
}

And, we have to add this :- “onClick={() => deleteTodo(todo.id)}”, so replace this :-

{todos.map((todo) => (
          <li 
          onClick={() => deleteTodo(todo.id)}
          key={todo.id}>{todo.content}</li>
        ))}

save the file in your local system and do

npm run dev
# it will give a link open that in browser & you can now delete the items in your todo list

2. User Login / Implement Login UI :-

Go to “src/main.tsx” file & make the following changes

import { Authenticator } from '@aws-amplify/ui-react';  --> in 3rd line
import '@aws-amplify/ui-react/styles.css';             --> in 7th or 8th line

--> replace the code in last with this

  <React.StrictMode>
    <Authenticator>
      <App />
    </Authenticator>
  </React.StrictMode>

then Go to “src/App.tsx” & make the following changes

import { useAuthenticator } from '@aws-amplify/ui-react'; --> in 2nd line

--> add this line "const { signOut } = useAuthenticator();" after function App() {

function App() {
  const { signOut } = useAuthenticator();

--> copy this above </main> ends in last

<button onClick={signOut}>Sign out</button>

now again do npm run dev or go to the link and you will see something like this

after account creation, they will send you a confirmation code on your email, enter that and your account will be created.

Now you can see the signout button here.

and can see your login details also,

now push these changes to your GitHub

git commit -am "added authenticator"
git push

As soon as you push, the amplify will come to know that there is some change in you github and it will pull these changes and deploy that

You can see Deployment 2, and it is deploying.

After deployment, you can see the changes in your Amplify website also.

And whatever accounts you have created through your local host, it will also be saved on your Amplify website.

3. Implementing Per User Authorization :-

Go to “amplify/data/resource.ts” & do this in starting

Then, lastly, replace defaultAuthorizationMode with ‘userPool’

Now again go to “src/App.tsx” & change the following

const { signOut } = useAuthenticator(); --> const { user, signOut } = useAuthenticator();
<h1> My Todos </h1> --> <h1>{user?.signInDetails?.loginId}'s todos</h1> (just below main)

Save & Exit, now we can see something like this

So, now we have created per-user authorization with their separate to-do lists.

Now again push this to github & see the changes in your live website :-

git commit -am "added per-user data isolation"
git push

See Deployment 3, after this, the changes will be pushed to the website.

Done ✔✔