starMagichat
@starMagichat

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

supabaseのuseridが合致した際にnext.jsからデータベースにアクセスする仕様の実装方法について

解決したいこと

アクセスするシステムを設定し今回下記コードのようにuseridと合致したらデータベースにアクセスするシステムを設定しましたが、自分もnext.jsからアクセスできず下記の点を質問したいです
a) next.jsプロジェクトから自分でデフォルトでは何も指定などを行わず、
アクセスした場合、ユーザーIDはどのように決定されるのでしょうか?
b) ユーザーIDの合致判定をする際、Supabaseに対してHTTPリクエストのヘッダー情報などで送信する必要があるのでしょうか?
c) Next.jsからSupabaseにアクセスする際、ユーザーIDをどのように設定すれば良いのでしょうか?

該当するソースコード

image.png
image.png
上記の赤線で囲ったところと自分のuseridが一致した時のみ、データにアクセスできるという構造にしたつもりでしたが、next.jsからアクセスする際はどのようにuseridを入れれば良いのかもわからない。

自分で試したこと

まずrlsを停止した状態でアクセスをすることに関してはデータベースの取得とデータベースの獲得はどちらも成功したのですが、
rlsを導入すると何もそれらの内容が表示されないという問題が発生いたします。
そのためコンソールのエラーなども確認しましたが、特に見当たらないという状態になり、
難しい問題になってしまったので確認いたしました

もしよろしければ回答していただけると助かりますm(_ _)m

0

1Answer

a) next.jsプロジェクトから自分でデフォルトでは何も指定などを行わず、アクセスした場合、ユーザーIDはどのように決定されるのでしょうか?

「next.jsプロジェクト」というのが何だか分かりませんし、ましてやその「デフォルト」というのが何だか皆目見当がつきませんが・・・

一般的に、Web サイトにアクセスしてきたユーザーを識別するには、ログインページでユーザーに ID と Password を入力してもらい、その情報をユーザー情報が保持されているデータベースに問い合わせて正当なユーザーか否かを確認し、ユーザー認証を行うという操作が必要です。

質問者さんの Web アプリに認証システムがデフォルトで実装されてなければ、「ユーザーIDはどのように決定」というのは議論にならなくて、a) 以降の話は始まらないということは理解されているでしょうか?

0Like

Comments

  1. @starMagichat

    Questioner

    回答ありがとうございます。

    質問者さんの Web アプリに認証システムがデフォルトで実装されてなければ、「ユーザーIDはどのように決定」というのは議論にならなくて、a) 以降の話は始まらないということは理解されているでしょうか?
    に関してですが、そこは理解していませんでした。next.js上でユーザーIDを入力しないと認証ができないという点がわからなかったからです。
    認証システムは作っておらず、一旦自分だけがアクセスできるデータベースを作成しようと試みたからです。

  2. next.js上でユーザーIDを入力しないと認証ができないという点がわからなかったからです。

    質問者さんの言う「next.js」とは React のフロントエンドですよね。そして、最初の質問に書いてあった「自分でデフォルトでは何も指定などを行わず」というのは、バックエンドにはユーザー情報は一切送信しないということですよね。

    とすると、フロントエンドから要求を受けたバックエンドが、要求を出しているユーザーが誰だか知るすべはないです。

    質問者さんの言う userid というのはユーザー別に与えられたユーザー固有の番号だと想像してますが、とすると、ユーザーが誰だか分からないのに userid を知るすべはないです。

    なので、a) 以降の話は始まらないということになります。当たり前の話だと思うのですが?

    では、何らかの方法でフロントエンドから単純に ID だけ送信すればいいという話になるかもしれませんが、どこの馬の骨かもわからない(ひっとしらた悪意のある)ユーザーが送りつけてきた ID を信用するのかという問題がありますよね。

    なので、上の回答にも書いた、ログインページでユーザーに ID と Password を入力してもらい、その情報をユーザー情報が保持されているデータベースに問い合わせて正当なユーザーか否かを確認し、ユーザー認証を行うという操作が必要になると思いますが、いかがですか。

  3. @starMagichatさん

    a) next.jsプロジェクトから自分でデフォルトでは何も指定などを行わず、
    アクセスした場合、ユーザーIDはどのように決定されるのでしょうか?
    b) ユーザーIDの合致判定をする際、Supabaseに対してHTTPリクエストのヘッダー情報などで送信する必要があるのでしょうか?
    c) Next.jsからSupabaseにアクセスする際、ユーザーIDをどのように設定すれば良いのでしょうか?

    多少supabaseの経験はあるので、私なりの回答をさせていただきます。

    aに対する回答

    a:ユーザーIDはユーザのサインアップが完了後に、Supabase側で決定され、メールアドレスなどの情報と共に、にauth.usersテーブルにレコードが追加されます。画像内部のカラム:IDがユーザIDです。
    (私は、Googleアカウントなど使わずメールアドレスによるサインアップを採用してます)
    select * from auth.users;
    image.png

    bに対する回答

    どのユーザか判定する上でユーザIDは利用しますが、HTTPリクエストのヘッダーに含めて、その値で判断する方法は取りません。
    アクセストークンやリフレッシュトークンを用いたセッション管理を使って、ユーザ識別するのが少なくともSupabase上では一般的なやり方と認識しています。

    c対する回答

    どのように設定すれば良いのでしょうか?

    RLSに関するページです。

    上記ページ内に以下のテーブル作成のクエリがあります。

    -- 1. Create table
    create table profiles (
      id uuid primary key,
      user_id uuid references auth.users,
      avatar_url text
    );
    

    user_id uuid references auth.users,が大切な記述です。aの回答部分で記載したSQL(select * from auth.users;)と同じテーブルが登場します。
    auth.usersテーブルを参照する形でuser_idというカラムを用意して、ユーザIDを設定してあげます。
    ただし、この外部参照はSupabaseのGUIのエディタ上では(おそらく)選択できないので、以下のようにSQLを直接実行します。

    まとめ

    RLSが関わる話は私も最初手こずった覚えがあります。
    大変かもしれませんが、頑張ってください。

  4. 質問者さん>

    今回の質問のシステムは以下の構成だと理解してます。

    不特定多数のユーザー ⇔ ブラウザ ⇔ フロントエンド (React) ⇔ バックエンド (Supabase)

    そして、質問者さんの言う「ユーザーID」とは、

    (1) 上の不特定多数の各ユーザーに割り当てられたユーザー固有の番号

    と理解していました。

    しかし、@eno49conan さんの回答の「ユーザーIDはユーザのサインアップが完了後に、Supabase側で決定され」を見るとそうではなくて、

    (2) 上のフロントエンド (React) に割り当てられたアプリレベルの番号

    かもしれないとも思い始めています。

    (1) or (2) どっちなのでしょう? どちらも該当しないということなら、質問者さんの言う「ユーザーID」とは何なのか詳しく書いていただけませんか?

    @eno49conan さん>

    (1) の場合でも上の @eno49conan さんの回答は当てはまるのでしょうか?

    上にも書きましたが、(1) の場合、フロントエンドから単純に ID だけ送信すればいいという話にはならなくて、ユーザー認証システムが必要で、ログインページでユーザーに ID と Password を入力してもらい、その情報をユーザー情報が保持されているデータベースに問い合わせて正当なユーザーか否かを確認し、ユーザー認証を行うというステップが必要になると思いますが、いかがですか。

  5. @starMagichat

    Questioner

    質問者さんの言う userid というのはユーザー別に与えられたユーザー固有の番号だと想像してますが、とすると、ユーザーが誰だか分からないのに userid を知るすべはないです。

    @SurferOnWww さん、回答ありがとうございます。
    に関してですが、確かに何も送っていなくても、認証するという方法がない場合は確かに認証システム自体を作らないと、どうしようもできないということが把握できました。
    なのでまず、認証システムを作り、そこから自分自身が認証したuseridのみにデータベースのアクセスができるという仕様を作ろうと思います。
    (いわゆる不特定多数にまだ公開はしていませんが、一旦公開前に管理者アカウントを作る感じ)

    また
    @eno49conan さんも
    回答ありがとうございます。
    テーブル作成やデータベースなどを使用する際にすごく参考になると感じました。
    色々と作ってみて、私の方でも認証システムを作ってみて、rlsを使用して作ってみます。

    回答ありがとうございます、とても参考になりました!

  6. 仕切り直しでまた質問するのであれば、その際はシステム構成とユーザーというのは何かを質問の一番最初に書くようお願いします、

    以下の構成と理解していいのか、

    不特定多数のユーザー ⇔ ブラウザ ⇔ フロントエンド (React) ⇔ バックエンド (Supabase)

    そして、質問者さんの言う「ユーザーID」とは、

    (1) 上の不特定多数の各ユーザーに割り当てられたユーザー固有の番号

    なのか等。

  7. @starMagichat

    Questioner

    承知いたしました。自分がやっている色々リポジトリなどはあり、それによって構成は異なりますが、基本的に今のプロジェクトでは

    不特定多数のユーザー ⇔ ブラウザ ⇔ フロントエンド (React) ⇔ バックエンド (Supabase)
    のウェブアプリを作る予定で相違ないのと、

    useridはおそらくinstagramのように特定のフォームを作成して、自分で重複ないidを作れるというシステムにする予定のため、

    再度このプロジェクトのことに対して質問する際は
    そのような前提を提示させていただきます。

Your answer might help someone💌