blob: bde52de830d23c4e587be678446487dc650c33c0 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import { useEffect } from 'react'
import { useNavigate } from "react-router-dom";
import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
export default function Login(props: any) {
const navigate = useNavigate();
useEffect(() => {
props.supabase.auth.getSession().then(({ data: { session } }: any) => {
props.setSession(session)
console.log("LOGIN SESSION", session)
})
const {
data: { subscription },
} = props.supabase.auth.onAuthStateChange((_event: any, session: any) => {
props.setSession(session)
console.log("SESSION CHANGE", session)
})
return () => subscription.unsubscribe()
}, [props.supabase])
useEffect(() => {
if (props.session) {
navigate('/')
}
}, [props.session])
//min-w-full broke the container
return (
<>
<div className="flex flex-col items-center h-screen w-screen">
<div className="flex flex-row items-center gap-x-8 m-auto">
<div>
<h1 className="text-4xl text-bold font-sans antialiased text-blue-700 tracking-wide">fs-tracer</h1>
</div>
<div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow">
<div className="mx-7 my-5">
<h5 className="mb-2 text-2xl font-bold font-sans antialiased text-gray-900">Hello!</h5>
<div className="flex flex-row items-center gap-2">
<span className="font-normal text-gray-700" >Continue with</span>
<span>
<GoogleOAuthProvider clientId="952965459060-nrnrsdoq22mf646vfa72hk410pvdda5q.apps.googleusercontent.com">
<GoogleLogin
onSuccess={async (credentialResponse: any) => {
await props.supabase.auth.signInWithIdToken({
provider: 'google',
token: credentialResponse.credential,
})
}}
onError={() => {
console.log('Login Failed');
}}
width={7777}
size={"large"}
type={"icon"}
/>
</GoogleOAuthProvider>
</span>
</div>
</div>
</div>
</div>
</div>
</>
)
}
|
