next-authの基本的な使い方。（メールリンク方式） - Qiita
https://qiita.com/masakinihirota/items/190360bfdcc4bf2b13ac
の続き。
今回の目標
前回はsmtp4devというダミーSMTPサーバーツールを使用してローカル内でメールリンク方式の認証をしていましたが、今回はgmailで利用できる無料SMTPサーバーを利用してメールリンク方式の認証を行います。
gmailは無料のSMTPサーバーを提供しています。
詳しくは下記をご覧ください。
GoogleのSMTPサーバー（あまり知られていない無料サービス）の使用方法
https://thefunky-monkey.com/page/googlesmtp/
Googleアカウント設定
Google アカウントのセキュリティ
https://myaccount.google.com/security
このセキュリティから「安全性の低いアプリのアクセス」を選び
安全性の低いアプリのアクセス
安全性の低いアプリの許可: 有効
にします。
この設定をしないと外部アプリ（今回は next.js）からのは全てシャットアウトされます。
この設定をすると「安全性の低いアプリによるアクセスが有効になりました」と確認メールが来ます。
ボタンを押すと確認を促されます。
いま自分で設定したので
「はい、心当たりがあります」を選びます。
そうすると
「本人確認が完了しました
お使いのアカウントの保護を目的としています」
と表示されます。
next.jsアプリ
メールの設定を変更します。
.env.localファイルの下記の部分を自分のメールに変更します。
NEXTAUTH_EMAIL_SERVER=smtp://{gmailのメールアドレス}:{メールのパスワード}@smtp.gmail.com:587
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_TWITTER_ID=
NEXTAUTH_TWITTER_SECRET=
NEXTAUTH_GITHUB_ID=
NEXTAUTH_GITHUB_SECRET=
NEXTAUTH_GOOGLE_ID=
NEXTAUTH_GOOGLE_SECRET=
NEXTAUTH_FACEBOOK_ID=
NEXTAUTH_FACEBOOK_SECRET=
NEXTAUTH_EMAIL_SERVER=smtp://{gmailのメールアドレス}:{メールのパスワード}@smtp.gmail.com:587
NEXTAUTH_EMAIL_FROM=NextAuth <masakinihirota@gmail.com>
NEXTAUTH_DATABASE_URL=sqlite://localhost/:memory:?synchronize=true
.env.localファイルは.gitignoreでgitが追跡していない設定になっているはずです。
パスワードが書かれているのでネットにアップしないよう気をつけましょう。
※モザイク部分はパスワードです。
以上で設定は終了です。
アプリを立ち上げて確認
ターミナルから
npm run dev
右上のSign inボタンをクリックして
メールを入力して
Sign in with Emailボタンを押して
自分のところにメールが来たかを確認します。
メールが来たのを確認できたら
「Sign in」ボタンを押すと
サイトにログイン済みになっています。
＃比較
前回は下記のようでした。
から
といように
一部の機能をネットに切り出せました。