## 前提

- 開発環境のsupabase環境はできている
- GCPでプロジェクトを作成している

## 方法

`/supabase/config.toml`で設定する

```toml
[auth.external.google]
enabled = true
client_id = YOUR_GOOGLE_CLIENT_ID
secret = YOUR_GOOGLE_SECRET
```

承認済みのリダイレクト URIは、`http://localhost:54321/auth/v1/callback`を指定する。

## 参考
- https://supabase.com/docs/guides/auth/auth-google
- https://github.com/supabase/supabase/discussions/2818

Supabase 開発環境でGoogleログイン

<h2>前提</h2>
<ul>
<li>開発環境のsupabase環境はできている</li>
<li>GCPでプロジェクトを作成している</li>
</ul>
<h2>方法</h2>
<p><code>/supabase/config.t...

## SQL

`gears`というテーブルに`updated_at`カラムを追加する。
追加時に現在時刻が入り、全てのROW更新時に自動的に`updated_at`に更新時刻が入るようにする。

```sql
ALTER TABLE IF EXISTS public.gears
    ADD COLUMN updated_at timestamp with time zone DEFAULT now();
create extension if not exists moddatetime schema extensions;
CREATE TRIGGER handle_updated_at
    BEFORE UPDATE 
    ON public.gears
    FOR EACH ROW
    EXECUTE FUNCTION extensions.moddatetime('updated_at');
```

http://localhost:54323/project/default/sql

のSQLエディタで実行する。

## Migration

```bash
# remote db と差分の確認
supabase commit changes
# migration の作成
supabase db commit add_updated_at_to_gears
# remote db に反映する
supabase db push
```

※remote dbが設定してあること

本当は、mainブランチにマージ時に実行するのが良いかもしれない。

## Error

```
Error: ERROR: must be owner of table genres (SQLSTATE 42501); while executing migration 20220622150744
```

`supabase db commit`時に権限のエラーが発生する場合は、

remote db で

```sql
ALTER ROLE postgres SUPERUSER
> success. No rows returned
```

を実行する。

実行した後は、

```sql
ALTER ROLE postgres NOSUPERUSER
> success. No rows returned
```

（で戻した方が良いかも？）

## 型の更新

openapiで型生成しているので、実行しておく。

```bash
npx openapi-typescript '${PROJECT_URL}/rest/v1/?apikey=${ANON_API_KEY}' --output types/supabase.ts
```

で更新しておく。


supabase updated_at カラムの追加

## publicURLを取得する関数を作る

```storage.ts
import { supabase } from "@/libs/supabaseClient";

interface Props {
  bucketName: string;
  fileName: string;
  defaultURL: string;
}

export async function fetchPublicURL({
  bucketName,
  fileName,
  defaultURL,
}: Props): Promise<string> {
  if (!fileName) {
    return defaultURL;
  }
  const { data, error } = supabase.storage
    .from(bucketName)
    .getPublicUrl(fileName);

  if (error) {
    return defaultURL;
  }
  return data?.publicURL ?? defaultURL;
}
```

## 呼び出し

```tsx
  const ogpImage = await fetchPublicURL({
    bucketName: "gears",
    fileName: gear?.image || "",
    defaultURL: "/images/ogp.png",
  });
```

## 確認

![image](//images.ctfassets.net/0jyj5pjwic68/kFe7AhKJ8VY4cwu7rlwiR/6a89a768d7f6691c4463d1e3cbbcebc3/image.png)

Supabase 開発環境でGoogleログイン

前提

方法

参考

Related

Tags

Share

Table of Contents