Summary
Integrate Google OAuth as an additional authentication method in AlumConnect, enabling users to sign in with their Google accounts.
Requirements
- Enable Google provider in Supabase authentication settings.
- Configure Google API credentials (Client ID and Client Secret).
- Add "Sign in with Google" button in the login page UI.
- Ensure the flow works for both web and mobile views.
- Maintain consistent branding and styling for the Google button.
- Handle authentication errors gracefully.
Implementation Details
Suggested files:
src/components/Auth/Login.tsx – Add Google sign-in button and handler.
src/lib/supabaseClient.ts – Ensure provider setup.
.env – Store Google OAuth credentials.
Steps:
- Create a project in Google Cloud Console.
- Enable OAuth consent screen and configure authorized redirect URIs:
- Local:
http://127.0.0.1:54321/auth/v1/callback
- Production:
https://your-project.supabase.co/auth/v1/callback
- Add credentials to Supabase > Authentication > Providers > Google.
- Implement
signInWithOAuth('google') method from Supabase client.
Tasks
Testing
- Verify login works with Google in local and production.
- Check responsive design of button.
- Ensure error handling is user-friendly.
References
Summary
Integrate Google OAuth as an additional authentication method in AlumConnect, enabling users to sign in with their Google accounts.
Requirements
Implementation Details
Suggested files:
src/components/Auth/Login.tsx– Add Google sign-in button and handler.src/lib/supabaseClient.ts– Ensure provider setup..env– Store Google OAuth credentials.Steps:
http://127.0.0.1:54321/auth/v1/callbackhttps://your-project.supabase.co/auth/v1/callbacksignInWithOAuth('google')method from Supabase client.Tasks
Testing
References