initail commit

amplify/auth/resource.ts

@@ -1,11 +1,22 @@
-import { defineAuth } from '@aws-amplify/backend';
+import { defineAuth, secret } from '@aws-amplify/backend';
 
-/**
- * Define and configure your auth resource
- * @see https://docs.amplify.aws/gen2/build-a-backend/auth
- */
 export const auth = defineAuth({
   loginWith: {
     email: true,
-  },
-});
+    externalProviders: {
+      google: {
+        clientId: secret('GOOGLE_CLIENT_ID'),
+        clientSecret: secret('GOOGLE_CLIENT_SECRET'),
+        attributeMapping: {
+          email: 'email'
+        },
+        scopes: ['profile','email']
+      },
+      callbackUrls: [
+        'http://localhost:5173/',
+        'https://mywebsite.com/profile'
+      ],
+      logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'],
+    }
+  }
+});

src/App.tsx

@@ -1,40 +1,37 @@
-import { useEffect, useState } from "react";
-import type { Schema } from "../amplify/data/resource";
-import { generateClient } from "aws-amplify/data";
-
-const client = generateClient<Schema>();
+import { useEffect } from "react";
+import { useAuthenticator } from '@aws-amplify/ui-react';
+import { fetchAuthSession } from '@aws-amplify/auth';
+// import { signInWithRedirect } from 'aws-amplify/auth';
 
 function App() {
-  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
-
+  const { user, signOut } = useAuthenticator();
+  
   useEffect(() => {
-    client.models.Todo.observeQuery().subscribe({
-      next: (data) => setTodos([...data.items]),
-    });
+    async function getIDToken() {
+      const session = await fetchAuthSession();
+      const token = session?.tokens?.idToken;
+      console.log(token);
+      return token; 
+    }
+    getIDToken();
+
   }, []);
 
-  function createTodo() {
-    client.models.Todo.create({ content: window.prompt("Todo content") });
-  }
+  // if (!user) {
+  //     signInWithRedirect({
+  //       provider: 'Google'
+  //     }); 
+  // }
 
   return (
     <main>
+      <h1>{JSON.stringify(user)}</h1>
+      <h1>{user?.signInDetails?.loginId}'s todos</h1>
       <h1>My todos</h1>
-      <button onClick={createTodo}>+ new</button>
-      <ul>
-        {todos.map((todo) => (
-          <li key={todo.id}>{todo.content}</li>
-        ))}
-      </ul>
-      <div>
-        🥳 App successfully hosted. Try creating a new todo.
-        <br />
-        <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
-          Review next step of this tutorial.
-        </a>
-      </div>
+      <button onClick={signOut}>Sign out</button>
     </main>
   );
 }
 
+
 export default App;

src/main.tsx

@@ -1,14 +1,18 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
-import { Amplify } from "aws-amplify";
-import outputs from "../amplify_outputs.json";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+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';
+import '@aws-amplify/ui-react/styles.css';
 
 Amplify.configure(outputs);
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <Authenticator>
+      <App />
+    </Authenticator>
   </React.StrictMode>
-);
+);