KolbySisk

{
  "colors": {
    "background": "#FBFBFB",
    "border": "#F4F4F4",
    "active": "#F8C924",
    "inactive": "#C0C0C0"
  },
  "constants": {
    "borderRadius": 6
  },

KolbySisk

export default function SimpleForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    // Use FormData to get the input values
    const formData = new FormData(event.target);
    // Optionally, convert FormData into an object
    const dataObject = Object.fromEntries(formData);
    // Process the data
    await fetch("/api/form", {
      method: "POST",

KolbySisk

import { useState } from "react";

export default function SlightlyComplexForm() {
  const [urlVisible, setUrlVisible] = useState(false);

  const handleSubmit = async (event) => {
    // Same as before
  };

  const handleEmailChange = (event) => {

KolbySisk

import { useForm } from "react-hook-form";

export default function RhfForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm();

KolbySisk

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const schema = z.object({
  email: z.string().email().min(2),
  password: z.string().min(6)
});

export default function RhfFormWithZod() {

KolbySisk

useEffect(() => {
  const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
    await fetch('/api/set-auth-cookie', {
      method: 'POST',
      headers: new Headers({ 'content-Type': 'application/json' }),
      body: JSON.stringify({ session, event }),
    });
  });

  return () => {

KolbySisk

// /pages/api/set-auth-cookie.ts

import { NextApiRequest, NextApiResponse } from 'next';

import { supabase } from '~/libs/supabase';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  supabase.auth.api.setAuthCookie(req, res);
};

KolbySisk

import { NextRequest, NextResponse } from 'next/server';

export const middleware = async (request: NextRequest) => {
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    const authCookie = request.cookies.get('sb-access-token');
    if (!authCookie) return NextResponse.redirect(new URL('/', request.url));
  }
};

KolbySisk

import type { NextApiRequest, NextApiResponse } from 'next';

type User = { userId: string };

const handler = (req: NextApiRequest, res: NextApiResponse<User>) => {
  return res.status(200).json({ userId: 'abc123' });
};
  
export default handler;

KolbySisk

import { Middleware } from 'next-api-route-middleware';
import { getUserByCookie } from '../utils';

export type User = { userId: string };
export type NextApiRequestWithUser = NextApiRequest & User;

export const addUser: Middleware<NextApiRequestWithUser> = async (req, res, next) => {
  const authCookie = await getUserByCookie();

  if (authCookie) {