feat: Implement One-Click Sign-In with Google

[hossainchisty]

Issue Description:

Background: Our React project currently requires users to manually enter their credentials to sign in. To enhance user experience and simplify the sign-in process, we want to implement a "One-Click Sign-In with Google" feature. This will allow users to sign in using their Google accounts with just a single click, improving user convenience and increasing the adoption rate of our platform.

Issue Details: The objective of this issue is to integrate Google Sign-In functionality into our React project, enabling users to log in quickly and securely using their Google accounts.

Tasks:

1. Google API Integration:

   • Integrate the Google Sign-In API with the React project.
   • Obtain necessary API keys and client IDs from the Google Developer Console.

2. Implement Sign-In Button:

   • Create a visually appealing and responsive "Sign-In with Google" button within the user interface.
   • Ensure the button adheres to design guidelines and is user-friendly on various devices and screen sizes.

3. Authentication Flow:

   • Implement the authentication flow that handles the Google Sign-In process.
   • Retrieve necessary user data (such as email, name, and profile picture) after successful authentication.

4. User State Management:

   • Implement user state management to handle the user's authentication status.
   • Store relevant user data in the application state or context for easy access throughout the application.

5. Error Handling:

   • Implement error handling for scenarios such as failed Google authentication or network issues.
   • Provide clear error messages to users, guiding them on how to resolve authentication issues.

6. Redirects and Navigation:

   • Implement redirects and navigation logic to direct users to the appropriate pages after successful Google Sign-In.
   • Ensure users are redirected to the dashboard or landing page based on their authentication status.

7. Testing:

   • Thoroughly test the Google Sign-In functionality on different devices, browsers, and network conditions.
   • Test edge cases, such as invalid credentials or revoked permissions, to handle potential issues gracefully.

Additional Information:

• Familiarize yourself with the Google Sign-In API documentation for React applications.
• Collaborate with the UI/UX team to ensure the "Sign-In with Google" button aligns with the project's design guidelines.
• Coordinate with backend developers to handle the integration between Google Sign-In and backend authentication services.

[Paul-Annay]

@hossainchisty I would like to work on this

[adityaK87]

Hey @hossainchisty, Can I work on this issue.

[hossainchisty]

I appreciate your eagerness to tackle the problem. However, it's best if we have one lead person working on the issue to avoid confusion.

however @adityaK87 you can see this issue over here #11 or https://github.com/hossainchisty/LeafLine-Admin/issues/1#issue-1943355267 Thanks

[hossainchisty]

Hi, @Paul-Annay I assigned you! thanks for your interest.