Configure auth

Author: ershad

.gitignore

@@ -30,3 +30,5 @@ tmp
 # IDE
 .vscode
 .idea
+
+api.flexile.dev

frontend/AUTH_SETUP.md

@@ -10,9 +10,8 @@ Add these environment variables to your `.env` file:
 # Auth.js secret (server-side only)
 AUTH_SECRET=your-auth-secret-here
 
-# API configuration (client-side accessible)
-NEXT_PUBLIC_API_SECRET_TOKEN=your-api-secret-token-here
-NEXT_PUBLIC_API_URL=http://localhost:3000  # Optional - defaults to localhost:3000 in dev
+# API token for backend communication (server-side only)
+API_SECRET_TOKEN=your-api-secret-token-here
 ```
 
 ### AUTH_SECRET
@@ -21,24 +20,26 @@ Generate a random secret for Auth.js:
 npx auth secret
 ```
 
-### NEXT_PUBLIC_API_SECRET_TOKEN
-This should match the API token configured in your backend for accessing the OTP endpoints. Uses `NEXT_PUBLIC_` prefix to make it available in client-side code.
-
-### NEXT_PUBLIC_API_URL (Optional)
-Override the default API URL. If not set, it will auto-detect based on environment:
-- Development: `http://localhost:3000`
-- Production: `https://api.flexile.com`
-- Preview: Auto-generated Heroku URL
+### API_SECRET_TOKEN
+This should match the API token configured in your Rails backend for accessing the OTP endpoints. This is kept server-side only for security.
 
 ## How it Works
 
-1. **OTP Request**: User enters email on `/login2` → calls `/api/v1/email_otp` → sends email with OTP
-2. **OTP Verification**: User enters OTP → calls `/api/v1/login` → returns JWT → creates Auth.js session
+1. **OTP Request**: User enters email on `/login2` → calls Next.js `/api/auth/send-otp` → calls Rails `/api/v1/email_otp` → sends email with OTP
+2. **OTP Verification**: User enters OTP → calls Next.js `/api/auth/login` → calls Rails `/api/v1/login` → returns JWT → creates Auth.js session
+
+## API Architecture
+
+**Frontend** → **Next.js API Routes** → **Rails Backend**
 
-## API Endpoints Used
+### Next.js API Routes
+- `POST /api/auth/send-otp` - Proxy to Rails email_otp endpoint
+- `POST /api/auth/login` - Proxy to Rails login endpoint
+- `GET/POST /api/auth/[...nextauth]` - Auth.js session management
 
-- `POST /api/v1/email_otp` - Send OTP email
-- `POST /api/v1/login` - Verify OTP and login
+### Rails Backend API Endpoints
+- `POST /api/v1/email_otp` - Send OTP email (called by Next.js)
+- `POST /api/v1/login` - Verify OTP and login (called by Next.js)
 
 ## Routes
 
@@ -64,4 +65,6 @@ Visit `/login2/test` to see the authentication status and session data.
 - Custom credentials provider for OTP authentication
 - Parallel to existing Clerk authentication
 - Stores JWT token in session for backend API calls
-- No frontend data storage - all authentication handled by backend APIs
+- No frontend data storage - all authentication handled by backend APIs
+- **Security**: API tokens kept server-side, frontend only calls Next.js API routes
+- **Architecture**: Frontend → Next.js API → Rails Backend (no direct Rails API calls from frontend)

frontend/app/api/auth/login/route.ts

@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from "next/server"
+import { z } from "zod"
+import env from "@/env"
+
+const loginSchema = z.object({
+  email: z.string().email(),
+  otp_code: z.string().min(6).max(6),
+})
+
+// Define the backend API URL based on environment
+const getBackendApiUrl = () => {
+  switch (env.VERCEL_ENV) {
+    case "production":
+      return "https://api.flexile.com"
+    case "preview":
+      return `https://flexile-pipeline-pr-${process.env.VERCEL_GIT_PULL_REQUEST_ID}.herokuapp.com`
+    default:
+      return "https://flexile.dev"
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const validatedFields = loginSchema.safeParse(body)
+
+    if (!validatedFields.success) {
+      return NextResponse.json(
+        { error: "Invalid email or OTP code" },
+        { status: 400 }
+      )
+    }
+
+    const { email, otp_code } = validatedFields.data
+    const backendUrl = getBackendApiUrl()
+
+    // Call the backend login API
+    const response = await fetch(`${backendUrl}/api/v1/login`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email,
+        otp_code,
+        token: env.API_SECRET_TOKEN,
+      }),
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json()
+      return NextResponse.json(
+        { error: errorData.error || "Authentication failed" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Login API error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

frontend/app/api/auth/send-otp/route.ts

@@ -0,0 +1,65 @@
+import { NextRequest, NextResponse } from "next/server"
+import { z } from "zod"
+import env from "@/env"
+
+const sendOtpSchema = z.object({
+  email: z.string().email(),
+})
+
+// Define the backend API URL based on environment
+const getBackendApiUrl = () => {
+  switch (env.VERCEL_ENV) {
+    case "production":
+      return "https://api.flexile.com"
+    case "preview":
+      return `https://flexile-pipeline-pr-${process.env.VERCEL_GIT_PULL_REQUEST_ID}.herokuapp.com`
+    default:
+      return "https://flexile.dev"
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const validatedFields = sendOtpSchema.safeParse(body)
+
+    if (!validatedFields.success) {
+      return NextResponse.json(
+        { error: "Invalid email" },
+        { status: 400 }
+      )
+    }
+
+    const { email } = validatedFields.data
+    const backendUrl = getBackendApiUrl()
+
+    // Call the backend email_otp API
+    const response = await fetch(`${backendUrl}/api/v1/email_otp`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email,
+        token: env.API_SECRET_TOKEN,
+      }),
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json()
+      return NextResponse.json(
+        { error: errorData.error || "Failed to send OTP" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Send OTP API error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

frontend/env/client.ts

@@ -5,20 +5,12 @@ const env = {
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
   NEXT_PUBLIC_EQUITY_EXERCISE_DOCUSEAL_ID: process.env.NEXT_PUBLIC_EQUITY_EXERCISE_DOCUSEAL_ID,
-  NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
-  NEXT_PUBLIC_API_SECRET_TOKEN: process.env.NEXT_PUBLIC_API_SECRET_TOKEN,
-  VERCEL_ENV: process.env.VERCEL_ENV,
-  VERCEL_GIT_PULL_REQUEST_ID: process.env.VERCEL_GIT_PULL_REQUEST_ID,
 };
 
 export default z
   .object({
     NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(),
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
     NEXT_PUBLIC_EQUITY_EXERCISE_DOCUSEAL_ID: z.string(),
-    NEXT_PUBLIC_API_URL: z.string().optional(),
-    NEXT_PUBLIC_API_SECRET_TOKEN: z.string().optional(),
-    VERCEL_ENV: z.enum(["production", "preview", "development"]).optional(),
-    VERCEL_GIT_PULL_REQUEST_ID: z.string().optional(),
   })
   .parse(env);

frontend/lib/auth.ts

@@ -1,27 +1,18 @@
 import NextAuth from "next-auth"
 import Credentials from "next-auth/providers/credentials"
 import { z } from "zod"
-import clientEnv from "@/env/client"
 
-// Define the API base URL based on environment
-const API_BASE_URL = (() => {
-  // If NEXT_PUBLIC_API_URL is set, use it
-  if (clientEnv.NEXT_PUBLIC_API_URL) {
-    return clientEnv.NEXT_PUBLIC_API_URL
+// Get the Next.js application URL
+const getNextJsUrl = () => {
+  if (process.env.VERCEL_URL) {
+    return `https://${process.env.VERCEL_URL}`
   }
-
-  // Otherwise, determine based on environment
-  switch (clientEnv.VERCEL_ENV) {
-    case "production":
-      return "https://api.flexile.com"
-    case "preview":
-      return `https://flexile-pipeline-pr-${clientEnv.VERCEL_GIT_PULL_REQUEST_ID || 'unknown'}.herokuapp.com`
-    default:
-      return "http://localhost:3000"
+  if (process.env.NEXTAUTH_URL) {
+    return process.env.NEXTAUTH_URL
   }
-})()
-
-const API_TOKEN = clientEnv.NEXT_PUBLIC_API_SECRET_TOKEN || process.env.API_SECRET_TOKEN || "your-api-token"
+  // Fallback for local development
+  return "https://flexile.dev"
+}
 
 // Schema for OTP login
 const otpLoginSchema = z.object({
@@ -54,16 +45,16 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
 
           const { email, otp_code } = validatedFields.data
 
-          // Call the backend login API
-          const response = await fetch(`${API_BASE_URL}/api/v1/login`, {
+          // Call the Next.js login API
+          const nextJsUrl = getNextJsUrl()
+          const response = await fetch(`${nextJsUrl}/api/auth/login`, {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
             },
             body: JSON.stringify({
               email,
               otp_code,
-              token: API_TOKEN,
             }),
           })
 
@@ -118,14 +109,14 @@ export async function sendOTP(email: string) {
       throw new Error("Invalid email")
     }
 
-    const response = await fetch(`${API_BASE_URL}/api/v1/email_otp`, {
+    const nextJsUrl = getNextJsUrl()
+    const response = await fetch(`${nextJsUrl}/api/auth/send-otp`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         email,
-        token: API_TOKEN,
       }),
     })
 

frontend/utils/routes.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file Generated by js-routes 2.3.5. Based on Rails 8.0.2 routes of Flexile::Application.
- * @version cdd6cd9b0cf9e8a6d8a1288759313facca4b367a53d6c658c9f66222b02b3768
+ * @version 972cb976202f3a460677e00ec956ca226c20502dbe03363c9d03f98551a22389
  * @see https://github.com/railsware/js-routes
  */
 declare type Optional<T> = {

frontend/utils/routes.js

@@ -1,6 +1,6 @@
 /**
  * @file Generated by js-routes 2.3.5. Based on Rails 8.0.2 routes of Flexile::Application.
- * @version cdd6cd9b0cf9e8a6d8a1288759313facca4b367a53d6c658c9f66222b02b3768
+ * @version 972cb976202f3a460677e00ec956ca226c20502dbe03363c9d03f98551a22389
  * @see https://github.com/railsware/js-routes
  */
 // eslint-disable-next-line