Start trying to support Microsoft Azure Sign in

components/auth/AzureSignIn.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import * as WebBrowser from 'expo-web-browser';
+import { makeRedirectUri, useAuthRequest, useAutoDiscovery } from 'expo-auth-session';
+import { Platform, StyleSheet } from 'react-native';
+import { supabase } from '@/lib/supabase';
+import { ThemedView, ThemedTextButton } from '@/components/theme';
+
+// This is important - it completes the auth session when the browser redirects back to your app
+WebBrowser.maybeCompleteAuthSession();
+
+const AzureSignIn = () => {
+  const [loading, setLoading] = useState(false);
+  
+  // Get environment variables
+  const tenantId = process.env.EXPO_PUBLIC_AZURE_TENANT_ID as string;
+  const clientId = process.env.EXPO_PUBLIC_AZURE_CLIENT_ID as string;
+  
+  // Set up the discovery endpoint for Azure AD
+  const discovery = useAutoDiscovery(
+    `https://login.microsoftonline.com/${tenantId}/v2.0`
+  );
+  
+  // Create a redirect URI that matches what you configured in Azure
+  // This should match the redirect URI you set in your Supabase dashboard
+  const redirectUri = makeRedirectUri({
+    scheme: Platform.OS === 'web' ? undefined : 'com.gbrown.techtracker',
+    path: Platform.OS === 'web' ? 'auth/callback' : undefined,
+  });
+  
+  // Set up the auth request with the needed scopes
+  const [request, response, promptAsync] = useAuthRequest(
+    {
+      clientId,
+      scopes: ['openid', 'profile', 'email', 'offline_access'],
+      redirectUri,
+      responseType: 'code', // Important for Supabase
+      usePKCE: true, // Use PKCE for added security
+    },
+    discovery
+  );
+  
+  const signInWithAzure = async () => {
+    try {
+      setLoading(true);
+      
+      // For Expo Go and mobile apps, we need to use the Expo Auth Session flow
+      if (Platform.OS !== 'web') {
+        // Launch the browser for authentication
+        const result = await promptAsync();
+        
+        if (result.type === 'success') {
+          // If we got an authorization code, use Supabase to exchange it for a session
+          const { code } = result.params;
+          
+          const { data, error } = await supabase.auth.exchangeCodeForSession(code);
+          
+          if (error) {
+            throw error;
+          }
+          
+          console.log('Successfully signed in with Azure!', data.user);
+        } else if (result.type === 'error') {
+          throw new Error(result.error?.message || 'Authentication failed');
+        } else if (result.type === 'cancel') {
+          console.log('User cancelled the login flow');
+        }
+      } else {
+        // For web, we can use Supabase's built-in OAuth flow
+        const { data, error } = await supabase.auth.signInWithOAuth({
+          provider: 'azure',
+          options: {
+            scopes: 'email profile openid offline_access',
+            redirectTo: window.location.origin + '/auth/callback',
+          },
+        });
+        
+        if (error) {
+          throw error;
+        }
+      }
+    } catch (error) {
+      console.error('Error signing in with Azure:', error);
+      alert(`Error signing in: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+  
+  return (
+    <ThemedView style={styles.verticallySpaced}>
+      <ThemedTextButton
+        text="Sign in with Microsoft"
+        disabled={loading || !request}
+        onPress={signInWithAzure}
+        fontSize={18}
+      />
+    </ThemedView>
+  );
+};
+export default AzureSignIn;
+
+const styles = StyleSheet.create({
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignItems: 'center',
+    marginTop: 20,
+  },
+});