I'm currently in the process of setting up authentication in Next.js with supabase, but encountering an issue when attempting to execute the signUp function. The error message I'm seeing is:
Anonymous sign-ins are disabled
Below is the snippet of 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791c14181015391c01181409151c571a1614">[email protected]</a>"
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>
);
}
In addition to this, I am consulting these docs for guidance: