Why am I getting "Anonymous sign-ins are disabled" when running the supabase signup function?

Question

I am implementing authentication in Next.js with supabase, and I'm receiving this error when I'm trying to run the signUp function. Here's what I get:

Anonymous sign-ins are disabled

Here's my code:

actions.ts

'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

import { createClient } from '@/app/supabase/server';

export async function signup(formData: FormData) {
  const supabase = createClient();

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get('email') as string,
    password: formData.get('password') as string,
  };

  const { error } = await supabase.auth.signUp(data);

  if (error) {
    console.log(error.message);
    redirect('/error');
  }

  revalidatePath('/', 'layout')
  redirect('/home');
}

page.tsx

import Link from 'next/link';

import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { signup } from './actions';

export default async function Register() {
  return (
    <div className="flex flex-1 items-center justify-center min-h-screen">
      <Card className="mx-auto max-w-sm">
        <CardHeader>
          <CardTitle className="text-xl">Sign Up</CardTitle>
          <CardDescription>
            Enter your information to create an account
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form>
            <div className="grid gap-4">
              <div className="grid gap-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="email@example.com"
                  required
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  placeholder="Must be at least 6 characters"
                  type="password"
                  required
                />
              </div>
              <Button formAction={signup} type="submit" className="w-full">
                Create an account
              </Button>
              <Button variant="outline">
                <span>Sign Up with GitHub</span>
              </Button>
              <Button variant="outline">
                <span>Sign Up with Google</span>
              </Button>
            </div>
          </form>
          <div className="mt-4 text-center text-sm">
            Already have an account?{' '}
            <Link href="/login" className="underline">
              Sign in
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

I am also following these docs here:

https://supabase.com/docs/guides/auth/server-side/nextjs

Answer 1

Check the value of data before you pass it into:

await supabase.auth.signUp(data);

I'm guessing email and password are both undefined?