firebase authで投稿した本人かどうかを判別する

はじめに

認証にFirebase Auth、DBにsupabaseを利用したアプリで投稿した本人だけが削除や編集などの処理を行えるようにする方法を書いていきます。(ライブラリはReactです)

手順

firebase authでなくても似たような処理になるかと思います。

① Firebase Authから今ログインしているユーザーのユーザーIDを取得
② 何かをDBに追加する際(例えばTODO)に一緒にユーザーIDもDBに入れる
③ もし今ログインしているユーザーIDと投稿に紐ずくユーザーIDが同じなら処理できるようにする

前提としてfirebase authでの認証処理は実装済みでDBにはsupabaseを利用しているものとします。今回は簡単にTODOっぽいアプリで見ていきます。

1. firebase authで現在ログインしているユーザーのIDを取得

App.tsx

import React from 'react';
import { getAuth } from 'firebase/auth';

const App = () => {
  // firebase authで現在ログインしているユーザーのIDを取得
  const auth = getAuth();
  const currentUserId = auth.currentUser?.uid;

  return (
    {/* 省略 */}
  );
};

export default App;

2. TODOを追加する際に一緒に現在のユーザーidも入れる

TODOのタイトル、詳細と一緒にuser_idもDBに入れます。supabaseでの関数でいうと以下のようになるかと思います。

supabasefunctions.ts

export const addTodo = async (title:string,description: string,user_id: string) => {
    await supabase.from("TODO").insert({title,description,user_id})
}

3. もし今ログインしているユーザーIDとTODOに紐ずくユーザーIDが同じなら削除等のボタンを表示させる

先ほどのApp.jsxにTODOのコードを追加します。

App.tsx

import React from 'react';
import { getAuth } from 'firebase/auth';

const App = () => {
  const [todos, setTodos] = useState([]);
  
  // Firebase authで現在ログインしているユーザーのIDを取得
  const auth = getAuth();
  const currentUserId = auth.currentUser?.uid;

  // supabaseのDBからTODO表示、追加、削除の関数も記述(今回は省略)

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={todo.id}>
            <p>{todo.title}</p>: {todo.description}
            {/* todo追加の際のuser_idと現在ログインしているuser_idが同じなら
            　　　　　　　　削除ボタンを表示する */}
            {todo.userId === currentUserId && (
              <button 
                onClick={() => onClickDeleteTodo(todo.id)} 
              >
                削除
              </button>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

詳細にTODOアプリのコードを記述するとかなり長くなってしまうので、今回は省略しました。

おわりに

自分だけでなく複数のユーザーが使うアプリになると結構必要になる気がします。supabaseの認証機能もいつか使ってみたいです。