feat: Integrate Clerk for comprehensive user authentication#3
Merged
Conversation
This commit introduces full user authentication and management capabilities using Clerk. Key changes include: - Added Clerk SDK and `expo-secure-store` plugin. - Implemented complete sign-in, sign-up, email verification, and forgot password flows. - Established protected routes, redirecting unauthenticated users to the sign-in screen. - Dynamically displays user profile information (avatar, name, email, join date) on the Home and Settings screens. - Updated app branding (name, slug, scheme) and splash screen assets for consistency.
|
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 (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughClerk is configured at the app root, authentication routes and flows are added, tab routes are protected, and authenticated user information is displayed on the home and settings screens. ChangesClerk authentication integration
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant AuthScreen
participant Clerk
participant TabLayout
User->>AuthScreen: submit credentials or verification code
AuthScreen->>Clerk: create or complete authentication
Clerk-->>AuthScreen: return auth state
AuthScreen->>TabLayout: navigate to tabs
TabLayout->>Clerk: read authentication state
Clerk-->>TabLayout: return signed-in status
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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
🧹 Nitpick comments (1)
app/_layout.tsx (1)
29-33: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winSplash hides before Clerk auth state resolves.
SplashScreen.hideAsync()only waits on font loading, not on Clerk'sisLoaded. Since(auth)/_layout.tsx(and likely(tabs)/_layout.tsx) rendernullwhileuseAuth().isLoadedis false, users may briefly see a blank screen after the splash hides but before Clerk resolves sign-in state.Consider moving auth-state gating into this root layout (e.g. a
RootNavigatorthat checks bothfontsLoadedand Clerk'sisLoadedbefore hiding the splash), similar to Clerk's documented pattern withStack.Protected.Illustrative pattern
function RootNavigator() { const { isLoaded: authLoaded, isSignedIn } = useAuth(); if (!authLoaded) return null; SplashScreen.hideAsync(); return ( <Stack screenOptions={{ headerShown: false }}> <Stack.Protected guard={isSignedIn === true}> <Stack.Screen name="(tabs)" /> </Stack.Protected> <Stack.Protected guard={isSignedIn === false}> <Stack.Screen name="(auth)" /> </Stack.Protected> </Stack> ); }Also applies to: 38-45
🤖 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 `@app/_layout.tsx` around lines 29 - 33, Update the root layout’s splash-screen gating around the existing useEffect and navigator so SplashScreen.hideAsync() runs only after both fontsLoaded (or fontsError) and Clerk’s useAuth().isLoaded are true. Add the auth-loaded check at the root navigation level, while preserving the existing signed-in/signed-out route protection and preventing child layouts from rendering during unresolved auth state.
🤖 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/`(auth)/sign-in.tsx:
- Line 249: Update the sign-in render to use optional chaining whenever
accessing the potentially nullish errors object, including the fields code check
and global error display: use errors?.fields?.code and errors?.global while
preserving the existing validation and rendering behavior.
- Around line 221-236: Move the LayoutWrap component from inside SignIn to
module scope alongside SafeAreaView, preserving its children prop and existing
SafeAreaView, KeyboardAvoidingView, and ScrollView configuration so the wrapped
subtree retains focus across SignIn renders.
In `@app/`(auth)/sign-up.tsx:
- Line 141: Update the error-state reads in the sign-up form, including the
className expression near the visible auth-input code and the other referenced
field/global checks, to use optional chaining on errors before accessing fields
or global. Preserve the existing conditional styling and validation behavior
when errors is present.
---
Nitpick comments:
In `@app/_layout.tsx`:
- Around line 29-33: Update the root layout’s splash-screen gating around the
existing useEffect and navigator so SplashScreen.hideAsync() runs only after
both fontsLoaded (or fontsError) and Clerk’s useAuth().isLoaded are true. Add
the auth-loaded check at the root navigation level, while preserving the
existing signed-in/signed-out route protection and preventing child layouts from
rendering during unresolved auth state.
🪄 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: d8a0eac8-fcf2-4727-b96b-b3661aca7d5b
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (10)
.gitignoreapp.jsonapp/(auth)/_layout.tsxapp/(auth)/sign-in.tsxapp/(auth)/sign-up.tsxapp/(tabs)/_layout.tsxapp/(tabs)/index.tsxapp/(tabs)/settings.tsxapp/_layout.tsxpackage.json
…ion on each render Move LayoutWrap from inside SignIn to module scope so all early-return branches can reference it without the component being re-defined on every render cycle.
…rashes Clerk's useSignIn hook may return undefined error fields during transient states. Use optional chaining when accessing errors.fields and errors.global to avoid uncaught TypeError.
Apply the same defensive null-safety pattern to sign-up.tsx, guarding against undefined errors during transient hook states.
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
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.
This commit introduces full user authentication and management capabilities using Clerk.
Key changes include:
expo-secure-storeplugin.Summary by CodeRabbit
.envfiles.