- Immediate URL Cleanup: OAuth tokens are immediately removed from URL parameters
- Token Validation: Basic JWT format validation before using tokens
- Error Handling: Secure error handling without exposing sensitive information
- Supabase Security: Leveraging Supabase's built-in security features
// Current secure configuration
const { error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: 'http://localhost:8080/dashboard',
queryParams: {
access_type: 'offline', // Get refresh token
prompt: 'consent' // Always show consent screen
}
}
});- ✅ Acceptable for development
⚠️ Tokens briefly visible in URL (mitigated by immediate cleanup)⚠️ HTTP instead of HTTPS (acceptable for localhost)
// Production OAuth configuration
redirectTo: 'https://yourdomain.com/dashboard'# .env.production
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key// Add to your server configuration
{
headers: {
'X-Frame-Options': 'DENY',
'X-Content-Type-Options': 'nosniff',
'Referrer-Policy': 'strict-origin-when-cross-origin',
'Content-Security-Policy': "default-src 'self'"
}
}const signInWithGoogle = async () => {
const state = crypto.randomUUID(); // Generate random state
const { error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: 'http://localhost:8080/dashboard',
queryParams: {
access_type: 'offline',
prompt: 'consent',
state: state // Add CSRF protection
}
}
});
return { error };
};// For additional security, implement PKCE
const generateCodeVerifier = () => {
const array = new Uint8Array(32);
crypto.getRandomValues(array);
return btoa(String.fromCharCode(...array))
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
};// Implement secure token refresh
const refreshToken = async () => {
const { data, error } = await supabase.auth.refreshSession();
if (error) {
// Handle refresh error securely
await supabase.auth.signOut();
window.location.href = '/login';
}
return data;
};- HTTPS enabled on all OAuth redirect URLs
- Environment variables configured for production
- Security headers implemented
- Token validation enhanced
- Error logging without sensitive data exposure
- Session timeout configured
- Rate limiting implemented
- CORS policy properly configured
- Google Cloud Console configured with production URLs
- Supabase configured with production settings
- Redirect URIs limited to your domain only
- Client secrets stored securely
- OAuth scopes limited to necessary permissions
// Verify redirect domain
const allowedDomains = ['yourdomain.com', 'www.yourdomain.com'];
const currentDomain = window.location.hostname;
if (!allowedDomains.includes(currentDomain)) {
throw new Error('Unauthorized domain');
}// Configure secure session settings
const supabase = createClient(url, key, {
auth: {
storage: localStorage,
persistSession: true,
autoRefreshToken: true,
detectSessionInUrl: true,
flowType: 'pkce' // Enable PKCE for enhanced security
}
});// Secure error handling
const handleAuthError = (error: any) => {
// Log error without sensitive data
console.error('Auth error:', {
code: error.code,
message: error.message,
timestamp: new Date().toISOString()
});
// Don't expose internal error details to user
return 'Authentication failed. Please try again.';
};- ✅ OAuth flow implementation
- ✅ Token cleanup
- ✅ Basic validation
⚠️ No CSRF protection (add state parameter)⚠️ No PKCE (implement for production)⚠️ HTTP in development (use HTTPS in production)
- 🚨 HTTPS enforcement
- 🚨 Environment variable security
- 🚨 Domain validation
- 🚨 Rate limiting
Current Implementation:
- ✅ Safe for development
- ✅ Basic security measures in place
⚠️ Needs enhancements for production
For Production:
- Implement HTTPS
- Add CSRF protection
- Configure environment variables
- Add rate limiting
- Implement comprehensive error handling
The current implementation is safe for development but requires the above enhancements for production deployment.