Email OTP Authentication

1
import React from "react";
2
import { useAuthModal } from "@account-kit/react";
3
4
export default function MyPage() {
5
  const { openAuthModal } = useAuthModal();
6
7
  return <button onClick={openAuthModal}>Sign in</button>;
8
}

1
import React from "react";
2
import { AuthCard } from "@account-kit/react";
3
4
export default function MyLoginPage() {
5
  return (
6
    <div className="flex flex-row p-4 bg-white border border-gray-200 rounded-lg">
7
      <AuthCard />
8
    </div>
9
  );
10
}

1
import { AlchemyAccountsUIConfig, createConfig } from "@account-kit/react";
2
import { sepolia, alchemy } from "@account-kit/infra";
3
4
const uiConfig: AlchemyAccountsUIConfig = {
5
  auth: {
6
    sections: [
7
      [
8
        {
9
          type: "email",
10
          emailMode: "otp",
11
12
          // Optional customizations:
13
          buttonLabel: "Continue with Email",
14
          placeholder: "Enter your email address",
15
        },
16
      ],
17
    ],
18
  },
19
};
20
21
export const config = createConfig(
22
  {
23
    transport: alchemy({ apiKey: "your-api-key" }),
24
    chain: sepolia,
25
  },
26
  uiConfig,
27
);

1
import { useAuthenticate } from "@account-kit/react";
2
3
// Inside your component
4
const { authenticate } = useAuthenticate();
5
6
// When the user submits their email
7
const handleSendCode = (email: string) => {
8
  authenticate(
9
    {
10
      type: "email",
11
      emailMode: "otp",
12
      email,
13
    },
14
    {
15
      onSuccess: () => {
16
        // onSuccess only fires once the entire flow is done (email OTP + optional MFA).
17
        // It still runs even if the final step completes in another tab/window.
18
      },
19
      onError: (error) => {
20
        // Handle error
21
      },
22
    },
23
  );
24
};

1
import React from "react";
2
import { useSignerStatus } from "@account-kit/react";
3
import { AlchemySignerStatus } from "@account-kit/signer";
4
5
const TrackStatus = () => {
6
  const { status } = useSignerStatus();
7
8
  return (
9
    <>
10
      {status === AlchemySignerStatus.AWAITING_EMAIL_AUTH && (
11
        <div>Prompt the user to enter the OTP code</div>
12
      )}
13
    </>
14
  );
15
};

1
import { useAuthenticate } from "@account-kit/react";
2
3
// Inside your component
4
const { authenticate } = useAuthenticate();
5
6
// When the user submits the OTP code
7
const handleVerifyCode = (otpCode: string) => {
8
  authenticate(
9
    {
10
      type: "otp",
11
      otpCode,
12
    },
13
    {
14
      onSuccess: () => {
15
        // onSuccess only fires once the entire flow is done (email OTP + optional MFA).
16
        // It still runs even if the final step completes in another tab/window.
17
      },
18
      onError: (error) => {
19
        // Handle invalid code error
20
      },
21
    },
22
  );
23
};

1
import { useSignerStatus } from "@account-kit/react";
2
3
// Inside your component
4
const { isConnected } = useSignerStatus();
5
6
// You can use isConnected to conditionally render UI