How to Implement Google Incremental Authorization Using Supabase

3 Березня 2024 в 14:13 85

Щоб реалізувати Google Incremental Authorization за допомогою Supabase у вашому додатку на next.js, який використовує supabase і google oauth, вам потрібно додати можливість отримання додаткового обсягу (scope) після входу користувача.

Уявімо, у вас є сторінка входу, де ви вже використовуєте Supabase для аутентифікації через Google:

const handleSignIn = async () => {
  const supabase = supabaseBrowser();
  const { error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: "http://localhost:3000/dashboard"
    },
  });
  if (error) {
    console.error(error);
  }
};

const handleSignIn = async () => {

const supabase = supabaseBrowser();

const { error } = await supabase.auth.signInWithOAuth({

provider: "google",

options: {

redirectTo: "http://localhost:3000/dashboard"

});

if (error) {

console.error(error);

}

};

Тепер, якщо ви хочете отримати додатковий обсяг доступу після входу користувача, вам потрібно створити кнопку на сторінці панелі інструментів (dashboard page), яка дозволить вам це зробити. Для цього вам потрібно:

1. Створіть кнопку на вашій сторінці панелі інструментів, яка буде тригерити запит на отримання додаткового обсягу доступу (scope).

2. Додаємо логіку для отримання додаткового обсягу доступу:

const handleGetEmailScope = async () => {
  const supabase = supabaseBrowser();
  const { error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: "http://localhost:3000/dashboard",
      scopes: ["https://www.googleapis.com/auth/gmail.readonly"]
    },
  });
  if (error) {
    console.error(error);
  }
};

const handleGetEmailScope = async () => {

const supabase = supabaseBrowser();

const { error } = await supabase.auth.signInWithOAuth({

provider: "google",

options: {

redirectTo: "http://localhost:3000/dashboard",

scopes: ["https://www.googleapis.com/auth/gmail.readonly"]

});

if (error) {

console.error(error);

}

};

Це буде виглядати як кнопка на вашій сторінці панелі інструментів:

<button onclick="handleGetEmailScope()">Get Email Scope</button>

1	<button onclick="handleGetEmailScope()">Get Email Scope</button>

При кліку на цю кнопку користувач буде перенаправлений на сторінку Google для підтвердження додаткового обсягу доступу для вашого додатку.

Тепер, коли ви натискаєте цю кнопку на вашій сторінці панелі інструментів, Google OAuth буде проінформований про те, що ваш додаток тепер потребує додаткового обсягу доступу для зчитування електронних листів користувача.