feat: hybrid follow engine — LinkedIn WebView interaction, session management & deep-link fallback by Itzzavdheshh · Pull Request #177 · Dev-Card/DevCard

Itzzavdheshh · 2026-05-19T09:38:55Z

Summary

Implements the complete Layer 2 WebView Interaction Engine as specified in Product Doc Section 6.9. LinkedIn's API blocks programmatic connection requests — this PR routes LinkedIn connects through a secure in-app WebView with session cookie sharing, JS-injected Connect button highlighting, invite success detection, and a 10s deep-link fallback. Users tap "Connect on LinkedIn" in DevCardViewScreen, see the real LinkedIn profile inside the app with their session active, tap the native button, and receive a success toast — all without leaving DevCard or violating LinkedIn's API terms.

Closes #36

Type of Change

What Changed

apps/backend/src/routes/follow.ts

Added LinkedIn webview strategy handler — when followStrategy === 'webview', returns { strategy: 'webview', url } instead of an error; strictly guarded to platform === 'linkedin' only

apps/mobile/src/navigation/MainTabs.tsx

WebViewConnect route params updated with strict TypeScript types — url and platformName now required; profileUrl, displayName, username kept optional for backward compatibility

apps/mobile/src/screens/DevCardViewScreen.tsx

handlePlatformAction case 'webview' now POSTs to backend; on strategy === 'webview' response navigates to WebViewScreen with resolved URL
Graceful fallback: if backend is down or errors, computes URL locally via handleWebViewConnect(link) — zero broken flows

apps/mobile/src/screens/WebViewScreen.tsx

sharedCookiesEnabled={true} + thirdPartyCookiesEnabled={true} — LinkedIn session carries over from system browser
Instruction banner: "You are viewing this profile in DevCard — tap Connect on LinkedIn to send your request"
JS injection: locates native Connect button, smooth-scrolls into center view, applies dashed blue border — no auto-click, user must tap manually (platform compliance)
Dual-guard success detection: listens for DOM text changes (Pending, Invitation sent) and URL transitions; send-invite stage explicitly excluded to prevent premature triggers
isSuccessHandled ref guard — success toast (1.2s) + modal dismiss fire exactly once; duplicate events impossible
10s timeout + onError + onHttpError handlers all route to getDeepLinkUrl → native LinkedIn app → system browser fallback chain

apps/backend/README.md

Follow Engine architecture section added — all 4 layers documented with Mermaid decision-tree flow diagram

How to Test

npm install
cd apps/backend && npm run dev
cd apps/mobile && npx expo start

Open any DevCard with a LinkedIn link → tap "Connect on LinkedIn" → verify WebViewScreen opens with correct LinkedIn profile
Verify instruction banner visible above WebView; verify LinkedIn session active (no login prompt if authenticated in system browser)
Verify "Connect" button is scrolled into view with dashed blue highlight
Tap native Connect button → verify success toast shows ~1.2s → modal auto-dismisses
Tap Connect on an already-connected profile → verify no duplicate toast fires
Kill backend server → tap Connect → verify WebView still opens with locally computed URL
Open WebView → wait 10s without loading → verify native LinkedIn app launches (or system browser)
Test GitHub connect and Discord copy flows → verify completely unaffected
Run npx tsc --noEmit → verify zero TypeScript errors
Run git diff --check → verify zero trailing whitespace

Checklist

Screenshots / Recordings

1. WebViewScreen — LinkedIn profile loaded with instruction banner

2. JS injection — Connect button scrolled into view + dashed blue highlight

3. Success toast — invite detected, native banner shown 1.2s then dismissed

4. 10s timeout — native LinkedIn app launched via deep link
)

5. Backend offline — WebView still opens with local fallback URL

6. npx tsc --noEmit — zero TypeScript errors

7. apps/backend/README.md — Follow Engine section with Mermaid diagram

Additional Context

Why WebView and not API? LinkedIn's public API explicitly prohibits programmatic connection requests. This WebView approach is the only compliant path — the user performs the action themselves inside a real browser session.
Why no auto-click? Auto-clicking the Connect button would violate LinkedIn's Terms of Service. The JS injection only scrolls and highlights — the user must tap.
Trade-off — session dependency: If the user has never logged into LinkedIn on their device, they will see a login screen inside the WebView. This is expected and unavoidable without storing credentials (which would be a far worse trade-off).
Future work: The isSuccessHandled guard and dual-detection (DOM + URL) could be extended to other platforms that move to a webview strategy in future. The 4-layer architecture in follow.ts is designed for this extensibility.

🙌 Contribution Note

Hi **@ShantKhatri ** 👋

This PR delivers the complete Layer 2 WebView Follow Engine from Product Doc Section 6.9 — every acceptance criterion met, every failure path covered, and full platform compliance maintained.

✅ LinkedIn limitation solved cleanly — WebView routes around the API block; no ToS violations
✅ End-to-end flow — backend strategy → dispatch → WebView with session → highlighted button → success detection → toast + dismiss
✅ Zero broken flows — backend down, WebView timeout, load error — every path has recovery
✅ Platform compliant — no auto-click; user taps LinkedIn's native button
✅ 5 files, surgical changes — GitHub, GitLab, Discord flows completely untouched
✅ TypeScript clean — tsc --noEmit passes, WebViewConnect params fully typed

Happy to address any feedback! 🚀

🏷️ Labels

#GSSOC #feature #linkedin #webview #follow-engine #react-native #session-management #js-injection #deep-link #mobile #typescript #platform-compliance #advanced

Submitted as part of Open Source Contribution —GSSoC(GirlScript Summer of Code)

…on Management

…ation

Itzzavdheshh · 2026-05-19T09:39:09Z

Hi **@ShantKhatri ** 👋

This PR delivers the complete Layer 2 WebView Follow Engine from Product Doc Section 6.9 — every acceptance criterion met, every failure path covered, and full platform compliance maintained.

✅ LinkedIn limitation solved cleanly — WebView routes around the API block; no ToS violations
✅ End-to-end flow — backend strategy → dispatch → WebView with session → highlighted button → success detection → toast + dismiss
✅ Zero broken flows — backend down, WebView timeout, load error — every path has recovery
✅ Platform compliant — no auto-click; user taps LinkedIn's native button
✅ 5 files, surgical changes — GitHub, GitLab, Discord flows completely untouched
✅ TypeScript clean — tsc --noEmit passes, WebViewConnect params fully typed

Happy to address any feedback! 🚀

ShantKhatri · 2026-05-19T10:17:25Z

Hi **@ShantKhatri ** 👋

This PR delivers the complete Layer 2 WebView Follow Engine from Product Doc Section 6.9 — every acceptance criterion met, every failure path covered, and full platform compliance maintained.

✅ LinkedIn limitation solved cleanly — WebView routes around the API block; no ToS violations

✅ End-to-end flow — backend strategy → dispatch → WebView with session → highlighted button → success detection → toast + dismiss

✅ Zero broken flows — backend down, WebView timeout, load error — every path has recovery

✅ Platform compliant — no auto-click; user taps LinkedIn's native button

✅ 5 files, surgical changes — GitHub, GitLab, Discord flows completely untouched

✅ TypeScript clean — tsc --noEmit passes, WebViewConnect params fully typed

Happy to address any feedback! 🚀

Great work done @Itzzavdheshh , I really appreciate this. This PR will take some time to review, as I wanna look into this personally. This was the part which we need to really focus on. Can you please add just a small demo video, showing the feature, so that I can have idea how functionality working for this?

Harxhit · 2026-05-19T18:10:02Z

@Itzzavdheshh Could please join our discord channel from README I would like to discuss something with you.

- Backend: followRoutes returns webview strategy for LinkedIn/Twitter platforms - Backend: POST /api/follow/:platform/:targetUsername/log for telemetry - Backend: DELETE /api/follow/:platform/:targetUsername/log to reset Done state - Backend: public profile now returns followed:true for previously connected links - Backend: auth improvements — encode mobile redirect URI in OAuth state - Mobile: WebViewScreen — full LinkedIn JS injection engine with polling, MutationObserver, visibilitychange, popstate, and injectedJSBeforeContentLoaded - Mobile: DevCardViewScreen — premium UI, emoji icons, brand-colored buttons, Done tile with long-press reset, GitHub browser fallback - Mobile: HomeScreen — username search bar to view any DevCard profile - Mobile: App.tsx — hash fragment token extraction for OAuth deep links - Mobile: config.ts — auto-detects LAN IP via Expo Constants for Expo Go - Mobile: Expo migration — index.js, metro.config.js, babel.config.js, app.json - Tests: new follow.test.ts cases for webview strategy and log endpoint - Docs: README updated with telemetry and fallback overlay details - Config: docker-compose port 5433, .env.example LAN IP placeholders

- prisma.ts: replace authenticate:any with proper typed signature (request: FastifyRequest, reply: FastifyReply) => Promise<void> - auth.ts: replace err as any with instanceof Error check in both GitHub and Google OAuth catch blocks for type-safe error handling - Skeleton.tsx: replace width/height as any with DimensionValue type from react-native to preserve TypeScript safety

- connect.ts: replace err as any with instanceof Error check in GitHub connect catch block (same pattern as auth.ts fix) - MainTabs.tsx: extract WebViewConnect params into standalone exported type WebViewConnectParams for reusability and future maintainability - profiles.test.ts: replace mockPrisma as any with Pick<PrismaClient,'user'> and unknown cast to preserve TypeScript safety in tests

- prisma.ts: merged authenticate type declaration — kept upstream's method signature style with our FastifyRequest/FastifyReply imports - pnpm-lock.yaml: kept card branch version (includes Expo packages)

Itzzavdheshh · 2026-05-20T20:44:01Z

HI @ShantKhatri & @Harxhit ...please review , i did some changes ....Happy to address any feedback! 🚀

@ShantKhatri ---> i hope this work : https://drive.google.com/file/d/1J6VaEbFByZMBLIb7LSN-zOuOkNxGU9pQ/view?usp=drivesdk

Itzzavdheshh added 2 commits May 19, 2026 14:13

feat: Layer 2 WebView Follow Engine — LinkedIn In-App Connect + Sessi…

eb4c39b

…on Management

fix: resolve TypeScript compilation issues and restore settings navig…

6b6393c

…ation

ShantKhatri requested review from Harxhit and ShantKhatri May 19, 2026 10:18

Harxhit added the gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. label May 19, 2026