would the `sendVerificationRequest`

[robust willow]

thanks for the hint. I ended up creating a EmailProvider instance in my API route and used the function you suggested.

I had to create a theme manually like this:

theme: {
                colorScheme: "auto", // "auto" | "dark" | "light"
                brandColor: "", // Hex color code
                logo: "", // Absolute URL to image
                buttonText: "" // Hex color code
            }

otherwise it complained that it could not get the brandColors

[robust willow]

@vagrant pagoda this didn't really work. it does send the email, but it doesn't create any session as it turns out

i thought it worked earlier as i had tried signing in using the default UI page. it must have created a session then

[vagrant pagoda]

hmm I'll have to look at the docs

never used the email provider before in an app

but I do use magic link auth, so maybe I can offer an alternative

This is the email service I use https://magic.link/

This is the custom provider

Credentials({
            async authorize({ didToken }: any) {
              magic.token.validate(didToken);

              const metadata = await magic.users.getMetadataByToken(didToken);

              return { ...metadata };
            },
            credentials: {
              didToken: { label: `DID Token`, type: `text` },
            },
            name: `Magic Link`,
          })

And here is my sign in dialog form, the relevant code is in the handleSubmitEmail function

import { Magic } from 'magic-sdk';
// there are more imports...
const magic = isBrowser()
  ? new Magic(process.env.NEXT_PUBLIC_MAGIC_PK as string)
  : null;
const SignInDialog = (props: NextAuthDialogProps) => {
  const { t } = useTranslation();

  const url = getAppUrl(``, true, true);

  const replaced = isDev()
    ? url
    : isPreview()
    ? url.replace(PREVIEW_DOMAIN, ``)
    : url.replace(PRODUCTION_DOMAIN, ``);

  const hasSlug = replaced.split(`.`).length > 1;

  const [slug, setSlug] = React.useState(
    hasSlug ? replaced.split(`.`)?.[0] : ``,
  );
  const [canSignInMutation] = useCanSignInMutation();

  const handleSubmitEmail = async (email: string) => {
    const res = await canSignInMutation({
      variables: {
        email,
        slug,
      },
    });

    if (res.data?.canSignIn) {
      if (process.env.NEXT_PUBLIC_ENABLE_TEST_MODE === `true`) {
        await signIn(`credentials`, {
          email,
        });
      } else {
        const didToken = await magic.auth.loginWithMagicLink({ email });
        await signIn(`credentials`, {
          didToken,
        });
      }
    }
  };

  return (
    <AuthDialog
      open={props.open}
      onClose={props.onClose}
      alwaysShowEmailField
      disableEmailAutoFocus
      onSubmitEmail={handleSubmitEmail}
      isValidEmail={(email) => isValidEmail(email) && slug.length > 0}
      EmailFieldProps={{
        autoFocus: hasSlug,
        inputProps: {
          tabIndex: 2,
        },
      }}
    >
      <TextField
        disabled={hasSlug}
        autoFocus={!hasSlug}
        value={slug}
        onChange={(e) => setSlug(e.target.value)}
        placeholder={t(`Util.organizationId`)}
        inputProps={{
          tabIndex: 1,
        }}
        InputProps={{
          startAdornment: (
            <AppIconButton noHover noCursor>
              <DomainOutlined />
            </AppIconButton>
          ),
        }}
      />
    </AuthDialog>
  );
};
export default SignInDialog;

before sending the magic link I first check if the email address is valid by sending a request to my backend (making sure it's a customer)

[robust willow]

i'll see if i can do something similar and check on the client if it is a customer. thanks for the idea 👍

[vagrant pagoda]

No problem. Good luck.

[robust willow]

brilliant. that worked

thanks a bunch mate 💯