139 lines
4.2 KiB
Markdown
139 lines
4.2 KiB
Markdown
# Microsoft Entra OpenID Connect - Quick Start
|
|
|
|
## What Was Implemented
|
|
|
|
The Login flow now supports Microsoft Entra ID (Azure AD) authentication via OpenID Connect using Supabase's Azure OAuth provider.
|
|
|
|
## Files Modified
|
|
|
|
1. **[Login.tsx](management-dashboard-web-app/src/components/Login.tsx)**: Added Microsoft login button and OAuth flow
|
|
2. **[MicrosoftIcon.tsx](management-dashboard-web-app/src/components/MicrosoftIcon.tsx)**: Created Microsoft logo component
|
|
3. **[vite-env.d.ts](management-dashboard-web-app/src/vite-env.d.ts)**: Added TypeScript type for new environment variable
|
|
4. **[.env.example](management-dashboard-web-app/.env.example)**: Added Microsoft login configuration
|
|
|
|
## How It Works
|
|
|
|
### User Experience
|
|
1. User visits login page and sees two options:
|
|
- Traditional email/password login (existing)
|
|
- "Sign in with Microsoft" button (new)
|
|
2. Clicking Microsoft button redirects to Microsoft login
|
|
3. User authenticates with Microsoft credentials
|
|
4. Microsoft redirects back to app with authenticated session
|
|
|
|
### Technical Flow
|
|
```
|
|
User clicks "Sign in with Microsoft"
|
|
↓
|
|
Supabase signInWithOAuth() with provider: 'azure'
|
|
↓
|
|
Redirect to Microsoft Entra login page
|
|
↓
|
|
User authenticates with Microsoft
|
|
↓
|
|
Microsoft redirects to Supabase callback URL
|
|
↓
|
|
Supabase validates and creates session
|
|
↓
|
|
User redirected back to application (authenticated)
|
|
```
|
|
|
|
## Configuration Required
|
|
|
|
### 1. Azure Portal Setup
|
|
- Register application in Microsoft Entra ID
|
|
- Configure redirect URI:
|
|
- **Supabase Cloud**: `https://<supabase-ref>.supabase.co/auth/v1/callback`
|
|
- **Self-hosted**: `http://<your-host>:<port>/auth/v1/callback`
|
|
- Generate client ID and client secret
|
|
- Set API permissions (openid, profile, email)
|
|
|
|
### 2. Supabase Configuration
|
|
|
|
#### For Supabase Cloud:
|
|
Navigate to Authentication > Providers > Azure and configure:
|
|
- **Azure Client ID**: From Azure app registration
|
|
- **Azure Secret**: From Azure client secrets
|
|
- **Azure Tenant**: Use `common` for multi-tenant or specific tenant ID
|
|
|
|
#### For Self-Hosted Supabase:
|
|
|
|
Edit `supabase/config.toml`:
|
|
```toml
|
|
[auth.external.azure]
|
|
enabled = true
|
|
client_id = "env(AZURE_CLIENT_ID)"
|
|
secret = "env(AZURE_CLIENT_SECRET)"
|
|
redirect_uri = ""
|
|
url = "https://login.microsoftonline.com/env(AZURE_TENANT_ID)/v2.0"
|
|
skip_nonce_check = false
|
|
```
|
|
|
|
Set environment variables:
|
|
```bash
|
|
AZURE_CLIENT_ID="your-application-client-id"
|
|
AZURE_CLIENT_SECRET="your-client-secret"
|
|
AZURE_TENANT_ID="common" # or specific tenant ID
|
|
```
|
|
|
|
Restart Supabase:
|
|
```bash
|
|
docker-compose down && docker-compose up -d
|
|
```
|
|
|
|
### 3. Application Environment
|
|
Set in `.env` file:
|
|
```bash
|
|
VITE_ENABLE_MICROSOFT_LOGIN=true
|
|
```
|
|
|
|
## Testing
|
|
|
|
### Enable Microsoft Login
|
|
```bash
|
|
# In .env file
|
|
VITE_ENABLE_MICROSOFT_LOGIN=true
|
|
```
|
|
|
|
### Disable Microsoft Login
|
|
```bash
|
|
# In .env file
|
|
VITE_ENABLE_MICROSOFT_LOGIN=false
|
|
# Or simply remove the variable
|
|
```
|
|
|
|
## Features
|
|
|
|
✅ **Hybrid Authentication**: Supports both email/password and Microsoft login
|
|
✅ **Feature Flag**: Microsoft login can be enabled/disabled via environment variable
|
|
✅ **Dark Mode Support**: Microsoft button matches the existing theme
|
|
✅ **Error Handling**: Displays authentication errors to users
|
|
✅ **Loading States**: Shows loading indicator during authentication
|
|
✅ **Type Safety**: Full TypeScript support with proper types
|
|
|
|
## Next Steps
|
|
|
|
1. **Complete Azure Setup**: Follow [MICROSOFT_ENTRA_SETUP.md](./MICROSOFT_ENTRA_SETUP.md) for detailed configuration
|
|
2. **Configure Supabase**: Enable Azure provider in Supabase dashboard
|
|
3. **Test Authentication**: Verify the complete login flow
|
|
4. **Deploy**: Update production environment variables
|
|
|
|
## Documentation
|
|
|
|
- **Full Setup Guide**: [MICROSOFT_ENTRA_SETUP.md](./MICROSOFT_ENTRA_SETUP.md) - Complete Azure and Supabase configuration
|
|
- **Supabase Docs**: https://supabase.com/docs/guides/auth/social-login/auth-azure
|
|
- **Microsoft Identity Platform**: https://docs.microsoft.com/azure/active-directory/develop/
|
|
|
|
## Support
|
|
|
|
For issues or questions:
|
|
- Check [MICROSOFT_ENTRA_SETUP.md](./MICROSOFT_ENTRA_SETUP.md) troubleshooting section
|
|
- Review Supabase Auth logs
|
|
- Check Azure sign-in logs in Azure Portal
|
|
- Verify redirect URIs match exactly
|
|
|
|
---
|
|
|
|
**Implementation Date**: January 9, 2026
|
|
**Status**: Ready for configuration and testing
|