From b327ac4fff39a1a04a24027c7de9bd99ccebb0cc Mon Sep 17 00:00:00 2001 From: Gao Zhiyu Date: Wed, 28 May 2025 11:33:28 +1200 Subject: [PATCH 1/3] initail commit --- amplify/auth/resource.ts | 24 +++++++++++++++------- src/App.tsx | 44 ++++++++++++++++------------------------ src/main.tsx | 22 ++++++++++++-------- 3 files changed, 47 insertions(+), 43 deletions(-) diff --git a/amplify/auth/resource.ts b/amplify/auth/resource.ts index 14a8886c..c03d8a83 100644 --- a/amplify/auth/resource.ts +++ b/amplify/auth/resource.ts @@ -1,11 +1,21 @@ -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' + }, + }, + callbackUrls: [ + 'http://localhost:3000/profile', + 'https://mywebsite.com/profile' + ], + logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'], + } + } +}); \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index d7a72df3..134edce1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,40 +1,30 @@ -import { useEffect, useState } from "react"; -import type { Schema } from "../amplify/data/resource"; -import { generateClient } from "aws-amplify/data"; - -const client = generateClient(); +import { useEffect } from "react"; +import { useAuthenticator } from '@aws-amplify/ui-react'; +import { fetchAuthSession } from '@aws-amplify/auth'; function App() { - const [todos, setTodos] = useState>([]); - + 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") }); - } + }, []); return (
+

{JSON.stringify(user)}

+

{user?.signInDetails?.loginId}'s todos

My todos

- -
    - {todos.map((todo) => ( -
  • {todo.content}
    • - ))} -
-
- 🥳 App successfully hosted. Try creating a new todo. -
- - Review next step of this tutorial. - -
+
); } + export default App; diff --git a/src/main.tsx b/src/main.tsx index 36c530d7..ddd45016 100644 --- a/src/main.tsx +++ b/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( - + + + -); +); \ No newline at end of file From d3d87127f1263c53be910484a3b4aff015613ee3 Mon Sep 17 00:00:00 2001 From: Gao Zhiyu Date: Wed, 28 May 2025 11:36:29 +1200 Subject: [PATCH 2/3] poc another approache --- src/my-client-side-js.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/my-client-side-js.js diff --git a/src/my-client-side-js.js b/src/my-client-side-js.js new file mode 100644 index 00000000..ff1e6e5e --- /dev/null +++ b/src/my-client-side-js.js @@ -0,0 +1,5 @@ +import { signInWithRedirect } from 'aws-amplify/auth'; + +await signInWithRedirect({ + provider: 'Google' +}); \ No newline at end of file From 8b4176d92f2fedea260cd95bc30196fe4b591881 Mon Sep 17 00:00:00 2001 From: Gao Zhiyu Date: Wed, 28 May 2025 16:27:08 +1200 Subject: [PATCH 3/3] second commit --- amplify/auth/resource.ts | 3 ++- src/App.tsx | 7 +++++++ src/main.tsx | 2 +- src/my-client-side-js.js | 5 ----- 4 files changed, 10 insertions(+), 7 deletions(-) delete mode 100644 src/my-client-side-js.js diff --git a/amplify/auth/resource.ts b/amplify/auth/resource.ts index c03d8a83..53f9747d 100644 --- a/amplify/auth/resource.ts +++ b/amplify/auth/resource.ts @@ -10,9 +10,10 @@ export const auth = defineAuth({ attributeMapping: { email: 'email' }, + scopes: ['profile','email'] }, callbackUrls: [ - 'http://localhost:3000/profile', + 'http://localhost:5173/', 'https://mywebsite.com/profile' ], logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'], diff --git a/src/App.tsx b/src/App.tsx index 134edce1..e2de6d5a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ 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 { user, signOut } = useAuthenticator(); @@ -16,6 +17,12 @@ function App() { }, []); + // if (!user) { + // signInWithRedirect({ + // provider: 'Google' + // }); + // } + return (

{JSON.stringify(user)}

diff --git a/src/main.tsx b/src/main.tsx index ddd45016..f2f68745 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -11,7 +11,7 @@ Amplify.configure(outputs); ReactDOM.createRoot(document.getElementById('root')!).render( - + diff --git a/src/my-client-side-js.js b/src/my-client-side-js.js deleted file mode 100644 index ff1e6e5e..00000000 --- a/src/my-client-side-js.js +++ /dev/null @@ -1,5 +0,0 @@ -import { signInWithRedirect } from 'aws-amplify/auth'; - -await signInWithRedirect({ - provider: 'Google' -}); \ No newline at end of file