diff --git a/.eslintrc.js b/.eslintrc.js
index ca4281cd..0f2c600d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,9 @@
 module.exports = {
-    extends: ["@calblueprint/eslint-config-react"],
-    rules: {
-      // Add any custom rules here
-      // Disable the rule that requires React to be in scope -- we don't need this with React 18
-      'react/react-in-jsx-scope': 'off',
-      'react/jsx-uses-react': 'off',
-    },
-  };
\ No newline at end of file
+  extends: ["@calblueprint/eslint-config-react"],
+  rules: {
+    // Add any custom rules here
+    // Disable the rule that requires React to be in scope -- we don't need this with React 18
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-uses-react': 'off',
+  },
+};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 80b6bf43..54b0cc3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "dotenv": "^16.3.1",
         "eslint-config-next": "13.5.2",
         "next": "13.5.2",
-        "react": "18.2.0",
+        "react": "^18.2.0",
         "react-dom": "18.2.0",
         "styled-components": "^6.0.8"
       },
diff --git a/package.json b/package.json
index 8116a82f..81c69524 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "dotenv": "^16.3.1",
     "eslint-config-next": "13.5.2",
     "next": "13.5.2",
-    "react": "18.2.0",
+    "react": "^18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "^6.0.8"
   },
diff --git a/src/api/supabase/auth/auth.tsx b/src/api/supabase/auth/auth.tsx
new file mode 100644
index 00000000..700dc309
--- /dev/null
+++ b/src/api/supabase/auth/auth.tsx
@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+import supabase from '../createClient';
+
+export const handleSignUp = async (email: string, password: string) => {
+  const { data, error } = await supabase.auth.signUp({
+    email,
+    password,
+  });
+  console.log(error);
+};
+
+export const signInWithEmail = async (email: string, password: string) => {
+  const { data, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+  console.log(data);
+};
+
+export const signOut = async () => {
+  const { error } = await supabase.auth.signOut();
+};
diff --git a/src/api/supabase/queries /createClient.ts b/src/api/supabase/createClient.tsx
similarity index 100%
rename from src/api/supabase/queries /createClient.ts
rename to src/api/supabase/createClient.tsx
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index a42e544a..40e4ec69 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
 import LoginForm from '../../components/LoginForm';
 
@@ -13,6 +14,12 @@ import {
   Button,
 } from './styles';
 
+import {
+  handleSignUp,
+  signInWithEmail,
+  signOut,
+} from '../../api/supabase/auth/auth';
+
 export default function App() {
   return (
     <main>
@@ -32,3 +39,33 @@ export default function App() {
     </main>
   );
 }
+
+export function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <>
+      <input
+        name="email"
+        onChange={e => setEmail(e.target.value)}
+        value={email}
+      />
+      <input
+        type="password"
+        name="password"
+        onChange={e => setPassword(e.target.value)}
+        value={password}
+      />
+      <button type="button" onClick={() => handleSignUp(email, password)}>
+        Sign up
+      </button>
+      <button type="button" onClick={() => signInWithEmail(email, password)}>
+        Sign in
+      </button>
+      <button type="button" onClick={signOut}>
+        Sign out
+      </button>
+    </>
+  );
+}
diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts
index 4f923e9a..34672d47 100644
--- a/src/app/login/styles.ts
+++ b/src/app/login/styles.ts
@@ -1,4 +1,4 @@
-import styled, {createGlobalStyle} from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyle = createGlobalStyle`
   body {