Supabase User Auth (new branch)

.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',
-    },
-  };
+  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',
+  },
+};

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"
   },

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();
+};

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>
+    </>
+  );
+}

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 {