Add "Sign in with Google" Button

[jenyyy4]

Feature Request: Add "Sign in with Google" Button

Summary

Request to integrate Google Sign-In functionality by adding a "Sign in with Google" button to allow users to quickly and securely authenticate using their Google account.

Motivation

Adding a "Sign in with Google" button would:

• Simplify the sign-in process, reducing the need for users to remember another set of login credentials.
• Improve user experience by providing a familiar and widely-used sign-in method.
• Increase user registration and retention by allowing quicker onboarding.
• Enhance security by leveraging Google's secure OAuth 2.0 protocol for authentication.

Use Cases

1. Faster User Onboarding: Users can sign in to the platform using their Google account, which reduces friction and improves sign-up conversion rates.
2. Secure Authentication: Using OAuth 2.0 for Google Sign-In ensures secure authentication, minimizing the risk of password breaches.
3. Consistent User Experience: Many users are familiar with Google Sign-In, offering them a streamlined and trustworthy login experience.

Proposed Solution

The "Sign in with Google" button should be integrated into the existing login page or modal. The button would allow users to authenticate with their Google accounts via the OAuth 2.0 protocol.

Steps to Implement:

1. Google Developer Console Setup:

   • Create a new project in the Google Developer Console.
   • Enable the Google Identity Services API.
   • Generate the OAuth 2.0 Client ID and configure authorized redirect URIs.

2. Frontend:

   • Add the Google Sign-In button to the login page using Google's Identity Services SDK.
   • Example of a Google Sign-In button integration:

     <div id="g_id_onload"
       data-client_id="YOUR_GOOGLE_CLIENT_ID"
       data-callback="handleCredentialResponse">
     </div>
     <div class="g_id_signin" data-type="standard"></div>

3. Backend:

   • Implement backend logic to handle the authentication flow.
   • Use the token provided by Google to verify the user's identity and sign them in.

   • Example of verifying the Google token on the server (Node.js example):

     const {OAuth2Client} = require('google-auth-library');
     const client = new OAuth2Client(CLIENT_ID);
     
     async function verify(token) {
     const ticket = await client.verifyIdToken({
        idToken: token,
        audience: CLIENT_ID,
     });
     const payload = ticket.getPayload();
     const userid = payload['sub'];
     }

4. UI Design:

   • Ensure the button follows Google’s branding and UI guidelines:
   • Use the appropriate button size, color, and label as per Google's Sign-In branding guidelines.

5. Error Handling:

   • Implement proper error handling for cases where Google Sign-In fails or is denied by the user.

[jenyyy4]

@nfoert I would like to work on this issue, please assign it to me.

[shrinjayshresth1]

@nfoert I would like this issue to be assiged to me. Regards

[ar4s]

Backend: Implement backend logic to handle the authentication flow. Use the token provided by Google to verify the user's identity and sign them in. Example of verifying the Google token on the server (Node.js example):

const {OAuth2Client} = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);

async function verify(token) {
  const ticket = await client.verifyIdToken({
      idToken: token,
      audience: CLIENT_ID,
  });
  const payload = ticket.getPayload();
  const userid = payload['sub'];
}

Backend is written in Python/Django not JavaScript :)

[nfoert]

This is a very good idea, I had this planned for future implementation but haven't gotten to it yet. Ideally this could also support "Sign in with GitHub", especially because this project is open source and the intended audience may already have a GitHub account This could also be used to get data and determine if the user is a contributor or supporter and add some kind of cosmetic badge in future, but that's an idea for another day.

I will be assigning this issue to @jenyyy4 as they are the one who created this issue first. Thanks for your interest in Cardie!

Additionally, there's already been some discussion on how this could be implemented in #57 which is a duplicate issue.