ファランクス by ponta

Supabase : ユーザー別データ , Googleログイン 認証

userとの紐づけ

supabase全般

      const user = await supabase.auth.getUser();
      const userId = user.data.user.id;

Googleコンソール : OAUTH設定

https://cloud.google.com/docs/authentication?hl=ja

Googleログインを使うには グーグルコンソールでOAUTHを設定

そしてsupabaseと紐づけ

ポリシー

テンプレートの「 Enable insert for users based on user_id 」を利用

insert も delete もできるようにしてあげないとユーザーがブラウザ上でデータをいじれない

uuid = user_id

user_id(という名称)はuuidを入れるフィールドなので任意でおk

auth.uid() にしないとログインユーザー以外のデータも表示されるのでUniqueを外す

Uniqueのままだと同一ユーザーが複数投稿できなくなる

何をしてもVercelでエラーになる場合

解決につながったコード :

const logign = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${location.origin}`,
      },
    });
    router.push("/dashboard");
  };

上記コードですべて直った

<Auth
              supabaseClient={supabase}
              providers={["google"]}
              redirectTo={`${getURL()}/auth/callback`}
              magicLink={true}
              appearance={{
                variables: {
                  default: {
                    colors: {
                      brand: "#404040",
                      brandAccent: "#52525b",
                    },
                  },
                },
              }}
            />
  • (import { Auth } from "@supabase/auth-ui-react";)

https://github.com/supabase/supabase/issues/15930

https://github.com/supabase/supabase-js/issues/811

解決につながったコード は上記スレッド内

上記は治った?

  • 普通の書き方で治ったぽい
  const logign = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: "/dashboard",
      },
    });
  };

問題点: supabase.co

アカウントの選択
「.supabase.co」に移動

プロジェクト識別子をサイト名に変更したい

← Go home