feat: Begin support for OIDC login
This commit is contained in:
109
docs/MICROSOFT_ENTRA_QUICKSTART.md
Normal file
109
docs/MICROSOFT_ENTRA_QUICKSTART.md
Normal file
@@ -0,0 +1,109 @@
|
||||
# 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: `https://<supabase-ref>.supabase.co/auth/v1/callback`
|
||||
- Generate client ID and client secret
|
||||
- Set API permissions (openid, profile, email)
|
||||
|
||||
### 2. Supabase Configuration
|
||||
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
|
||||
|
||||
### 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
|
||||
Reference in New Issue
Block a user