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>) {
    setIsSubmitting(true);
    const { email, role } = values;

    try {
      await inviteTeacherOrAdmin({ email, role });
    } catch (error) {
      console.log(error);
    } finally {
      setIsSubmitting(false);
      setIsOpen(false);
      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">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem className="w-full">
                <FormControl>
                  <Input placeholder="adresa email" {...field} />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="role"
            render={({ field }) => (
              <FormItem>
                <Select
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                >
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="User role" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="admin">Admin</SelectItem>
                    <SelectItem value="teacher">Teacher</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit" disabled={isSubmitting}>
            {isSubmitting && (
              <Icons.Spinner className="mr-2 h-4 w-4 animate-spin" />
            )}
            Register
          </Button>
        </div>
      </form>
    </Form>
  );
};

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) {
    console.log(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.