Credentials provider

[brendan-kellam]

This PR adds support for email / password login

Summary by CodeRabbit

• New Features

  • Launched a secure login flow that now supports both email/password and OAuth sign-in with popular providers.
  • Upgraded authentication security measures to better protect user data.

• Refactor

  • Streamlined the login experience by consolidating sign-in components into a unified, responsive form.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes update the database schema, authentication flow, and login components. The modifications add two new text columns for storing an encrypted password and initialization vector in the User table. Adjustments are made in the Prisma schema for consistency. A new API endpoint has been created to verify user credentials and either retrieve or create a user record with encryption handling. The login page is refactored to use a new LoginForm component, and the NextAuth configuration now includes a Credentials provider with schema validation and error handling updates.

Changes

File(s)	Summary
packages/db/prisma/migrations/..._add_encrypted_password_to_user/migration.sql packages/db/prisma/schema.prisma	Added new columns (encryptedPassword, iv) to the User table and updated model formatting in the Prisma schema.
packages/web/src/app/api/(server)/auth/verifyCredentials/route.ts	Introduced a POST API endpoint that validates credentials, utilizing a getOrCreateUser function with encryption logic for user retrieval/creation.
packages/web/src/app/login/components/loginForm.tsx packages/web/src/app/login/page.tsx	Added a new LoginForm component for email/password and OAuth sign-in, and refactored the Login page to delegate authentication to this component.
packages/web/src/auth.ts	Integrated a new Credentials provider into NextAuth configuration, set the runtime to 'nodejs', and imported schemas for credential verification.
packages/web/src/lib/errorCodes.ts packages/web/src/lib/schemas.ts	Added a new error code (INVALID_CREDENTIALS) and introduced schemas to validate credential request and response structures.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as LoginForm
    participant API as /api/auth/verifyCredentials
    participant DB as Database (Prisma)
    
    User->>UI: Submit email & password
    UI->>API: POST credentials
    API->>API: Validate request schema
    API->>DB: Query user via getOrCreateUser
    DB-->>API: Return user record or null
    alt User exists
        API->>API: Decrypt and compare password
        API-->>UI: Return user data or error
    else User not found
        API->>DB: Create user with encrypted password
        DB-->>API: Return new user record
        API-->>UI: Return user data
    end
    UI-->>User: Display authentication result

Loading

Poem

I'm a rabbit with a code-filled hop,
Encrypting passwords with a cheerful bop.
Fields and routes now dance in sync,
Login forms make you stop and think.
Hopping through code, light as a breeze,
Celebrating changes with a twitch and tease!
🐇💻 Hop on, my friend!

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[brendan-kellam]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (9)

packages/web/src/app/api/(server)/auth/verifyCredentials/route.ts (1)

10-34: Consider implementing rate-limiting or account lockout.

The POST handler processes credentials without any brute-force protection. Attackers can repeatedly attempt password guesses. We recommend adding measures such as rate-limiting or account lockout to help mitigate credential-stuffing attacks.

packages/web/src/app/login/page.tsx (1)

3-9: Avoid marking the function as async if there's no await.

The Login function is declared async but doesn't use await. If no asynchronous calls are expected, consider removing the async keyword to keep the code clean.

-export default async function Login() {
+export default function Login() {
    return (
      <div className="flex flex-col justify-center items-center h-screen">
        <LoginForm />
      </div>
    );
}

packages/db/prisma/migrations/20250214014146_add_encrypted_password_to_user/migration.sql (1)

1-3: Consider adding column constraints and an email index.

For better security and performance:

1. Add maximum length constraints to prevent excessive data storage
2. Add an index on the email column to optimize credential verification lookups

-- AlterTable
ALTER TABLE "User" ADD COLUMN     "encryptedPassword" TEXT,
ADD COLUMN     "iv" TEXT;
+
+-- Add constraints
+ALTER TABLE "User" 
+  ALTER COLUMN "encryptedPassword" TYPE TEXT CHECK (length("encryptedPassword") <= 1024),
+  ALTER COLUMN "iv" TYPE TEXT CHECK (length("iv") <= 64);
+
+-- Add index
+CREATE INDEX "User_email_idx" ON "User"("email");

packages/web/src/lib/schemas.ts (1)

166-169: Enhance password validation rules.

While the minimum length requirement is good, consider adding:

1. Maximum length constraints matching database limits
2. Password complexity requirements (uppercase, lowercase, numbers, special chars)

 export const verifyCredentialsRequestSchema = z.object({
     email: z.string().email(),
-    password: z.string().min(8),
+    password: z.string()
+        .min(8)
+        .max(1024)
+        .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
+        .regex(/[a-z]/, "Password must contain at least one lowercase letter")
+        .regex(/[0-9]/, "Password must contain at least one number")
+        .regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
 });

packages/web/src/app/login/components/loginForm.tsx (3)

45-49: Improve error message clarity.

The current generic error message could be more helpful to users. Consider mapping error codes to specific messages.

-There was a problem when trying to authenticate. code: {error}
+{(() => {
+    switch(error) {
+        case 'CredentialsSignin':
+            return 'Invalid email or password. Please try again.';
+        case 'OAuthAccountNotLinked':
+            return 'This email is already associated with a different sign-in method.';
+        default:
+            return 'An error occurred during authentication. Please try again.';
+    }
+})()}

---

92-94: Add autocomplete attributes for better UX.

Help password managers by adding appropriate autocomplete attributes.

-<Input placeholder="email@example.com" {...field} />
+<Input 
+    placeholder="email@example.com" 
+    autoComplete="username email"
+    {...field} 
+/>

---

105-107: Add password visibility toggle.

Consider adding a button to toggle password visibility for better UX.

 <FormControl>
-    <Input type="password" {...field} />
+    <div className="relative">
+        <Input 
+            type={showPassword ? "text" : "password"} 
+            autoComplete="current-password"
+            {...field} 
+        />
+        <Button
+            type="button"
+            variant="ghost"
+            className="absolute right-0 top-0 h-full px-3"
+            onClick={() => setShowPassword(!showPassword)}
+        >
+            {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+        </Button>
+    </div>
 </FormControl>

packages/db/prisma/schema.prisma (2)

162-164: Add an index to the email field for better login performance.

Since this field will be frequently queried during login attempts, adding an index will improve performance.

-  email             String?     @unique
+  email             String?     @unique @index

---

158-175: Add documentation for encryption-related fields.

Please add comments explaining:

1. The encryption method being used
2. Expected format and length of the encrypted password
3. IV requirements and generation method

Example:

 // @see : https://authjs.dev/concepts/database-models#user
+// Password Storage:
+// - encryptedPassword: AES-256-GCM encrypted password, base64 encoded
+// - iv: 16-byte initialization vector for AES-GCM, base64 encoded
 model User {

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 26cc70c and a79497c.

📒 Files selected for processing (8)

• packages/db/prisma/migrations/20250214014146_add_encrypted_password_to_user/migration.sql (1 hunks)
• packages/db/prisma/schema.prisma (2 hunks)
• packages/web/src/app/api/(server)/auth/verifyCredentials/route.ts (1 hunks)
• packages/web/src/app/login/components/loginForm.tsx (1 hunks)
• packages/web/src/app/login/page.tsx (1 hunks)
• packages/web/src/auth.ts (2 hunks)
• packages/web/src/lib/errorCodes.ts (1 hunks)
• packages/web/src/lib/schemas.ts (1 hunks)

🔇 Additional comments (4)

packages/web/src/app/api/(server)/auth/verifyCredentials/route.ts (1)

36-76:

✅ Verification successful

Confirm that email is strictly unique in the Prisma schema.

When creating a user if one doesn't exist, multiple concurrent requests with the same email could race, causing data conflicts. Ensure a unique constraint on email in your Prisma schema to guarantee correctness and avoid duplicate user entries.

You can verify the presence of a unique constraint by searching the Prisma schema files:

---

🏁 Script executed:

#!/bin/bash
# Check that the 'User' model has a unique constraint on 'email'
rg -A 10 'model User' prisma | rg 'email.*unique'

Length of output: 98

---

Ensure Unique Constraint on Prisma Email Field

It appears that the initial search failed because the expected prisma directory does not exist. Please verify that your Prisma schema file is correctly located (e.g. at the root as schema.prisma or in another folder) and that the User model declares a unique constraint on the email field. This unique constraint is critical to avoid race conditions and duplicate entries when multiple concurrent requests create a user with the same email.

---

🏁 Script executed:

#!/bin/bash
# Locate the Prisma schema file in the repository (may be named either 'schema.prisma' or reside in a 'prisma' folder)
echo "Searching for schema.prisma file..."
fd schema.prisma .

# If found, display the 'User' model section to inspect the email field for a unique constraint.
SCHEMA_FILE=$(fd schema.prisma . | head -n 1)
if [ -n "$SCHEMA_FILE" ]; then
  echo "Found Prisma schema file at: $SCHEMA_FILE"
  echo "Displaying 'User' model section (10 lines after 'model User'):"
  grep -A 10 'model User' "$SCHEMA_FILE"
else
  echo "No Prisma schema file found; please verify the location of your Prisma schema."
fi

Length of output: 1221

---

Unique Constraint on Email Confirmed in Prisma Schema

• The Prisma schema located at ./packages/db/prisma/schema.prisma shows that the User model's email field is declared with the @unique attribute.
• Since the getOrCreateUser function always provides a non-null email, this unique constraint effectively prevents duplicate entries in concurrent scenarios.
• Additional Suggestion: If every user is expected to have an email, consider making the field non-nullable (i.e., remove the ?) to ensure that no multiple null values can slip through, as some databases may allow several null entries even on uniquely constrained columns.

packages/web/src/lib/errorCodes.ts (1)

15-15: Nice addition for authentication flow.

The INVALID_CREDENTIALS error code clearly communicates the authentication failure scenario. This is a valuable addition for more specific error handling.

packages/db/prisma/schema.prisma (2)

107-122: LGTM!

The formatting changes to the Org model improve code readability while maintaining the same functionality.

---

163-164: Consider adding field length constraints for encrypted data.

The encryptedPassword and iv fields should have maximum length constraints to prevent potential storage issues and ensure compatibility with your encryption method.

Could you provide details about the encryption method being used? This would help determine appropriate field lengths. For example:

-  encryptedPassword String?
-  iv                String?
+  encryptedPassword String?     @db.VarChar(255) // Adjust length based on encryption method
+  iv                String?     @db.VarChar(32)  // Adjust length based on IV size