企業情報一覧画面

[komagata]

企業は下記のデータを持つ。

• 名前
• WebサイトURL
• メモ欄（特記事項などを入れる欄）
• 作成日時
• 変更日時

[Jyoumama]

@komagataさん、 @machida　さん、

Q. 企業情報一覧画面の仕様のイメージについて確認

コメント欄で失礼します。現在、割り振っていただいたこちらのページの仕様のイメージについて、作り始めということもあり、認識を共有したく質問させていただきます。お忙しい中、恐縮ですが、お手隙の際にご確認いただけますとありがたいです。

企業情報一覧ページに飛ぶリンクの作成は、現在、kazumaNさんが実施されている「Docs一覧ページの作成」のIssue#38で作成途中のDocsの下に作成する、という認識で良いでしょうか？
現在、kaszumaNさんがプルリクエスト中のスクショ画面で確認できるDocsの下です。

お忙しいところ、恐縮ですが、何卒、よろしくお願いします。

[komagata]

@Jyoumama はい、そうです。Docs一覧を参考に実装してみてください〜。

[m0nch1]

📝 モブプロのメモ（2025/02/14）

今起きている問題

• データベースには seed のデータ含め companies テーブルが作成されているはずなのに /companies に行った時に何も表示されない。
  • supabase studio（GUI）上では seed のデータがちゃんと入っていることが確認できている

わかっていること

• supabase studio で試しに RLS を OFF にしたらデータは見れた
  • ので supabase の RLS の設定が怪しいかも

[m0nch1]

@Jyoumama
これ、なんか単にログインしたユーザでのリクエストになっていないようなきもしてきました...！
src/components/Companies.tsx の import supabase from "../lib/supabase"; で import している supabase は

import { createClient } from "@supabase/supabase-js";
import { Database } from "./database.types";

const supabase = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL as string,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string,
);

export default supabase;

であり、anon（アノニマス）のリクエストになっているので　RLS の auth.role() = "authenticated" にマッチしないのでデータが帰ってこない。

な気がしてきました！

ログインセッションのユーザーでリクエストしないといけない気がしています！

[m0nch1]

@komagata cc: @Jyoumama

今、companies テーブルにある RLS の設定で駒形さんの手元で http://localhost:3000/companies 遷移した時って企業の一覧表示されてますかー？？
（多分、app router になる前の名残っぽい？）

この issue では一旦 anon なリクエストでデータが表示できれば良くて、ログインセッション周りは別の issue なのかなという感じがしたんですが認識あっていますか？？ 🤔

（というのを今後は @Jyoumama さんからしてもらうのが良さそうだが、今回は僕もキャッチアップした & ペアプロしたこともあり僕から質問です！ @Jyoumama さんも issue の完了条件などわからない場合は質問していくのが良いと思います ☺ ）

[Jyoumama]

@komagata さん、
@m0nch1 さん、

自分でも以下に状況を整理しました。もし、理解が誤っている等ありましたら、ご指導いただけたらと考えます。🙏

1.現在のsupabaseクライアント
現在、使用しているsupabaseクライアントは、createClientにprocess.env.NEXT_PUBLIC_SUPABASE_ANON_KEYを使用しています。このanon_keyは**匿名ユーザー用（未認証）**のキーなので、そのままだとSupabaseが発行するJWTにauth.role() = 'anon'が割り当てられます。
※念の為、jwt.io(JWTの内容を可視化して、簡単にデコードや署名の検証ができるツール)を使用してSUPABASE_ANON_KEYのpayload(ユーザーID、ロール、タイムスタンプなどの内容）を確認しました。”role”: anon,ということを確認しました。

【jwt.io結果スクショ】

2. . RLSのポリシーの設定 現在、companiesテーブルのRLSポリシーにはauth.role() = 'authenticated'が設定されているので、ログインセッションを持たないanonリクエストではデータが返されません。

3. ログインセッションが利用されていない
   ログインセッションで生成されるJWTを使用してリクエストする必要があるのに、anonキーを使用しているため、認証済みユーザーとして認識されていない。

ここで、Issueの完了条件について確認したいと考えます。

• もし今回のタスクで「anonのリクエストでデータが表示されれば良い」という要件であれば、RLSのポリシーをanonユーザーも許可する形に変更するだけで良いのかな、と考えます。

• そうではなくて、ログインセッションが必要な仕様の場合は、ログインセッションを利用したリクエストを実現する必要があると考えます。

よろしくお願いします。

[Jyoumama]

@komagata さん、
@m0nch1 さん、cc. @kazuma-naka さん、

現在、以下の内容（スクショ１）でRLSポリシーを設定するとagentアプリ上でsupabaseの企業データが表示されること(スクショ２）を確認できております。
migrationsファイルを書き換えて、supabase db resetをせずとも、GUI上（supabase sutudio上)でRLSポリシーを書き換えることで、アプリの動作確認ができるのですが、RLSポリシーのもともとの表題”Authenticated users can access table data"は、そのまま変えていませんが、内容をto anon, Using: trueに設定（USING (auth.role() = 'authenticated');ではデータは表示されません。）したところ（スクショ１）と、スクショ２のようにagentアプリ（Next.js)上でデータが表示される状態です。
このRLSポリシーの設定で良ければ、migrationsファイルを書き換えて、設定を適用することでデータは表示されると考えています。

スクショ１：GUI上でRLSポリシーを以下の内容で仮に設定し動作確認をしている状態

スクショ２：上記のRLSポリシーの設定でデータが表示される状態

いかがでしょうか〜？

[Jyoumama]

@komagata さん、
@m0nch1 さん、cc. @kazuma-naka さん

まだArcの操作に慣れておらず見ずらい画面ですみません〜。
GUI上で仮に設定しているRLSポリシーが右画面、そのRLSポリシーを適用して表示されたagentアプリの画面が左です。

[kazuma-naka]

@Jyoumama さん、 @komagata さん、 @m0nch1 さん、

お疲れ様です。
私なりにリサーチしてみました。
seed.sql で用意されるテストユーザーの role は authenticated ですのでテストユーザーでログインができれば role は authenticated になるはずです 。
テストユーザーでログインして supabase からデータを取得できない理由として考えられるものは createClient().auth.getUser() が null を返すことで auth.role を取得できず RLS が通らないというものです。
Companies.tsx は use client の記述がなくサーバーコンポネントですので import supabase from "../lib/supabase"; ではログイン中の userの情報を取得できないと考えます。

https://supabase.com/docs/guides/auth/server-side/advanced-guide

• Access token in the form of a JWT.
• Refresh token which is a randomly generated string.
  The default behavior if you're not using SSR is to store this information in local storage. Local storage isn't accessible by the server

このページによると JWT のアクセストークンは Local storage に保存されるようですがサーバーコンポネントからローカルストレージにアクセスすることはできません。

以上の理由から RLS で role==authenticated が設定されている場合、サーバーコンポネントから DB を参照しようとすると supabase/ssr を使用する必要があると思いました。
Supabase SSR はアクセストークンをクッキーに保存してくれるようです。

INSERT INTO "auth"."users" ("instance_id", "id", "aud", "role", "email", "encrypted_password", "email_confirmed_at", "invited_at", "confirmation_token", "confirmation_sent_at", "recovery_token", "recovery_sent_at", "email_change_token_new", "email_change", "email_change_sent_at", "last_sign_in_at", "raw_app_meta_data", "raw_user_meta_data", "is_super_admin", "created_at", "updated_at", "phone", "phone_confirmed_at", "phone_change", "phone_change_token", "phone_change_sent_at", "email_change_token_current", "email_change_confirm_status", "banned_until", "reauthentication_token", "reauthentication_sent_at", "is_sso_user", "deleted_at", "is_anonymous") VALUES ('00000000-0000-0000-0000-000000000000', 'dcfeb157-6c90-4d70-ad96-1d6361c1874e', 'authenticated', 'authenticated', 'admin@example.com', '$2a$10$pu4tk32.QPMKPC6fbKKq7up/myrj9chb/1v0hpwz6HHQoAQjEQVBO', '2024-12-13 11:09:31.202211+00', null, '', '2024-12-13 11:09:19.928426+00', '', null, '', '', null, '2024-12-13 11:21:21.870009+00', '{"provider": "email", "providers": ["email"]}', '{"sub": "dcfeb157-6c90-4d70-ad96-1d6361c1874e", "email": "admin@example.com", "email_verified": false, "phone_verified": false}', null, '2024-12-13 11:09:19.921344+00', '2024-12-13 11:21:21.870874+00', null, null, '', '', null, '', '0', null, '', null, 'false', null, 'false');

[Jyoumama]

@kazuma-naka さん、@komagataさん,　@m0nch1さん

ありがとうございます！
現在、agentアプリ上でrole=== authenticated（role=anonに設定せずとも）で企業情報一覧が表示される状況になりました。

実施の経緯を以下にまとめます。

① npm install @supabese/ssrを実行し、SSR で認証情報 (cookies()) を適用できるようにしました。

② その上で、Companies.tsx(企業情報取得一覧ページ)のimport文を
import { supabase } from "@/lib/supabase"からiimport { createServerClient } from "@supabase/ssrに変更し、import { cookies } from "next/headers"を追記しました。

③Companies.tsxファイルの設定位置をsrc/components/Compaies.tsxとしていた上でnpm run devを実施したところ、以下のようなエラーがブラウザに表示されました。

× You're importing a component that needs next/headers.
That only works in a Server Component which is not supported in the pages/ directory.

④ エラーの内容が「next/headers を使ってるけど、これはサーバーコンポーネントでしか動かない・components/Companies.tsx では、componentsがデフォルトでは、クライアントコンポーネントにしかならず、cookies()はサーバーコンポーネントでしか動かない」と言うものなので、Compnies.tsxをsrc/app/companies/配下に移動しました。

• Next.js公式ドキュメント:Next.jsではApp Routerを使用する際、app/ ディレクトリがデフォルトでサーバーコンポーネントとして使用されるというルールが適用されるという根拠が記載された該当箇所

https://nextjs.org/docs/app/building-your-application/rendering/server-components?utm_source=chatgpt.com#using-server-components-in-nextjs

--以下、該当箇所--

• By default, Next.js uses Server Components. This allows you to automatically implement server rendering with no additional configuration,
• if you start with an app composed of entirely Client Components, moving non-interactive pieces of your UI to Server Components can reduce the amount of client-side JavaScript needed.

⑤ 次にsrc/app/companies/page.tsxから　use clientを削除して、デフォルトのサーバーコンポーネントとして動作するように設定しました。

上記、①〜⑤を実施したところ、現在、以下のようにagentアプリで企業情報一覧が表示（取得）できている状態です。