Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughIntegrates Clerk into the Expo app: bootstraps ClerkProvider, completes OAuth sessions, gates auth routes, implements Clerk-backed auth (email + SSO + verification), updates index/onboarding/profile screens and assets, and adds a Clerk quickstart plus skills metadata. ChangesClerk Authentication Integration
Sequence DiagramsequenceDiagram
participant User
participant App as Expo App
participant ClerkProvider
participant AuthScreen
participant WebBrowser
participant ClerkSDK as Clerk SDK
participant Router
User->>App: open app / perform OAuth
App->>ClerkProvider: initialize with publishable key
ClerkProvider->>AuthScreen: provide auth hooks/context
User->>AuthScreen: submit email/password or tap social
AuthScreen->>WebBrowser: dismiss/start SSO browser if needed
AuthScreen->>ClerkSDK: useSignIn/useSignUp/useSSO flows
alt verification required
ClerkSDK->>AuthScreen: request verification
User->>AuthScreen: enter 6-digit code
AuthScreen->>ClerkSDK: onCodeComplete(code)
end
ClerkSDK->>Router: on success -> router.replace("/")
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/auth-screen.tsx (1)
239-240: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick winMove NativeWind classes off ScrollView/TextInput in this file.
Line 240, Line 296, and Line 313 apply
classNameon components that are explicitly excluded by project rules; usestyle/StyleSheetfor these instead.As per coding guidelines, "Use StyleSheet or inline styles instead of NativeWind classes for SafeAreaView, Button, KeyboardAvoidingView, Modal, ScrollView, TextInput, Animated.View, dynamic styles, platform-specific styles, Pressable/TouchableOpacity pressed states, shadows, transform arrays, and z-index".
Also applies to: 296-297, 313-314
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/auth-screen.tsx` around lines 239 - 240, The ScrollView and TextInput instances in this file are using NativeWind className props (refer to the ScrollView at the top and the TextInput usages around the later form fields) which are disallowed; remove the className prop from those components and convert the styling into a StyleSheet entry or an inline style object, then pass it via the style prop (e.g., create styles.scrollView and styles.textInput and replace className on ScrollView and the two TextInput occurrences with style={styles...}); ensure you migrate any layout, padding, backgroundColor, fontSize, and color rules from the class strings into the StyleSheet so behavior remains identical.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/profile.tsx`:
- Around line 16-19: The sign-out flow in handleSignOut should guard against
duplicate taps and surface errors: add a local pending boolean state (e.g.,
isSigningOut) and return early if it's already true, set it true before calling
the async signOut(), wrap signOut() and router.replace("/onboarding") in
try/catch/finally to catch and log/display errors and ensure the pending flag is
cleared in finally; also pass the isSigningOut flag to the sign-out button's
disabled prop so the UI is disabled while processing.
In `@components/auth-screen.tsx`:
- Around line 116-127: The Clerk method calls use incorrect signatures and must
be updated to match `@clerk/expo` v3.2.12: replace signUp.password(...) with
signUp.create(...); replace signUp.verifications.sendEmailCode() with
signUp.verifications.emailAddress.prepareVerification({ strategy: 'email_code'
}); replace signIn.emailCode.sendCode() with
signIn.emailCode.prepareVerification({ strategy: 'email_code' }); replace
signUp.verifications.verifyEmailCode(...) with
signUp.verifications.emailAddress.attemptVerification(...); and replace
signIn.emailCode.verifyCode(...) with signIn.emailCode.attemptVerification(...);
update any variable names and error handling around these calls (e.g.,
verificationError) to match the new return shapes from signUp.create,
prepareVerification, and attemptVerification.
In `@prompts/05-clerk.md`:
- Line 7: There's a typo in the route path string "(/onboarding(" — the closing
parenthesis is missing; update the prompt text so the onboarding route reads
"(/onboarding)" (replace the "(/onboarding(" occurrence) to correct the route
punctuation in prompts/05-clerk.md.
---
Outside diff comments:
In `@components/auth-screen.tsx`:
- Around line 239-240: The ScrollView and TextInput instances in this file are
using NativeWind className props (refer to the ScrollView at the top and the
TextInput usages around the later form fields) which are disallowed; remove the
className prop from those components and convert the styling into a StyleSheet
entry or an inline style object, then pass it via the style prop (e.g., create
styles.scrollView and styles.textInput and replace className on ScrollView and
the two TextInput occurrences with style={styles...}); ensure you migrate any
layout, padding, backgroundColor, fontSize, and color rules from the class
strings into the StyleSheet so behavior remains identical.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 3d372801-b493-499e-bf91-39ed8dd080df
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (13)
.gitignoreapp.jsonapp/(auth)/_layout.tsxapp/_layout.tsxapp/index.tsxapp/oauth-callback.tsxapp/onboarding.tsxapp/profile.tsxcomponents/auth-screen.tsxconstants/images.tspackage.jsonprompts/05-clerk.mdskills-lock.json
| const { error } = await signUp.password({ | ||
| emailAddress: email, | ||
| password, | ||
| }); | ||
|
|
||
| if (error) { | ||
| setAuthError(error.message); | ||
| return; | ||
| } | ||
|
|
||
| const { error: verificationError } = | ||
| await signUp.verifications.sendEmailCode(); |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For @clerk/expo` version 3.2.x, what are the exact useSignIn/useSignUp methods for:
- email+password sign-up,
- sending email code for sign-in/sign-up verification,
- verifying the code,
- activating/finalizing the session in Expo React Native?
Please provide official Clerk docs links and method signatures.`
💡 Result:
For @clerk/expo version 3.2.x, which utilizes the Core 3 API, you should use the useSignUp() and useSignIn() hooks to manage custom authentication flows [1]. These hooks provide access to SignUpFuture and SignInFuture objects, respectively [2][3]. Below are the methods for an email+password sign-up flow: 1) Email+Password Sign-Up Initiate the process by collecting the user's email and password using the signUp.create() method [4][5]. Method: signUp.create({ emailAddress, password }) [5] 2) Sending Email Code After initiating the sign-up, send the verification code to the user's email [5]. Method: signUp.verifications.emailAddress.prepareVerification({ strategy: 'email_code' }) [5] 3) Verifying the Code Once the user provides the code, verify it to complete the verification step [5]. Method: signUp.verifications.emailAddress.attemptVerification({ code }) [5] 4) Activating/Finalizing the Session If the sign-up status becomes complete, finalize the process to set the session as active [5]. Method: signUp.finalize() [5] Official Documentation Links: - Custom Email/Password Flow Guide: https://clerk.com/docs/guides/development/custom-flows/authentication/email-password - useSignUp Hook Reference: https://clerk.com/docs/expo/reference/hooks/use-sign-up - useSignIn Hook Reference: https://clerk.com/docs/expo/reference/hooks/use-sign-in Note: Ensure you are using the Core 3 SignUpFuture and SignInFuture APIs rather than the legacy SignUp or SignIn objects, as the legacy APIs are deprecated [6][7][8]. Always check the signUp.status or signIn.status to determine the next required step in your flow [5].
Citations:
- 1: https://docs.expo.dev/guides/using-clerk/
- 2: https://clerk.com/docs/expo/reference/hooks/use-sign-up
- 3: https://clerk.com/docs/expo/hooks/use-sign-in
- 4: https://clerk.com/docs/expo/reference/objects/sign-up
- 5: https://clerk.com/docs/guides/development/custom-flows/authentication/email-password
- 6: https://clerk.com/docs/react/reference/hooks/legacy/use-sign-up
- 7: https://clerk.com/docs/expo/reference/hooks/legacy/use-sign-in
- 8: https://clerk.com/docs/expo/reference/objects/sign-in
🏁 Script executed:
# Check the installed `@clerk/expo` version
cat package.json | grep -A 2 -B 2 "`@clerk/expo`"Repository: Retsomm/react-native-lingua
Length of output: 210
🏁 Script executed:
# Read the specific lines from auth-screen.tsx
cat -n components/auth-screen.tsx | sed -n '110,130p'Repository: Retsomm/react-native-lingua
Length of output: 669
🏁 Script executed:
# Also check the other flagged lines
cat -n components/auth-screen.tsx | sed -n '130,140p'
cat -n components/auth-screen.tsx | sed -n '155,175p'
cat -n components/auth-screen.tsx | sed -n '175,195p'Repository: Retsomm/react-native-lingua
Length of output: 1664
Clerk API methods do not match @clerk/expo v3.2.12 documentation.
Multiple method calls use incorrect signatures that will fail typecheck and runtime:
- Line 116:
signUp.password()should besignUp.create() - Line 127:
signUp.verifications.sendEmailCode()should besignUp.verifications.emailAddress.prepareVerification({ strategy: 'email_code' }) - Line 134:
signIn.emailCode.sendCode()should besignIn.emailCode.prepareVerification({ strategy: 'email_code' }) - Line 159:
signUp.verifications.verifyEmailCode()should besignUp.verifications.emailAddress.attemptVerification() - Line 177:
signIn.emailCode.verifyCode()should besignIn.emailCode.attemptVerification()
See Clerk Expo docs: https://clerk.com/docs/guides/development/custom-flows/authentication/email-password
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/auth-screen.tsx` around lines 116 - 127, The Clerk method calls
use incorrect signatures and must be updated to match `@clerk/expo` v3.2.12:
replace signUp.password(...) with signUp.create(...); replace
signUp.verifications.sendEmailCode() with
signUp.verifications.emailAddress.prepareVerification({ strategy: 'email_code'
}); replace signIn.emailCode.sendCode() with
signIn.emailCode.prepareVerification({ strategy: 'email_code' }); replace
signUp.verifications.verifyEmailCode(...) with
signUp.verifications.emailAddress.attemptVerification(...); and replace
signIn.emailCode.verifyCode(...) with signIn.emailCode.attemptVerification(...);
update any variable names and error handling around these calls (e.g.,
verificationError) to match the new return shapes from signUp.create,
prepareVerification, and attemptVerification.
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/auth-screen.tsx`:
- Around line 58-62: The type annotation uses React.ReactNode (in the
tuple/array type for the social options) but React isn't imported, causing
TS2503; fix by either adding an import for React (so React.ReactNode resolves)
or change to a type-only import and use ReactNode (import type { ReactNode }
from 'react') and update the annotation accordingly; update the declaration that
references React.ReactNode (the array element type paired with label and
strategy / SocialStrategy) to match the chosen import.
- Around line 157-194: After a successful verifyEmailCode / verifyCode call,
check signUp.status or signIn.status === "complete" before calling
signUp.finalize() / signIn.finalize(); if the status is not "complete" (e.g.,
"missing_requirements" for MFA or extra fields) do not call finalize but instead
handle the next step (e.g., surface setAuthError, navigate to the required flow,
or render the additional requirements UI). Update the branches that call
signUp.verifications.verifyEmailCode, signIn.emailCode.verifyCode,
signUp.finalize, and signIn.finalize to inspect signUp.status and signIn.status
and only call finalize when status === "complete", otherwise handle the
non-complete status path appropriately.
- Around line 218-229: The code treats missing createdSessionId as a
cancellation; instead destructure signIn and signUp from startSSOFlow()
alongside createdSessionId and setActive, and if signIn or signUp is present,
route the user into the OAuth-completion flow (e.g. save signIn/signUp to state
or call your existing pending-OAuth handler and navigate to the completion form)
rather than calling setAuthError; only show the cancellation error when none of
createdSessionId, signIn, or signUp are returned.
In `@prompts/05-clerk.md`:
- Around line 342-400: Duplicate top-level headings (e.g., "Enable Native API",
"Create a new Expo app", "Remove default template files", etc.) cause MD024 lint
warnings; make each heading unique per approach by appending a short
disambiguator (like "— Web", "— Expo", "— Native", or " (Approach B)") or by
changing level/wording so they are distinct; update all repeated headings in the
document (including the instances noted around "Enable Native API" and "Create a
new Expo app") to use the new unique text so markdownlint MD024 is resolved and
navigation anchors remain distinct.
- Around line 301-305: The run flow contradicts itself by telling users to "Scan
the QR code with Expo Go" even though this doc states native-components cannot
run in Expo Go; remove the "Scan the QR code with Expo Go" bullet from the
terminal shortcuts section (the bullets that include "Press `i` to open the iOS
simulator" and "Press `a` to open the Android emulator") and replace it with a
concise alternative that directs users to use an Expo development client or a
platform-specific dev build/installation for physical devices (mention "Expo
development client" or "development build" instead of "Expo Go").
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5a901ee5-e8a3-4c3e-8072-9e011da49d8f
📒 Files selected for processing (3)
app/profile.tsxcomponents/auth-screen.tsxprompts/05-clerk.md
🚧 Files skipped from review as they are similar to previous changes (1)
- app/profile.tsx
1 participant
Add Clerk integration and profile screen
Summary by CodeRabbit
New Features
Documentation
Chores