Fix Supabase OAuth flow and various UI updates

src/screens/auth/LoginScreen.tsx

@@ -1,18 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { View, Text, TextInput, TouchableOpacity, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform, ScrollView, Alert, ActivityIndicator } from 'react-native';
 import { Car, Music } from 'lucide-react-native';
 import { colors } from '../../utils/colors';
 import { supabase } from '../../services/supabase';
 import { makeRedirectUri } from 'expo-auth-session';
-import * as WebBrowser from 'expo-web-browser';
+import * as QueryParams from 'expo-auth-session/build/QueryParams';
+import * as Linking from 'expo-linking';
 
-WebBrowser.maybeCompleteAuthSession();
 // @ts-ignore
 export default function LoginScreen({ navigation }) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
 
+
+
   const handleLogin = async () => {
     if (!email || !password) {
       Alert.alert('Erro', 'Por favor preenche todos os campos.');
@@ -31,28 +33,14 @@ export default function LoginScreen({ navigation }) {
     setLoading(false);
   };
 
-  const handleSpotifyAuth = async () => {
-    try {
-      const redirectUri = makeRedirectUri();
-      const { data, error } = await supabase.auth.signInWithOAuth({
-        provider: 'spotify',
-        options: {
-          redirectTo: redirectUri,
-        },
-      });
-
-      if (error) throw error;
-
-      if (data?.url) {
-        const res = await WebBrowser.openAuthSessionAsync(data.url, redirectUri);
-        if (res.type === 'success') {
-          const { url } = res;
-          // Ensure Supabase catches the session from the returned URL
-          await supabase.auth.getSessionFromUrl(url);
-        }
-      }
-    } catch (err: any) {
-      Alert.alert('Erro', err?.message || 'Ocorreu um erro no Spotify Auth.');
+  const handleSpotifyLogin = async () => {
+    const redirectUrl = Linking.createURL('/');
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider: 'spotify',
+      options: { redirectTo: redirectUrl }
+    });
+    if (data?.url) {
+      await Linking.openURL(data.url);
     }
   };
 
@@ -109,7 +97,7 @@ export default function LoginScreen({ navigation }) {
               )}
             </TouchableOpacity>
 
-            <TouchableOpacity style={styles.spotifyButton} onPress={handleSpotifyAuth}>
+            <TouchableOpacity style={styles.spotifyButton} onPress={handleSpotifyLogin}>
               {/* Note: In a real app we would use an actual Spotify SVG logo. Using Music icon for now as a placeholder for the Spotify logo. */}
               <Music color={colors.white} size={20} style={styles.spotifyIcon} />
               <Text style={styles.spotifyButtonText}>Entrar com Spotify</Text>