😊

Magic linkでメールアドレスだけでウォレット作成(Next13)

2023/08/30に公開

Next.js

Web3

DApps

tech

Magicを使用して、メールアドレスだけでウォレットを作ってみました。

Web3Authも使ってみましたが、Magicの方がUXが良かったので、こちらを選択しました。
（Magicはセキュリティ面で色々言われていますが、どちらにも穴があると思っているので、今回はUXを重視してMagicを選択しました）

デモ

今回はメールにリダイレクトURLを送信するものではなく、セキュリティコードをメールに送信して、そのコードでログインをする方法で実装しました。
こちらの方がユーザーが画面遷移する手順が少なく、実装も簡単なため選択しています。

参考にした記事

神記事でした！ありがとうございます！！

実装

詳しくは↑の参考記事のリポジトリを確認してください。
ここでは、メールアドレスの入力フォームをMagicのSDKを使って実装する方法を記載します。

lib/magic.ts

import {Magic} from "magic-sdk";
import {OAuthExtension} from "@magic-ext/oauth";

const createMagic = (key: any) => {
  return (
    typeof window !== "undefined" &&
    new Magic(key, {
      extensions: [new OAuthExtension()],
      locale: "ja",
    })
  );
};

export const magic = createMagic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);

↓ログインボタンを実装していきます。

components/button/LoginButton.tsx

"use client"

import { useRouter } from "next/navigation";
import { Magic } from "magic-sdk";
import { magic } from "@/lib/magic";
import { useState } from "react";
import ButtonSpinnerSVG from "@/public/ButtonSpinnerSVG";

const magicIns: Magic = magic as any;

export default function LoginButton() {
  const router = useRouter();
  const [loading, setLoading] = useState<boolean>(false)

  // Emailの入力フォームを開きます
  const handleLoginWithEmail = async () => {
    setLoading(true)
    try {
      const address = await magicIns.wallet.connectWithUI()
      if (address) {
        router.push("/profile");
      }
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false)
    }
  }

  return (
    <button
      disabled={loading}
      type="button"
      onClick={handleLoginWithEmail}
      className="rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500
       focus-visible:outline focus-visible:outline-2
       focus-visible:outline-offset-2 focus-visible:outline-indigo-600 inline-flex items-center"
    >
      {loading && <ButtonSpinnerSVG/>}
      ログイン
    </button>
  )
}

メール

ちなみに、メールアドレスを入力して送信すると、このようなメールが送られてきます。
言語も"ja"で日本語に変更しています。
※すでに無効なメールなのでご安心ください。

デモ

参考にした記事

実装

メール

Discussion