Issue #11 - Google Sign-in with abstract wallet (Thirdweb) #94
Description
🔐 Issue #11 — Google Sign-In with Abstract Wallet (Thirdweb)
Tags: Open-for-all • 50 Points
Difficulty: Advanced
Category: Authentication • Web3 UX
🚨 Important Positioning (READ FIRST)
- ✅ Google Sign-In + Abstract Wallet
- ❌ Does NOT replace MetaMask-based login
- ❌ Does NOT remove or modify existing wallet connect logic
Both authentication methods must co-exist in the app.
🧠 Story / Context
Loktantra currently relies on MetaMask-based authentication, which is ideal for crypto-native users.
However, many users:
- Do not have MetaMask
- Are unfamiliar with wallets
- Prefer Web2-style login (Google)
To make Loktantra accessible to non-crypto users, we want to add:
Google Sign-In that automatically creates an abstract blockchain wallet
This allows users to:
Sign in with Google → Get a wallet address → Use the app
All without manually managing private keys.
🎯 Goal
Implement Google Sign-In with an abstract wallet using Thirdweb Embedded Wallets, while keeping MetaMask login fully functional.
After this issue:
- Users can choose MetaMask login OR Google login
- Google users receive a valid blockchain wallet address
- Wallet address is displayed in the UI
No voting logic is required in this issue.
🧱 Tech Stack (MANDATORY)
- Next.js (existing frontend)
- Thirdweb SDK
- Google OAuth (via Thirdweb)
- Ethers-compatible wallet abstraction
📂 Important Project References
Frontend lives in:
client/
Authentication-related UI components live in:
client/src/components/
This issue may add:
- New auth components
- New context/provider for auth state
🚨 Scope Clarification
This issue includes:
- Google Sign-In using Thirdweb
- Abstract wallet creation & retrieval
- Displaying Google user info
- Displaying generated wallet address
- Maintaining separate auth flows
This issue does NOT include:
- Voting logic
- Smart contract calls
- Backend authentication
- Gas sponsorship logic
🛠️ Implementation Guide (High-Level)
1️⃣ Install Thirdweb
npm install @thirdweb-dev/react @thirdweb-dev/sdk2️⃣ Configure Thirdweb Provider
Wrap the app with:
<ThirdwebProvider
activeChain="sepolia"
supportedWallets={[
walletConnect(),
metamaskWallet(),
embeddedWallet({
auth: {
options: ["google"],
},
}),
]}
>3️⃣ Add Google Sign-In Button
- Create a separate button:
- “Continue with Google”
- Must NOT replace “Connect Wallet” button
4️⃣ Handle Auth State
After successful login:
- Retrieve user wallet address
- Store auth state in React context
- Display:
- Google account name/email
- Generated wallet address
5️⃣ UI Behavior (MANDATORY)
- User must clearly see:
- Which login method they used
- Their wallet address
- Logout must:
- Clear Google session
- Clear wallet state
- MetaMask login must continue to work independently
📄 Expected UI Outcome
- Two login options:
- Connect MetaMask
- Continue with Google
- Google users see:
- Profile info
- Abstract wallet address (0x…)
- No conflicts between auth flows
📸 Screenshot Proof (MANDATORY)
Attach screenshots showing:
1️⃣ Login screen with both login options visible
2️⃣ Successful Google Sign-In
3️⃣ Displayed abstract wallet address
4️⃣ MetaMask login still working
PRs without screenshots will be rejected.
📤 Submission Instructions
- Frontend code changes only
- Do NOT modify smart contracts
- Do NOT remove MetaMask logic
Commit Message
Added Google Sign-In with abstract wallet using Thirdweb
⭐ Points & Evaluation
Total Points: 50
Evaluation based on:
- Correct Thirdweb integration
- Proper Google auth flow
- Clean separation of auth methods
- UI clarity
- Screenshot proof
✅ Pre-Merge Checklist
- Google Sign-In works
- Abstract wallet address generated
- Wallet address displayed
- MetaMask login unaffected
- Logout works correctly
- Screenshots attached
🎉 Lower the barrier. Bring Web3 to everyone.