ユーザが、メールアドレスを設定できるようにする

[prettyhappycatty]

Description / 説明

https://v2.lucia-auth.com/guidebook/email-verification-links/

• 機能面
  • Userテーブルにメールアドレスと認証済みかどうかのフラグを属性として追加
  • メールによる認証のための属性（トークン用のid、有効期限、ユーザid）のテーブルを用意
  • Luciaの設定を src/lib/server/auth.ts で更新
  • getUserAttributesに、メールアドレスと認証済みかどうかのフラグを追加
    • メールアドレスは一意制約はつけない
  • Zodによるバリデーションの更新 + 関連するテストの修正・追加
• 運用面
  • メールアドレスの取り扱いに関する規定（何を目的に利用するか＝パスワードリセットリンク？リリースの通知？）

Motivation / 動機

• ユーザID、パスワードを忘れた人に関して、本人を認証する手段がない

Other notes / その他

• emailの有効性の確認は行う
• 全てのユーザに対してメールアドレスの登録を促すかどうか、そのような機能（ログイン時に編集ページに飛ばすなど）を用意するかどうかは要検討。
• 少なくとも、今後用意される（であろう）パスワードリセットリンクは、メールアドレスを登録していない人は使えず、暫定対応のみになる。
• ひとりあたりのNovistepアカウントの個数は制限していない（言語により異なるアカウントを使用するなどが考えられる）ので、メールアドレスによる一意制約はつけない。

[prettyhappycatty]

こちらの対応を始めようと思います。 調べながらになるので、もし気をつけるべきことがあれば適宜教えてください。 よろしくお願いします。

[KATO-Hiro]

@prettyhappycatty

早速、ありがとうございます。

実装にあたっての懸念事項について、いくつか共有させていただきたいと思います。

1. 認証ライブラリとして導入した lucia のv3が来年3月にdeprecatedになるそうです。 (現在利用しているv2のサポートには言及されていませんが、今後メンテナンスされる可能性は限りなく低いと思います)

v2からv3への移行は、DBの破壊的な変更を伴うため保留にしていましたが、別ライブラリへの移行も含めて調査が必要だと考えています。

https://github.com/lucia-auth/lucia https://v2.lucia-auth.com/ https://v3.lucia-auth.com/ https://github.com/lucia-auth/lucia/discussions/1714 https://www.youtube.com/watch?v=cki2_GGJfbU

移行例: lucia v3からArtic and Oslo (v2からの書き換えができるかは要確認) https://github.com/webdevcody/wdc-saas-starter-kit/commit/49e2d8f9b8dead1c2a40e868771c76018005db12

=======================================

1.を解決するのが先決だと思いますが、以下の内容についてもご相談させていただきたいです。

2. メールアドレスの取得に伴うプライバシーポリシーの改訂

• 以前ご相談いただいた内容です
• 使用目的や利用範囲などを決めるとともに、説明内容について議論が必要だと思います

3. アカウント登録

• UI: メールアドレスの登録用の入力欄の追加
• サーバ側の処理
  • バリデーション: Zodを使用しているため、スキーマの更新が必要になりそうです
  • CRUD処理の修正
  • 単体テストおよび統合テストの追加・更新
• (要調査) 型定義ファイルなどの更新

4. 既存のユーザへの対応

• ユーザページから登録・更新できるといいと思いますが、いかがでしょうか?

よろしくお願いいたします。

[prettyhappycatty]

1.について

https://supabase.com/docs/guides/auth/server-side/sveltekit こちらのライブラリはいかがでしょうか？ データベースにsupabaseを使っているのと、sveltekitの例もありそうなので、移行しやすいのではと考えています。 また、emailの認証の例もありそうです。 （ざっと調べた感じでは、メールアドレスがすでにある場合ははねられそうに思います。エイリアスを使えば言語ごとにアカウントを作りたい要望は大丈夫なのかな、、、）

[prettyhappycatty]

2. について

chatgpt先生に聞きました

---

プライバシーポリシー文言の例（パスワードリセット専用）

1. 情報の収集と利用 当サービスは、パスワードリセットの手続きを行うためにのみ、お客様のEメールアドレスを収集・利用します。このEメールアドレスは、本人確認およびパスワードリセットリンクの送信を目的としています。
2. 利用目的 取得したEメールアドレスは、以下の目的でのみ使用されます。 アカウントのパスワードリセットリンクの送信 本人確認のためのメール送信
3. 情報の共有 当サービスは、お客様の同意がない限り、第三者とお客様のEメールアドレスを共有することはありません。ただし、法令遵守や裁判所からの正式な要請がある場合を除きます。
4. 保護措置 お客様のEメールアドレスは、業界標準のセキュリティ対策により保護されています。情報漏洩や不正アクセスを防ぐため、厳重なアクセス制御や暗号化を実施しています。
5. お客様の権利 お客様には、当サービスが保有するEメールアドレスの確認、修正、削除を求める権利があります。Eメールアドレスの修正は、ユーザー設定ページで行うことが可能です。その他ご希望がある場合は、＊＊までご連絡ください。

[prettyhappycatty]

アカウント登録 UI: メールアドレスの登録用の入力欄の追加 サーバ側の処理 バリデーション: Zodを使用しているため、スキーマの更新が必要になりそうです CRUD処理の修正 単体テストおよび統合テストの追加・更新 (要調査) 型定義ファイルなどの更新

承知しました！

既存のユーザへの対応 ユーザページから登録・更新できるといいと思いますが、いかがでしょうか?

これにプラスして、メールアドレスが登録されていないユーザの場合、 ログイン後に、ユーザページへ飛ばして、「メールアドレスを登録してください」を表示したいですね。

[KATO-Hiro]

早速、調査していただき、ありがとうございます。 とても助かります。

1. 認証ライブラリの移行先の選定

サンプルが丁寧でとてもよさそうです。 （詳しくは分かっていない部分が多いですが）既存のユーザに関して、prisma/schema.prisma の Key や Session モデルのデータの互換性の確認（もしくは、supabaseにKeyやSessionデータをコピー?）できれば、移行先の有力な候補になりそうですね。

2. プライバシーポリシーの改訂

LGTMです。 サービスの紹介ページに追記、もしくは、利用規約ページを新設することになるかと思います。

4. 既存ユーザへの対応

メールアドレスが登録されていないユーザの場合、 ログイン後に、ユーザページへ飛ばして、「メールアドレスを登録してください」を表示したいですね。

この導線があると、とてもよさそうです。

[prettyhappycatty]

直近ですが、svelte+prisma+supabaseについて、解説記事がありました。 https://www.restack.io/docs/supabase-knowledge-supabase-sveltekit-prisma-guide

sessionは使わなそうですが、event.locals.supabaseで各ページの認証ができる方式のように読みました。

[KATO-Hiro]

教えていただき、ありがとうございます。

Supabaseがよしなに処理してくれそうなところまでは理解できました。

私の理解不足なだけだと思いますが、既存のユーザはPrismaを利用してハッシュ化されたパスワードをDBに保存をしていますが、Supabaseに移行してもパスワードをそのまま利用できるのか（or 任意で変更可能 or 変更が必須?）気になっています。

教えていただいた記事を元にGPTに聞いた内容をメモとして残しておきます。

---

Prismaのセッションモデルを使用してユーザーのパスワードをDBに保存して管理している場合に移行する際の注意点を示します。

記事の要約

1. Supabaseのセットアップ:

   • Supabaseプロジェクトの作成方法と、APIキーの取得方法について説明しています。
   • Supabaseの認証機能を使用して、ユーザーの登録とログインを実装する方法を紹介しています。

2. SvelteKitのセットアップ:

   • SvelteKitプロジェクトの作成方法と、必要な依存関係のインストール方法について説明しています。
   • SupabaseクライアントをSvelteKitプロジェクトに統合する方法を紹介しています。

3. Prismaのセットアップ:

   • Prismaを使用してデータベーススキーマを定義し、マイグレーションを実行する方法について説明しています。
   • Prismaクライアントを使用して、データベース操作を行う方法を紹介しています。

4. 認証とセッション管理:

   • Supabaseの認証機能を使用して、ユーザーの登録、ログイン、およびログアウトを実装する方法について説明しています。
   • セッション管理のために、SupabaseのJWTトークンを使用する方法を紹介しています。

移行時の注意点

Prismaのセッションモデルを使用してユーザーのパスワードをDBに保存して管理している場合、Supabaseの認証機能に移行する際に注意すべき点は以下の通りです。

1. パスワードの管理:

   • Supabaseの認証機能を使用する場合、パスワードの管理はSupabase側で行われます。これにより、アプリケーション側でパスワードを管理する必要がなくなります。
   • 既存のユーザーのパスワードをSupabaseに移行する場合、ユーザーにパスワードリセットを依頼するか、SupabaseのAPIを使用してパスワードを設定する必要があります。

2. セッション管理:

   • Prismaのセッションモデルを使用している場合、セッション情報はデータベースに保存されますが、Supabaseの認証機能を使用する場合、セッション管理はJWTトークンを使用して行われます。
   • JWTトークンの有効期限やリフレッシュトークンの管理方法を理解し、適切に実装する必要があります。

3. データベーススキーマの変更:

   • Supabaseの認証機能を使用する場合、ユーザー情報はSupabaseのデフォルトのスキーマに保存されます。これにより、既存のデータベーススキーマを変更する必要があるかもしれません。
   • Prismaのスキーマファイルを更新し、Supabaseのユーザーテーブルと整合性を保つようにします。

4. 認証フローの変更:

   • Supabaseの認証機能を使用する場合、認証フローが変更されるため、フロントエンドとバックエンドのコードを更新する必要があります。
   • Supabaseの認証APIを使用して、ユーザーの登録、ログイン、およびログアウトを実装します。

まとめ

Supabaseの認証機能に移行することで、パスワード管理やセッション管理が簡素化されますが、移行時にはパスワードの移行、セッション管理の変更、データベーススキーマの更新、認証フローの変更などに注意する必要があります。これらの点を考慮して、移行作業を進めてください。

[prettyhappycatty]

ありがとうございます。 ちゃんと読めていなかったです。 移行すると、パスワードの変更が必要になりそうですね。 この方法を取るなら移行期間の処置に以下のようにする形ですかね、、、 ・現状のユーザーテーブルに移行済フラグの追加 ・移行済みであれば、新しい方にログインリクエスト ・移行未であれば、であれば現状の認証を使う

今の仕組みがそのまま使えるものがないかも調べてみます。

[KATO-Hiro]

ご確認いただき、ありがとうございます。

移行すると、パスワードの変更が必要になりそうですね。 この方法を取るなら移行期間の処置に以下のようにする形ですかね、、、

認証の移行をする場合、ご提案いただいた手順がいいと思います。 Luciaから移行する前に、パスワードのリセット機能が先に必要そうです。 大変な部分をお願いしてしまい、すみません。

今の仕組みがそのまま使えるものがないかも調べてみます。

お手数をお掛けしますが、よろしくお願いいたします。

https://www.youtube.com/watch?v=cki2_GGJfbU ご参考までに、この解説動画の2:30秒付近で、候補となるサービスが紹介されています。 (GitHub の Issue では非公開もしくは削除にされたようです)

[prettyhappycatty]

ひとまず別プロジェクトで今のプロジェクトと類似の認証を作って、移行のお試しをしてみようと思っているのですが、色々わかっていなくて少し苦戦しつつも少しずつ進んでいる状況です。 ・supabaseにつながらない→sessionタイプに変更したら繋がった ・sveltekitではなくsvelteでプロジェクトを作っていた

[KATO-Hiro]

認証の移行先の環境構築、大変お疲れ様です。 また、途中経過についてご報告いただき、ありがとうございます。

[prettyhappycatty]

別プロジェクトのアプリを作ってみたのですが、アプリからsupabaseにうまくつながっていない状況です。 ・pnpm db pushはできて、スキーマの反映はできる ・アプリをたちあげて、luciaのサンプルコードを入れたけれど、cause: Error: getaddrinfo ENOTFOUND api.pooler.supabase.comが出ていて、registerができていない状態です。

[KATO-Hiro]

教えていただき、ありがとうございます。

公式ドキュメントを確認する必要があるかと思いますが、原因の取っ掛かりをつかむためGPTに聞いてみました。 （既にご確認されていましたら、ご放念いただければと思います）

---

supabase のエラー cause: Error: getaddrinfo ENOTFOUND api.pooler.supabase.com は、DNS解決に失敗したことを示しています。これは、指定されたホスト名 api.pooler.supabase.com が見つからないことを意味します。このエラーの原因と修正方法について説明します。

原因

1. ホスト名の誤り:

   • 指定されたホスト名が間違っている可能性があります。ホスト名が正しいかどうかを確認してください。

2. DNS設定の問題:

   • DNSサーバーが正しく設定されていないか、一時的に利用できない可能性があります。

3. ネットワーク接続の問題:

   • インターネット接続に問題があるか、ファイアウォールやネットワーク設定によってアクセスがブロックされている可能性があります。

4. Supabaseのサービス障害:

   • Supabaseのサービスが一時的にダウンしている可能性があります。Supabaseのステータスページを確認してください。

修正方法

1. ホスト名の確認:

   • 使用しているホスト名が正しいかどうかを確認してください。Supabaseのダッシュボードで正しいAPIエンドポイントを確認できます。

2. DNS設定の確認:

   • DNS設定を確認し、問題がないかを確認してください。必要に応じて、別のDNSサーバーを使用してみてください。

3. ネットワーク接続の確認:

   • インターネット接続が正常であることを確認してください。ファイアウォールやネットワーク設定を確認し、必要に応じて設定を変更してください。

4. Supabaseのステータス確認:

   • Supabaseのステータスページ（https://status.supabase.com/）を確認し、サービスが正常に稼働しているかを確認してください。

例: ホスト名の確認と修正

以下に、ホスト名を確認し、正しいホスト名を使用する例を示します。

const { createClient } = require('@supabase/supabase-js');

// 正しいSupabaseのURLとAPIキーを使用してください
const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-supabase-key';

const supabase = createClient

(s

upabaseUrl, supabaseKey);

async function fetchData() {
  const { data, error } = await supabase
    .from('your-table')
    .select('*');

  if (error) {
    console.error('Error fetching data:', error);
  } else {
    console.log('Data:', data);
  }
}

fetchData();

まとめ

getaddrinfo ENOTFOUND エラーは、DNS解決に失敗したことを示しています。ホスト名の確認、DNS設定の確認、ネットワーク接続の確認、Supabaseのステータス確認を行い、問題を特定して修正してください。

[KATO-Hiro]

LuciaからSupabaseへの移行中に発生するエラーの対処方法について説明します。具体的なエラーメッセージが提供されていないため、一般的な移行手順と考えられる問題点、およびその対処方法について説明します。

一般的な移行手順

1. Supabaseプロジェクトのセットアップ:

   • Supabaseのダッシュボードで新しいプロジェクトを作成し、APIキーとURLを取得します。

2. Supabaseクライアントの設定:

   • Supabaseクライアントをインストールし、設定します。

3. ユーザーデータの移行:

   • LuciaからSupabaseにユーザーデータを移行します。

4. 認証ロジックの更新:

   • 認証ロジックをLuciaからSupabaseに更新します。

具体的なコード例

以下に、Supabaseクライアントの設定と認証ロジックの更新の例を示します。

1. Supabaseクライアントの設定

まず、Supabaseクライアントをインストールします。

npm install @supabase/supabase-js

次に、Supabaseクライアントを設定します。

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-supabase-key';
const supabase = createClient(supabaseUrl, supabaseKey);

2. ユーザーデータの移行

LuciaからSupabaseにユーザーデータを移行するためのスクリプトの例です。

async function migrateUsers() {
  const luciaUsers = await getLuciaUsers(); // Luciaからユーザーデータを取得する関数

  for (const user of luciaUsers) {
    const { email, password } = user;
    const { error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      console.error(`Failed to migrate user ${email}:`, error.message);
    } else {
      console.log(`Successfully migrated user ${email}`);
    }
  }
}

migrateUsers();

3. 認証ロジックの更新

認証ロジックをSupabaseに更新します。

async function signIn(email, password) {
  const { user, error } = await supabase.auth.signIn({
    email,
    password,
  });

  if (error) {
    console.error('Error signing in:', error.message);
    return null;
  }

  console.log('Successfully signed in:', user);
  return user;
}

エラーの対処方法

1. DNS解決エラー:

   • getaddrinfo ENOTFOUND エラーが発生する場合、SupabaseのURLが正しいか確認してください。また、ネットワーク接続が正常であることを確認してください。

2. 認証エラー:

   • 認証に失敗する場合、SupabaseのAPIキーやURLが正しいか確認してください。また、ユーザーが正しく移行されているか確認してください。

3. 権限エラー:

   • ディレクトリの読み取り/書き込み権限に関するエラーが発生する場合、適切な権限が設定されているか確認してください。

まとめ

LuciaからSupabaseへの移行中に発生するエラーの対処方法について説明しました。具体的なエラーメッセージが提供されていないため、一般的な移行手順と考えられる問題点、およびその対処方法を示しました。具体的なエラーメッセージがある場合は、それに基づいてさらに詳細な対処方法を提供できます。

[prettyhappycatty]

まだ移行まで行けていなくて、現状の環境を作る部分で苦戦しています。 現在のものの設定を確認しつつ進めてみます。（先週〜今週にかけてあまり時間が取れていない状況ですみません。）

[KATO-Hiro]

環境構築はハマりやすい部分もあるかと思います。 アプリの根幹部分の改修であり、難易度が高いことは十分に承知しているつもりです。 大変な作業をお願いしてしまい、恐縮しております。

あべみさんのペースで進めていただければと思います。 引き続き、よろしくお願いいたします。

[prettyhappycatty]

DBに接続できていないと思っていたのですが、その後のクエリの投げ方を間違えてました。 時間かかってしまってすみませんm(__)m

[KATO-Hiro]

エラーの調査・原因の特定、大変お疲れ様です。

時間かかってしまってすみませんm(__)m

とんでもないです。アプリの根幹となる機能の実装・改修を進めていただき、とてもありがたいです。