feat: implement Google OAuth with ThirdWeb Auth in declenup for account abstraction

[JamesVictor-O]

Implement Google OAuth Authentication Flow with ThirdWeb SDK in Next.js

Description

This pull request implements the foundational Google OAuth authentication flow integrated with ThirdWeb's SDK in our Next.js application. The implementation allows users to sign in with their Google accounts, links their Google identity to a ThirdWeb wallet address, and manages tokens and sessions securely. This establishes a secure connection between Google identities and our web3 application, enhancing user authentication and enabling web3-native features.

Key Features

• Google OAuth Integration: Users can sign in with Google using next-auth (Auth.js), with support for refresh tokens and secure token management.
• ThirdWeb Auth Integration: Links Google identities to ThirdWeb wallet addresses using ThirdWeb's Auth SDK, enabling web3 authentication.
• Session Management: Manages both Google OAuth and ThirdWeb sessions using JWTs and cookies, with middleware to protect routes.
• Route Protection: Implements Next.js middleware to protect routes (e.g., /dashboard) by requiring both Google and ThirdWeb authentication.

Changes Made

• Added Dependencies:
  • Installed next-auth for Google OAuth authentication.
• Environment Variables:
  • Added GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXTAUTH_SECRET, and NEXTAUTH_URL to .env.local (not committed for security).
• New Files:
  • pages/api/auth/[...nextauth].ts: Configures NextAuth with Google OAuth provider, including token and session callbacks.
  • components/SessionProvider.tsx: A wrapper component to provide NextAuth session context to the app.
  • pages/api/auth/login.ts: A custom API endpoint to handle ThirdWeb Auth, linking Google id_token to a ThirdWeb wallet address and storing the session in a cookie.
  • middleware.ts: Next.js middleware to protect routes by checking both NextAuth and ThirdWeb sessions.
• Updated Files:
  • pages/_app.tsx: Wrapped the app with SessionProvider and ThirdwebProvider to enable session and wallet context.
  • pages/index.tsx: Updated the homepage to include Google Sign-In, ThirdWeb wallet connection, and session state handling.
• Security:
  • Used httpOnly cookies for ThirdWeb session storage (not encrypted in this PR; see To-Do for production encryption).
  • Configured Google OAuth with minimal scopes (openid, profile, email).

close issue

#39