woops

.prettierignore

@@ -0,0 +1 @@
+/src/components/ui/**

cypress.config.ts

@@ -1,10 +1,11 @@
-import { defineConfig } from "cypress";
-import dotenv from "dotenv";
+import { defineConfig } from 'cypress';
+import dotenv from 'dotenv';
 
-dotenv.config({ path: ".env.test" });
+dotenv.config({ path: '.env.test' });
 dotenv.config();
 
 export default defineConfig({
+  chromeWebSecurity: false,
   e2e: {
     setupNodeEvents() {
       // implement node event listeners here

cypress.env.example.json

@@ -0,0 +1,5 @@
+{
+  "USER": "",
+  "PASS": "",
+  "APP_URL": ""
+}

cypress/e2e/auth/login.cy.ts

@@ -1,66 +1,24 @@
-describe("Login Page", () => {
-    const appUrl = Cypress.env("APP_URL") as string;
-
-    beforeEach(() => {
-        cy.visit(`${appUrl}/auth/login`);
-    });
-
-    it("should display login form", () => {
-        cy.get("form").should("exist");
-        cy.get('input[type="email"]').should("exist");
-        cy.get('input[type="password"]').should("exist");
-        cy.get('button[type="submit"]').should("contain.text", "Sign in");
-    });
-
-    it("should show validation errors for empty fields", () => {
-        cy.get('button[type="submit"]').click();
-        cy.get("p.text-destructive").should("have.length", 2);
-        cy.get("p.text-destructive").first().should(
-            "contain.text",
-            "Email is required",
-        );
-        cy.get("p.text-destructive").last().should(
-            "contain.text",
-            "Password is required",
-        );
-    });
-
-    it("should show validation error for short password", () => {
-        cy.get('input[type="email"]').type("[email protected]");
-        cy.get('input[type="password"]').type("12345");
-        cy.get('button[type="submit"]').click();
-        cy.get("p.text-destructive").should(
-            "contain.text",
-            "Password must be at least 6 characters",
-        );
+import { getIframeBody, login } from './utils.cy';
+import 'dotenv/config';
+describe('Login Page', () => {
+  //const appUrl = Cypress.env("APP_URL") as string;
+  const appUrl = 'http://localhost:3000';
+
+  // Helper function to get iframe body
+  beforeEach(() => {
+    cy.visit(`${appUrl}/auth/login`);
+    cy.get('iframe').should('be.visible');
+  });
+  it('should display login form', () => {
+    getIframeBody().within(() => {
+      cy.get('form').should('exist');
+      cy.get('input[type="email"]').should('exist');
+      cy.get('input[type="password"]').should('exist');
+      cy.get('button[type="submit"]').should('contain.text', 'Login');
     });
+  });
 
-    it("should show loading state while submitting", () => {
-        cy.get('input[type="email"]').type("[email protected]");
-        cy.get('input[type="password"]').type("password123");
-        cy.get('button[type="submit"]').click();
-        cy.get(".animate-spin").should("exist");
-        cy.get('button[type="submit"]').should("contain.text", "Signing in...");
-    });
-
-    it("should handle successful login", () => {
-        cy.url().should("include", "/auth/login");
-
-        cy.get('input[type="email"]').type("[email protected]");
-        cy.get('input[type="password"]').type("test123");
-        cy.get('button[type="submit"]').click();
-
-        cy.url().should("not.include", "/auth/login");
-    });
-
-    it("should handle failed login", () => {
-        cy.get('input[type="email"]').type("[email protected]");
-        cy.get('input[type="password"]').type("wrongpassword");
-        cy.get('button[type="submit"]').click();
-
-        cy.get('[role="alert"]').should(
-            "contain.text",
-            "Invalid login credentials",
-        );
-    });
+  it('should be able to login', () => {
+    login();
+  });
 });

cypress/e2e/auth/logout.cy.ts

@@ -1,31 +1,27 @@
-describe("Logout", () => {
-    const appUrl = Cypress.env("APP_URL") as string;
+import { login } from './utils.cy';
+describe('Logout', () => {
+  const appUrl = 'http://localhost:3000';
 
-    beforeEach(() => {
-        cy.visit(`${appUrl}/auth/login`);
-        cy.get('input[type="email"]').type(Cypress.env("SUPABASE_USER_EMAIL"));
-        cy.get('input[type="password"]').type(
-            Cypress.env("SUPABASE_USER_PASSWORD"),
-        );
-        cy.get('button[type="submit"]').click();
-    });
+  beforeEach(() => {
+    login();
+  });
 
-    it("should be able to logout", () => {
-        // Open sidebar if on mobile
-        // cy.get('[data-sidebar="trigger"]').click();
+  it('should be able to logout', () => {
+    // Open sidebar if on mobile
+    // cy.get('[data-sidebar="trigger"]').click();
 
-        cy.get('[data-testid="user-button"]').click();
+    cy.get('[data-testid="user-button"]').click();
 
-        // Find and click the logout button in the sidebar
-        // You'll need to add a data-testid or similar to your logout button
-        cy.get('[data-testid="logout-button"]').click();
+    // Find and click the logout button in the sidebar
+    // You'll need to add a data-testid or similar to your logout button
+    cy.get('[data-testid="logout-button"]').click();
 
-        // Verify we're redirected to login page
-        cy.url().should("include", "/auth/login");
+    // Verify we're redirected to login page
+    cy.url().should('include', '/auth/login');
 
-        // Verify we can't access protected routes anymore
-        cy.visit(`${appUrl}/`);
+    // Verify we can't access protected routes anymore
+    cy.visit(`${appUrl}/`);
 
-        cy.url().should("include", "/auth/login");
-    });
+    cy.url().should('include', '/auth/login');
+  });
 });

cypress/e2e/auth/utils.cy.ts

@@ -0,0 +1,15 @@
+export const getIframeBody = () => {
+  return cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap);
+};
+export const login = (params: { email?: string; password?: string; basUrl?: string } = {}) => {
+  const testEmail = Cypress.env('USER');
+  const testPassword = Cypress.env('PASS');
+  const appUrl = Cypress.env('APP_URL') ?? ('localhost:3000' as string);
+  cy.visit(`${appUrl}/auth/login`);
+  cy.get('iframe').should('be.visible');
+  getIframeBody().within(() => {
+    cy.get('input[type="email"]').type(params.email ?? testEmail);
+    cy.get('input[type="password"]').type(params.password ?? testPassword);
+    cy.get('button[type="submit"]').click();
+  });
+};

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "format": "prettier --write ./src ",
     "gen:types": "npx supabase gen types typescript --lang=typescript --local > src/types/database.ts",
     "test": "vitest",
     "cypress:open": "cypress open",
@@ -32,6 +33,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
+    "cookies-next": "^5.1.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.454.0",
     "next": "15.0.1",
@@ -42,7 +44,8 @@
     "react-hook-form": "^7.53.2",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",