feat: Add React Native mobile app with comprehensive setup #148
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Set up mobile app in monorepo structure at apps/mobile - Integrated with existing workspace configuration and build pipeline - Configured React Native 0.79.2 with React 18 for compatibility - Added NativeWind for Tailwind CSS styling in React Native - Integrated Better Auth for mobile authentication - Connected to @api/chat for type-safe TRPC API communication - Configured development workflow with Expo Go mode - Added mobile app scripts to root package.json (dev:mobile, build:mobile) - Set up proper TypeScript configuration and linting 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Added mobile app build and dev scripts to root package.json - Updated Turbo configuration for mobile app development workflow - Updated pnpm-lock.yaml with mobile app dependencies 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
apps/mobile/src/utils/auth.ts
Outdated
| baseURL: getBaseUrl(), | ||
| plugins: [ | ||
| expoClient({ | ||
| scheme: "expo", |
There was a problem hiding this comment.
Suggested change
| scheme: "expo", | |
| scheme: "lightfast-chat", |
The authentication client is configured with scheme "expo" but the app uses scheme "lightfast-chat", causing authentication redirects to fail.
View Details
Analysis
Authentication client scheme mismatch breaks OAuth callbacks
What fails: expoClient in apps/mobile/src/utils/auth.ts uses scheme "expo" but app is configured for "lightfast-chat" scheme, causing OAuth redirect failures
How to reproduce:
- Configure OAuth provider with redirect URI using the app's scheme
- Initiate OAuth flow through the mobile app
- After OAuth provider authentication, redirect fails because auth client generates "expo://" URLs but app only handles "lightfast-chat://" URLs
Result: OAuth callback fails to return to app - authentication flow cannot complete
Expected: Authentication should redirect back to app successfully using "lightfast-chat://" scheme as configured in app.config.ts, Android manifest, and iOS Info.plist
Source: Expo AuthSession documentation confirms scheme must match app configuration for deep linking callbacks to work
- Rename chat route from [id] to [sessionId] for clarity - Remove unused post route implementation - Add lucide-react-native and react-native-svg dependencies - Update base URL port from 3000 to 4106 for chat backend - Add dev:chat+mobile script for parallel development - Fix indentation and formatting in multiple files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Move polyfills.js to src/polyfills/ directory for better organization - Update import path in _layout.tsx to reflect new structure 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Fix streaming by using expo/fetch correctly and preserving headers - Remove loading state that blocked streaming functionality - Add @repo/chat-ai-types dependency and align with web patterns - Fix chat messages scrolling with proper flex layout - Hide scroll indicators for cleaner UI - Add Accept headers for proper streaming response handling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
| import { ZodError } from "zod"; | ||
|
|
||
| import { auth } from "@vendor/clerk/server"; | ||
| import { auth, verifyToken } from "@vendor/clerk/server"; |
There was a problem hiding this comment.
The verifyToken function is imported from @vendor/clerk/server but this function doesn't exist in the Clerk vendor package, which will cause a runtime import error.
View Details
📝 Patch Details
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69639ff6..d7a24247 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -371,7 +371,7 @@ importers:
version: 8.2.0
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
react:
specifier: 19.0.0
version: 19.0.0
@@ -558,7 +558,7 @@ importers:
version: 5.1.5
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
next-themes:
specifier: ^0.4.6
version: 0.4.6([email protected]([email protected]))([email protected])
@@ -703,7 +703,7 @@ importers:
version: 5.1.5
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
react:
specifier: 19.0.0
version: 19.0.0
@@ -794,7 +794,7 @@ importers:
version: 0.451.0([email protected])
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
react:
specifier: 19.0.0
version: 19.0.0
@@ -948,7 +948,7 @@ importers:
version: 5.1.5
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
pino:
specifier: ^9.7.0
version: 9.9.0
@@ -1271,7 +1271,7 @@ importers:
version: 8.2.0
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
react:
specifier: 19.0.0
version: 19.0.0
@@ -1398,7 +1398,7 @@ importers:
version: 8.2.0
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
react:
specifier: 19.0.0
version: 19.0.0
@@ -2979,6 +2979,9 @@ importers:
vendor/clerk:
dependencies:
+ '@clerk/backend':
+ specifier: ^2.14.0
+ version: 2.14.0([email protected]([email protected]))([email protected])
'@clerk/elements':
specifier: 'catalog:'
version: 0.23.63(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected](@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected])
@@ -2990,7 +2993,7 @@ importers:
version: 0.12.0([email protected])([email protected])
next:
specifier: 'catalog:'
- version: 15.4.5(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
+ version: 15.4.5(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
react:
specifier: 19.0.0
version: 19.0.0
@@ -33698,7 +33701,7 @@ snapshots:
postcss: 8.4.31
react: 19.0.0
react-dom: 19.0.0([email protected])
- styled-jsx: 5.1.6(@babel/[email protected])([email protected])
+ styled-jsx: 5.1.6([email protected])
optionalDependencies:
'@next/swc-darwin-arm64': 15.4.5
'@next/swc-darwin-x64': 15.4.5
@@ -33749,7 +33752,7 @@ snapshots:
postcss: 8.4.31
react: 19.0.0
react-dom: 19.1.1([email protected])
- styled-jsx: 5.1.6(@babel/[email protected])([email protected])
+ styled-jsx: 5.1.6([email protected])
optionalDependencies:
'@next/swc-darwin-arm64': 15.4.5
'@next/swc-darwin-x64': 15.4.5
@@ -36398,6 +36401,11 @@ snapshots:
optionalDependencies:
'@babel/core': 7.28.3
+ [email protected]([email protected]):
+ dependencies:
+ client-only: 0.0.1
+ react: 19.0.0
+
[email protected]([email protected]):
dependencies:
client-only: 0.0.1
diff --git a/vendor/clerk/package.json b/vendor/clerk/package.json
index 68151c99..dfff741a 100644
--- a/vendor/clerk/package.json
+++ b/vendor/clerk/package.json
@@ -23,6 +23,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
+ "@clerk/backend": "^2.14.0",
"@clerk/elements": "catalog:",
"@clerk/nextjs": "catalog:",
"@t3-oss/env-nextjs": "^0.12.0",
diff --git a/vendor/clerk/src/server.ts b/vendor/clerk/src/server.ts
index d87997f5..2ee0e5cf 100644
--- a/vendor/clerk/src/server.ts
+++ b/vendor/clerk/src/server.ts
@@ -1,3 +1,4 @@
import "server-only";
export * from "@clerk/nextjs/server";
+export * from "@clerk/backend";
Analysis
Missing verifyToken import causes runtime error in TRPC authentication
What fails: Import of verifyToken from @vendor/clerk/server fails because the function is not available in @clerk/nextjs/server - it exists in @clerk/backend
How to reproduce:
# Try to start the TRPC server or make authenticated API calls
cd api/chat && node -e "import('@vendor/clerk/server').then(m => console.log(m.verifyToken))"Result: verifyToken is undefined - the function doesn't exist in the re-exported @clerk/nextjs/server package
Expected: verifyToken should be available for Bearer token verification per Clerk Backend SDK documentation which shows verifyToken is exported from @clerk/backend
Fix: Added @clerk/backend dependency to vendor/clerk package and exported it from server.ts to make verifyToken available alongside Next.js server functions
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Working Features
🔐 Authentication (
src/app/(auth)/sign-in.tsx)💬 Chat System (
src/app/chat/[sessionId].tsx)📱 Session Management (
src/app/index.tsx)🎨 UI Components
src/app/chat/_components/chat-messages.tsx): Optimized list with role-based stylingsrc/app/chat/_components/prompt-input.tsx): Multi-line input with search togglesrc/components/ui/buttons.tsx): Variant system (default, outline, ghost, destructive)src/components/ui/input.tsx): Form input with validation statessrc/components/ui/app-icons.tsx): Lucide React Native icons🔧 Technical Infrastructure
src/utils/api.tsx): TRPC client with React Query integrationsrc/utils/auth.ts): Clerk token management for API requestssrc/hooks/use-chat-transport.ts): AI SDK transport with auth headerssrc/utils/session-store.ts): Expo SecureStore for session persistencesrc/polyfills/polyfills.js): ReadableStream support for React NativeTechnical Implementation
apps/mobilewith@lightfast/mobilepackage name@api/chatbackendApp Structure
Development Status
Testing Results
Development Commands
Ready for Device Testing
The mobile app is fully functional with all major features implemented:
Next steps: Test on physical devices and fine-tune UX details.
🤖 Generated with Claude Code