Next.js + Magic.linkを
サクッと試してみた件について
先日「Magic.linkとNext.jsによるシンプルな認証」のチュートリアルの記事を Vercel が公開
マジックリンクとは？
Slack でも採用さている
パスワードレス認証
Magic.link とは？
マジックリンクの
仕組みを提供するサービス
https://magic.link/
チュートリアルのデモ
1. ダッシュボード（未ログイン）
2. ログイン（メールアドレス送信）
3. メールアドレス確認
4. ダッシュボード（ログイン済）
ログイン手順
超ざっくり説明
※コードは重要な箇所以外省略
1. Magic.link でアプリを作成
2. パブリックキーとシークレットキーを取得
1. 環境変数に
シークレットキーとパブリックキーを格納2. 独自の秘密鍵も格納
1. ログインページで SDK をインポート
2. パブリックキーとアドレスからトークンを作成
3. トークンを使ってログイン API を叩く
1. ログイン API で SDK をインポート
2. シークレットキーからトークンを作成
3. トークンを Cookie に追加
ダッシュボードページで
SWR を使いユーザ取得 API を叩く
※SWR は Hooks ベースの fetch ライブラリ
ユーザ取得 API で
Cookie のトークンと作成した秘密鍵から
ユーザを取得
Magic.link はフリープランで
250 アクティブユーザー
250 アクティブユーザー
||
250 メールアドレス
限られた環境でつかう
アプリであれば
フロントエンドの技術をベースに
比較的手軽にログインを実装可能
ぜひお試しあれ
Thanks.
Next.js + Magic.linkを サクッと試してみた件について
By Syuji Higa
