I have a sign in with google. I want to implement facebook and apple too. After they sign in, thre is a form where users can choose between a student or parent.

I want the teachers or admins to be able to sign up with socials, but with an invitation. So that I don’t give these 2 options to stundets or parents or trolls.

So after someone logs in , if they are a new user, their info will go to a public users table using a trigger function and upon completing that form, in that public users table is have 2 columns. One is “role” and one is “completed_registration” (a boolean).

By using the form below available only for someone that has in the public users table the role “admin”, the admin can invite teachers or other admins. I don’t know how to do this while I am only using social sign ins.

Is this possible? How would I go about implementing this feature? Or do you have any other suggestions for users like admin or teacher? Pls help ^^

The form I am using:

"use client"

const RegistrationSchema = z.object({
  email: z.string().email(),
  role: z.string(),

const InviteTeacherForm = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();
  const pathname = usePathname();

  // 1. Define your form.
  const form = useForm<z.infer<typeof RegistrationSchema>>({
    resolver: zodResolver(RegistrationSchema),
    defaultValues: {
      email: '',
      role: '',

  // 2. Define a submit handler.
  async function onSubmit(values: z.infer<typeof RegistrationSchema>) {
    const { email, role } = values;

    try {
      await inviteTeacherOrAdmin({ email, role });
    } catch (error) {
    } finally {
      toast.success('Event has been created');

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className=" grid space-y-8">
        <div className="flex items-center justify-between gap-2">
            render={({ field }) => (
              <FormItem className="w-full">
                  <Input placeholder="adresa email" {...field} />

                <FormMessage />

            render={({ field }) => (
                      <SelectValue placeholder="User role" />
                    <SelectItem value="admin">Admin</SelectItem>
                    <SelectItem value="teacher">Teacher</SelectItem>
                <FormMessage />
          <Button type="submit" disabled={isSubmitting}>
            {isSubmitting && (
              <Icons.Spinner className="mr-2 h-4 w-4 animate-spin" />

export default InviteTeacherForm;

That form has a server action:

export async function inviteTeacherOrAdmin(params: InvitationParams) {
  try {
    const supabase = createClient();

    const { email, role } = params;

    const whatToDoWithThis = role;

    const { data, error } = await supabase.auth.admin.inviteUserByEmail(email);

    if (error) console.log('Error:', error);

    return data;
  } catch (error) {
    throw error;

But trying this way gives me an error:

Error: AuthApiError: User not allowed
__isAuthError: true,
status: 403,
code: ‘not_admin’

If you need other info, please let me know and I will post a comment.

P.S: I don’t understand is how to send the email (should I use smth like resend and not supabase built in function for sending emails?) and how could I send something like “role=” in the URL that is preserved after a sign in with google/facebook/apple.

I don’t know the steps I should take for this.
(using next.js 14.1)

New contributor

Andreul- is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.