Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Google Auth</title> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> | |
| <script src="https://unpkg.com/@supabase/supabase-js@2"></script> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(to right, #4a90e2, #7e57c2); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .container { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| width: 300px; | |
| } | |
| h1, h2 { | |
| color: #333; | |
| margin-bottom: 1rem; | |
| } | |
| p { | |
| color: #666; | |
| margin-bottom: 1rem; | |
| } | |
| .spinner { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #3498db; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| button { | |
| background-color: #4a90e2; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #3a7bc8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="container"> | |
| <h1>Google Auth</h1> | |
| <div v-if="loading" class="spinner"></div> | |
| <div v-if="!user"> | |
| <p>{{ message }}</p> | |
| <button @click="login">Login with Google</button> | |
| </div> | |
| <div v-else> | |
| <h2>Profile</h2> | |
| <p>Email: {{ user.email }}</p> | |
| <button @click="logout">Logout</button> | |
| <button @click="goToDashboard">Go to Dashboard</button> | |
| </div> | |
| <p style="font-size: 0.9em; color: #888;">{{ subMessage }}</p> | |
| </div> | |
| </div> | |
| <script> | |
| const { createApp, ref, onMounted } = Vue; | |
| const { createClient } = supabase; | |
| createApp({ | |
| setup() { | |
| const supabaseClient = createClient('https://ftqmmutydpjseodidugl.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZ0cW1tdXR5ZHBqc2VvZGlkdWdsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTQzMTE2MzQsImV4cCI6MjAyOTg4NzYzNH0.2h1uLIPCKrwF8f9enRChU_Q2qkhoQlR4gwlehL-h0a4'); | |
| const user = ref(null); | |
| const loading = ref(true); | |
| const message = ref('Welcome! Please log in.'); | |
| const subMessage = ref(''); | |
| const login = async () => { | |
| loading.value = true; | |
| message.value = 'Logging in with Google...'; | |
| subMessage.value = 'Please wait while we redirect you.'; | |
| const { data, error } = await supabaseClient.auth.signInWithOAuth({ | |
| provider: 'google', | |
| options: { | |
| redirectTo: `https://pvanand-specialized-agents.hf.space/dashboard` | |
| } | |
| }); | |
| if (error) { | |
| console.error('Error logging in:', error); | |
| message.value = 'Login failed. Please try again.'; | |
| subMessage.value = ''; | |
| } | |
| loading.value = false; | |
| }; | |
| const logout = async () => { | |
| loading.value = true; | |
| message.value = 'Logging out...'; | |
| subMessage.value = ''; | |
| try { | |
| const { error } = await supabaseClient.auth.signOut(); | |
| if (error) { | |
| throw error; | |
| } | |
| user.value = null; | |
| message.value = 'Logged out successfully.'; | |
| setTimeout(() => { | |
| window.location.href = '/'; | |
| }, 2000); | |
| } catch (error) { | |
| console.error("Logout failed:", error); | |
| message.value = "Logout failed. Please try again."; | |
| } finally { | |
| loading.value = false; | |
| } | |
| }; | |
| const checkSession = async () => { | |
| const { data: { session } } = await supabaseClient.auth.getSession(); | |
| if (session) { | |
| user.value = session.user; | |
| message.value = `Welcome back, ${user.value.email}!`; | |
| } | |
| loading.value = false; | |
| }; | |
| const goToDashboard = () => { | |
| window.location.href = '/dashboard'; | |
| }; | |
| onMounted(() => { | |
| checkSession(); | |
| supabaseClient.auth.onAuthStateChange((event, session) => { | |
| if (event === 'SIGNED_IN' && session) { | |
| user.value = session.user; | |
| message.value = `Welcome, ${user.value.email}!`; | |
| subMessage.value = 'You are now logged in.'; | |
| } else if (event === 'SIGNED_OUT') { | |
| user.value = null; | |
| message.value = 'You have been logged out.'; | |
| subMessage.value = ''; | |
| } | |
| }); | |
| }); | |
| return { | |
| user, | |
| loading, | |
| message, | |
| subMessage, | |
| login, | |
| logout, | |
| goToDashboard | |
| }; | |
| } | |
| }).mount('#app'); | |
| </script> | |
| </body> | |
| </html> |