Problem or Need

The current authentication system only supports email and password registration. This requires users to create and remember a new password for our application. Offering social logins (OAuth) from providers like Google and GitHub is a standard feature for modern web apps that simplifies the registration and login process and can improve security.

Proposed Solution

Implement the OAuth 2.0 Authorization Code Grant flow manually to allow users to sign up and log in using their existing Google and GitHub accounts. This will involve adding "Continue with Google" and "Continue with GitHub" buttons that kick off the authentication sequence.

Expected Behavior

1. On the Login or Register page, a user sees options to "Continue with Google" and "Continue with GitHub."
2. The user clicks one of these buttons.
3. They are redirected to the provider's official login page (Google or GitHub).
4. After successfully authenticating with the provider, they are redirected back to the application and are automatically logged in.
5. If it's their first time using this OAuth provider, a new account is created for them in the background.

Benefits

• Users can sign up with a single click, dramatically increasing the conversion rate for new user registration.
• Improved UX: Users don't need to create or remember another password.
• Enhanced Security: Leverages the robust security of major providers like Google and GitHub.

Possible Implementation

• Backend:

  • Add new credentials (Client ID, Client Secret, Callback URL) for both Google and GitHub to the backend .env file. These must be obtained from the Google Cloud Platform and GitHub Developer Settings.
  • Create two new routes for each provider. For Google, this would be:
    1. GET /api/auth/google: This endpoint constructs the full authorization URL with the necessary query parameters (client_id, redirect_uri, scope, response_type=code) and redirects the user to Google's authentication screen.
    2. GET /api/auth/google/callback: This is the redirect_uri that Google calls after the user authenticates. This controller function must:
       • Receive the temporary code from Google's query parameters.
       • Make a server-to-server POST request (using axios) to Google's token endpoint to exchange the code for an access_token and id_token.
       • Decode or verify the id_token to get the user's profile information (email, name).
       • Use the email to find an existing user or create a new one in the database.
       • Generate our application's own JWT for this user.
       • Redirect the user back to a specific frontend URL, passing our JWT as a query parameter (e.g., https://paisable.netlify.app/auth/callback?token=...).

• Frontend:

  • Add the "Continue with Google/GitHub" buttons to LoginPage.jsx and RegisterPage.jsx. These buttons will be standard <a> tags that link directly to the backend's GET /api/auth/google and GET /api/auth/github endpoints.
  • Create a new page/route in the React app at /auth/callback.
  • Create a new AuthCallbackPage.jsx component. This component's purpose is to:
    1. Run on page load.
    2. Parse the JWT from the URL's query parameters.
    3. Save the token to localStorage.
    4. Update the AuthContext to establish the user's session.
    5. Redirect the user to their /dashboard.

Alternatives Considered

• Using a dedicated authentication library like Passport.js is the industry-standard and recommended alternative. It abstracts away many of the complexities and potential security pitfalls of the OAuth 2.0 flow. This manual implementation is chosen for granular control.

Additional Notes

• This is an advanced feature that requires a thorough understanding of the full OAuth 2.0 flow.
• The implementation must strictly follow the official OAuth 2.0 documentation for each provider (Google and GitHub).
• Careful attention must be paid to security details, such as using the state parameter to prevent CSRF attacks and securely handling all tokens and secrets.
• The implementation will require the contributor to set up their own developer applications on both Google Cloud Platform and GitHub to obtain the necessary API keys for local testing.