OTP Auth Problem

[lucasjohnson]

Good morning all,

I'm using Next to build an app. And I'm using a form to submit a supabase.auth.signInWithOtp request to invite new users. The email is sent fine to the new user.

The problem I'm having is that sometimes when a new user goes to confirm their invite page, the OTP request returns this error:

0:{"a":"$@1","f":"","b":"UQ2JnMHnyB0EumFgvd3F3"}
1:{"data":{"user":null,"session":null},"error":"$Z"}

Here is the documentation I'm using: https://supabase.com/docs/guides/auth/auth-email-passwordless#enabling-email-otp

And a link to the page that accepts the OTP code: https://wattenergy.io/invite-user

Here is the page used to submit the OTP request:

'use client';

import { Control, FieldValues, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState } from 'react';
import { SubscriptionTypeName } from '@prisma/client';
import { TextInputField } from '@/app/ui/Form/TextInputField/TextInputField';
import form from '@/app/ui/Form/Form.module.scss';
import { SubmitButton } from '@/app/ui/Form/SubmitButton/SubmitButton';
import { Snackbar } from '@/app/ui/Snackbar/Snackbar';
import { SubHeading } from '@/app/ui/Typography/SubHeading/SubHeading';
import { CheckboxField } from '@/app/ui/Form/CheckboxField/CheckboxField';
import { Paragraph } from '@/app/ui/Typography/Paragraph/Paragraph';
import { InviteFormSchema, InviteFormSchemaType } from './schema';
import { handleCreate } from './actions';
import css from './AdminInviteForm.module.scss';

export const AdminInviteForm = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const [snackbar, setSnackbar] = useState<{
    isOpen: boolean;
    message: string;
    severity: 'success' | 'error' | undefined;
  }>({
    isOpen: false,
    message: '',
    severity: undefined,
  });

  const { control, handleSubmit, reset } = useForm<InviteFormSchemaType>({
    resolver: zodResolver(InviteFormSchema),
    mode: 'onBlur',
    defaultValues: {
      companyName: '',
      email: '',
      firstName: '',
      lastName: '',
      mobile: '',
      landline: '',
      subscriptions: [
        {
          name: 'Markets',
          isActive: false,
          price: 0,
          type: SubscriptionTypeName.MARKET,
        },
        {
          name: 'Budget',
          isActive: false,
          price: 0,
          type: SubscriptionTypeName.BUDGET,
        },
      ],
    },
  });

  const onSubmit = async (formData: InviteFormSchemaType) => {
    setIsSubmitting(true);

    const data = await handleCreate(formData);

    if (data) {
      reset();
      setIsSubmitting(false);

      setSnackbar({
        isOpen: true,
        message: 'User invited successfully.',
        severity: 'success',
      });
    }

    if (data?.error) {
      setIsSubmitting(false);

      setSnackbar({
        isOpen: true,
        message: `Error: ${data?.error}`,
        severity: 'error',
      });
    }
  };

  const handleCloseSnackbar = () => {
    setSnackbar({
      isOpen: false,
      message: '',
      severity: undefined,
    });
  };

  const isDisabled = isSubmitting;

  return (
    <div className={css.adminInviteForm}>
      <form className={form.form} onSubmit={handleSubmit(onSubmit)}>
        <SubHeading>Invite user</SubHeading>
        <div className={form.fieldWrapper}>
          <TextInputField
            name="email"
            control={control as unknown as Control<FieldValues>}
            label="Email"
            disabled={isDisabled}
            autoFocus
          />
          <TextInputField
            name="companyName"
            control={control as unknown as Control<FieldValues>}
            label="Company Name"
            disabled={isDisabled}
          />
          <div className={form.fieldDivider}>
            <TextInputField
              name="firstName"
              control={control as unknown as Control<FieldValues>}
              label="First name"
              disabled={isDisabled}
            />
            <TextInputField
              name="lastName"
              control={control as unknown as Control<FieldValues>}
              label="Last name"
              disabled={isDisabled}
            />
          </div>
          <div className={form.fieldDivider}>
            <TextInputField
              name="mobile"
              control={control as unknown as Control<FieldValues>}
              label="Mobile"
              disabled={isDisabled}
            />
            <TextInputField
              name="landline"
              control={control as unknown as Control<FieldValues>}
              label="Landline"
              disabled={isDisabled}
            />
          </div>
        </div>
        <Paragraph>Organisation is subscribed to:</Paragraph>
        <div className={form.checkboxDivider}>
          <CheckboxField
            label="Markets"
            name="subscriptions[0].isActive"
            control={control as unknown as Control<FieldValues>}
          />
          <CheckboxField
            label="Budget"
            name="subscriptions[1].isActive"
            control={control as unknown as Control<FieldValues>}
          />
        </div>
        <div className={form.endButtonWrapper}>
          <SubmitButton isSubmitting={isSubmitting} label="Create" />
        </div>
      </form>
      <Snackbar
        data={{
          isOpen: snackbar.isOpen,
          message: snackbar.message,
          severity: snackbar.severity,
        }}
        handleClose={handleCloseSnackbar}
      />
    </div>
  );
};

And the action:

'use server';

import { Role, SubscriptionTypeName } from '@prisma/client';
import { UTCDate } from '@date-fns/utc';
import prisma from '@/app/lib/prisma';
import { adminClient } from '@/app/lib/supabase/admin';
import { InviteFormSchemaType } from './schema';

export const handleCreate = async (formData: InviteFormSchemaType) => {
  try {
    const supabase = adminClient();

    const { data: supabaseUser, error } = await supabase.auth.signInWithOtp({
      email: formData.email,
      options: {
        data: {
          firstName: formData.firstName,
          lastName: formData.lastName,
          email: formData.email,
          landline:
            formData.landline && formData.landline.length > 0
              ? formData.landline
              : null,
          mobile:
            formData.mobile && formData.mobile.length > 0
              ? formData.mobile
              : null,
          name: formData.companyName,
        },
      },
    });

    if (error) {
      return {
        data: supabaseUser,
        error: `Error inviting supabase user: ${error}`,
      };
    }

    if (!error) {
      try {
        const data = await prisma.organization.create({
          data: {
            name: formData.companyName,
            subscriptions: {
              create: formData.subscriptions
                .filter(subscription => subscription?.name !== undefined)
                .map(subscription => ({
                  name: subscription.name!,
                  isActive: subscription?.isActive,
                  price: subscription?.price,
                  type: subscription?.type as SubscriptionTypeName,
                })),
            },
          },
        });

        if (!error) {
          const formattedFormData = {
            firstName: formData.firstName,
            lastName: formData.lastName,
            email: formData.email,
            role: Role.ADMIN,
            landline:
              formData.landline && formData.landline.length > 0
                ? formData.landline
                : null,
            mobile:
              formData.mobile && formData.mobile.length > 0
                ? formData.mobile
                : null,
            // supabaseId: user?.id,
            lastLogin: new UTCDate(),
            organizations: {
              connect: {
                id: data.id,
              },
            },
          };

          try {
            const userData = await prisma.user.create({
              data: formattedFormData,
            });

            return { data: userData, error: null };
          } catch (error) {
            console.error('Error creating user:', error);
          } finally {
            prisma.$disconnect();
          }
        }
      } catch (error) {
        console.error('Error creating user organization:', error);
      } finally {
        prisma.$disconnect();
      }
    }
  } catch (error) {
    console.error('Error inviting supabase user:', error);
  }
};

Here is the page that submits the OTP code:

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { Alert, Paper } from '@mui/material';
import { useState } from 'react';
import { Control, FieldValues, useForm } from 'react-hook-form';
import { isNull } from 'lodash';
import { useRouter } from 'next/navigation';
import { TextInputField } from '@/app/ui/Form/TextInputField/TextInputField';
import { SubmitButton } from '@/app/ui/Form/SubmitButton/SubmitButton';
import form from '@/app/ui/Form/Form.module.scss';
import { Paragraph } from '@/app/ui/Typography/Paragraph/Paragraph';
import css from '../Auth.module.scss';
import { InviteUserSchema, InviteUserSchemaType } from './schema';
import { handleInviteUserRequest } from './action';

export default function InviteUserPage() {
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [isSuccessful, setIsSuccessful] = useState<boolean>(false);
  const router = useRouter();

  const { handleSubmit, control } = useForm<InviteUserSchemaType>({
    resolver: zodResolver(InviteUserSchema),
    mode: 'onBlur',
    defaultValues: {
      email: '',
      otp: '',
    },
  });

  const onSubmit = async (data: InviteUserSchemaType) => {
    setIsSubmitting(true);

    const response = await handleInviteUserRequest(data);

    if (isNull(response?.error)) {
      setIsSuccessful(true);

      setTimeout(() => {
        router.push('/');
      }, 5000);
    }
  };

  const isDisabled = isSubmitting || isSuccessful;

  return (
    <div className={css.pageWrapper}>
      <Paper>
        <div className={form.formContainer}>
          <form className={form.form} onSubmit={handleSubmit(onSubmit)}>
            <h2 className={form.formTitle}>New User Invite</h2>
            <Paragraph>
              Please enter the email address you received the invite for, and
              the sign up code you received by email.
            </Paragraph>
            <div className={form.fieldWrapper}>
              <TextInputField
                name="email"
                control={control as unknown as Control<FieldValues>}
                label="Email"
                disabled={isDisabled}
                required
              />
              <TextInputField
                name="otp"
                control={control as unknown as Control<FieldValues>}
                label="OTP Code"
                disabled={isDisabled}
                required
              />
            </div>
            {isSuccessful && (
              <Alert severity="success">Welcome to Watt Energy.</Alert>
            )}
            <div className={form.ctaWrapper}>
              <SubmitButton isSubmitting={isDisabled} label="Submit" />
            </div>
          </form>
        </div>
      </Paper>
    </div>
  );
}

And the action:

'use server';

import { createClient } from '@/app/lib/supabase/server';
import { InviteUserSchemaType } from './schema';

export async function handleInviteUserRequest(formData: InviteUserSchemaType) {
  try {
    const supabase = await createClient();

    const { data, error } = await supabase.auth.verifyOtp({
      type: 'email',
      email: formData.email,
      token: formData.otp,
    });

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

Any help would be greatly appreciated.

[Hallidayo]

Hi @lucasjohnson - I'll close this one as it looks like a duplicate.