fix: signout and dev email skip

apps/web/.env.development.example

@@ -24,6 +24,7 @@ RESEND_API_KEY=
 
 # Formbase
 ALLOW_SIGNIN_SIGNUP=true
+SKIP_EMAIL_VERIFICATION=true
 
 # Analytics (optional)
 UMAMI_TRACKING_ID=

apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/src/app/(auth)/signup/signup.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { type FormEvent, useState } from 'react';
+import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+import type { FormEvent } from 'react';
+
 import { IconBrandGithub, IconBrandGoogleFilled } from '@tabler/icons-react';
 
 import { signUp } from '@formbase/auth/client';
-
-import { Logo } from '../_components/logo';
 import { Button } from '@formbase/ui/primitives/button';
 import { Input } from '@formbase/ui/primitives/input';
 import { Label } from '@formbase/ui/primitives/label';
@@ -18,6 +18,8 @@ import { LoadingButton } from '~/components/loading-button';
 import { PasswordInput } from '~/components/password-input';
 import { useSocialAuth } from '~/lib/hooks/use-social-auth';
 
+import { Logo } from '../_components/logo';
+
 export function Signup() {
   const router = useRouter();
   const [formError, setFormError] = useState<string | null>(null);
@@ -50,7 +52,7 @@ export function Signup() {
       });
 
       if (error) {
-        setFormError(error.message);
+        setFormError(error.message ?? 'An error occurred');
         return;
       }
 
@@ -180,6 +182,7 @@ export function Signup() {
           ) : null}
 
           <LoadingButton
+            type="submit"
             className="mt-4 w-full py-2 font-medium"
             loading={isSubmitting}
           >

apps/web/src/app/(auth)/verify-email/page.tsx

@@ -1,9 +1,9 @@
 import { redirect } from 'next/navigation';
 
 import { getSession } from '@formbase/auth/server';
+import { env } from '@formbase/env';
 
 import { Logo } from '../_components/logo';
-
 import { VerifyEmail } from './verify-code';
 
 export const metadata = {
@@ -25,7 +25,7 @@ export default async function VerifyEmailPage({
     redirect('/login');
   }
 
-  if (session?.user.emailVerified) {
+  if (session?.user.emailVerified || env.SKIP_EMAIL_VERIFICATION) {
     redirect('/dashboard');
   }
 
@@ -50,7 +50,7 @@ export default async function VerifyEmailPage({
             <>Use the verification link from your email to continue.</>
           )}
         </p>
-        <VerifyEmail email={session?.user.email} />
+        <VerifyEmail email={session?.user.email ?? null} />
       </div>
     </div>
   );

apps/web/src/app/(landing)/_components/header.tsx

@@ -1,10 +1,9 @@
 import Link from 'next/link';
 
-import { FunctionSquare } from 'lucide-react';
-
 import { type User } from '@formbase/auth';
 import { env } from '@formbase/env';
 
+import { Logo } from '../../(auth)/_components/logo';
 import { MobileNavigation } from './mobile-navigation';
 
 const routes = [{ name: 'Docs', href: 'https://docs.formbase.dev' }] as const;
@@ -18,19 +17,19 @@ export const Header = ({ user }: LandingHeaderProps) => {
 
   return (
     <header>
-      <nav className="z-20 w-full overflow-hidden border-b border-(--ui-light-border-color) bg-white/80 backdrop-blur-sm dark:border-(--ui-dark-border-color) dark:bg-gray-950/75 dark:shadow-md dark:shadow-gray-950/10">
+      <nav className="z-20 w-full border-b border-(--ui-light-border-color) bg-white/80 backdrop-blur-sm dark:border-(--ui-dark-border-color) dark:bg-gray-950/75 dark:shadow-md dark:shadow-gray-950/10">
         <div className="m-auto max-w-5xl px-6 2xl:px-0">
           <div className="flex justify-between py-2 sm:py-4">
             <div className="flex w-full items-center justify-between lg:w-auto">
               <Link
-                className="text flex items-center justify-center gap-2 font-medium"
+                className="text flex items-center justify-center gap-2 font-semibold"
                 href={isLoggedIn ? '/dashboard' : '/'}
               >
-                <FunctionSquare className="mr-2 h-5 w-5" /> Formbase
+                <Logo className="h-6 w-6" /> Formbase
               </Link>
             </div>
             <div className="flex">
-              <div className="mdw-fit hidden h-0 w-full flex-wrap items-center justify-end space-y-8 md:flex md:h-fit md:flex-nowrap md:space-y-0">
+              <div className="hidden w-full flex-wrap items-center justify-end space-y-8 md:flex md:w-fit md:h-fit md:flex-nowrap md:space-y-0">
                 <div className="mt-6 text-gray-600 dark:text-gray-300 md:-ml-4 md:mt-0 lg:pr-4">
                   <ul className="space-y-6 text-base tracking-wide md:flex md:space-y-0 md:text-sm">
                     {routes.map(({ name, href }) => (

apps/web/src/app/(landing)/_components/mobile-navigation.tsx

@@ -3,10 +3,9 @@
 import { useState } from 'react';
 import Link from 'next/link';
 
-import { FunctionSquare } from 'lucide-react';
-
 import { Sheet, SheetContent } from '@formbase/ui/primitives/sheet';
 
+import { Logo } from '../../(auth)/_components/logo';
 import { HamburgerMenu } from './mobile-hamburger';
 import { ThemeToggle } from './theme-toggle';
 
@@ -36,9 +35,9 @@ const MobileNavigationSheet = ({
         <Link
           href="/"
           onClick={handleMenuItemClick}
-          className="flex items-center font-medium"
+          className="flex items-center font-semibold"
         >
-          <FunctionSquare className="mr-2 h-5 w-5" /> Formbase
+          <Logo className="h-6 w-6" /> Formbase
         </Link>
 
         <div className="mt-8 flex w-full flex-col items-start gap-y-4">

apps/web/src/app/(main)/_components/header.tsx

@@ -1,9 +1,8 @@
 import Link from 'next/link';
 
-import { FunctionSquare } from 'lucide-react';
-
 import { type User } from '@formbase/auth';
 
+import { Logo } from '../../(auth)/_components/logo';
 import { UserDropdown } from './user-dropdown';
 
 const routes = [{ name: 'Dashboard', href: '/dashboard' }] as const;
@@ -13,10 +12,10 @@ export const Header = ({ user }: { user: User }) => {
     <header className="top-0 border-b py-2">
       <div className="container flex items-center gap-2 px-2 py-2 lg:px-4">
         <Link
-          className="text flex items-center justify-center font-medium"
+          className="text flex items-center justify-center font-semibold"
           href={user.id ? '/dashboard' : '/'}
         >
-          <FunctionSquare className="mr-2 h-5 w-5" /> Formbase
+          <Logo className="h-6 w-6" /> Formbase
         </Link>
 
         <nav className="ml-8 hidden gap-4 sm:gap-6 md:flex">