diff options
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | src/App.tsx | 27 | ||||
| -rw-r--r-- | src/index.css | 68 | ||||
| -rw-r--r-- | src/pages/Login.tsx | 59 |
4 files changed, 62 insertions, 93 deletions
diff --git a/index.html b/index.html index e4b78ea..5681b47 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + React + TS</title> + <script src="https://accounts.google.com/gsi/client" async></script> </head> <body> <div id="root"></div> diff --git a/src/App.tsx b/src/App.tsx index afe48ac..a65251d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,33 +1,10 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' +import Login from './pages/Login' function App() { - const [count, setCount] = useState(0) - return ( <> - <div> - <a href="https://vitejs.dev" target="_blank"> - <img src={viteLogo} className="logo" alt="Vite logo" /> - </a> - <a href="https://react.dev" target="_blank"> - <img src={reactLogo} className="logo react" alt="React logo" /> - </a> - </div> - <h1>Vite + React</h1> - <div className="card"> - <button onClick={() => setCount((count) => count + 1)}> - count is {count} - </button> - <p> - Edit <code>src/App.tsx</code> and save to test HMR - </p> - </div> - <p className="read-the-docs"> - Click on the Vite and React logos to learn more - </p> + <Login /> </> ) } diff --git a/src/index.css b/src/index.css index 6119ad9..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000..b152b19 --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,59 @@ +import { createClient } from '@supabase/supabase-js' +import { useState, useEffect } from 'react' + +const supabase = createClient('https://slpoocycjgqsuoedhkbn.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNscG9vY3ljamdxc3VvZWRoa2JuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTUyMDU0MjUsImV4cCI6MjAzMDc4MTQyNX0.xZYRTRN65rlms1Hb96IBAQvw3EGtMzUxlGPP5TVey34') + +window.HandleSignInWithGoogle = async (response: any) => { + console.log(response) + const { data, error } = await supabase.auth.signInWithIdToken({ + provider: 'google', + token: response.credential, + }) + console.log(data, error) +} + +export default function Login() { + const [_, setSession] = useState(null) + + useEffect(() => { + supabase.auth.getSession().then(({ data: { session } }) => { + setSession(session) + console.log("LOGIN SESSION", session) + }) + + const { + data: { subscription }, + } = supabase.auth.onAuthStateChange((_event, session) => { + setSession(session) + console.log("SESSION CHANGE", session) + }) + + return () => subscription.unsubscribe() + }, []) + + return ( + <> + <div> + <h1>Login</h1> + <p>Log in to access your account!</p> + </div> + + <div id="g_id_onload" + data-client_id="952965459060-nrnrsdoq22mf646vfa72hk410pvdda5q.apps.googleusercontent.com" + data-context="signin" + data-ux_mode="popup" + data-callback="HandleSignInWithGoogle" + data-auto_prompt="false"> + </div> + + <div className="g_id_signin" + data-type="standard" + data-shape="pill" + data-theme="outline" + data-text="signin" + data-size="large" + data-logo_alignment="center"> + </div> + </> + ) +} |