AstroでSupabaseを使う

やったこと

• AstroでSupabase Authを使った認証を実装
  • サインアップ、サインイン、OAuth
• AstroでSupabaseから記事をもってきて表示

AstroでSupabase Authを使った認証を実装

Supabase & Astro | Docsに書いてあるので、その通りに

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

こんな感じで操作できるので、とても気軽

OAuth

GitHub認証

GitHubのSettings -> Developer Settings -> OAuth Appsから作成

開発用の場合はHomepage URLはローカルホストの開発用サーバーを建ててるポートへ

Discord認証

Developer PortalでNew ApplicationしてOAuth2タブから設定します

データベースにアクセス

Supabaseの方でテーブルを作っておいて、RLSを追加

誰でも見れるようにするには

alter policy "Everyone can view every articles"
on "public"."Article"
to public
using (
  true
);

usingをtrueにしておけば誰でも(anonでもログイン済みでも)閲覧可能に

const { data, error } = await supabase
.from('Article')
.select();

でfetchしてこれる

Astroでは、ファイル名を[hoge].astroにして

const { hoge } = Astro.params;

とすれば、アクセスしたURLからパラメータをとってこれる(フォルダ名を[fuga]にしておけば複数パラメータも指定できる。また、レストパラメータにも対応している)

そして、そのIDのデータをsupabaseで取ってくるには

const { data, error } = await supabase
    .from('Article')
    .select()
    .eq('id', articleId )
    .limit(1)
    .single();

これで、配列ではなくデータそのものが返ってくる。

Markdownをパースしたり、CRUDを実装したりはまた今度。

読んでくださりありがとうございました。