Готово и вычищено всего за 4 шага.

Под капотом

Supabase — это альтернатива Firebase с открытым исходным кодом. Я уже рассказывал историю с кратким введением в Supabase, которое вы можете прочитать здесь. В сегодняшней истории, как и было обещано, мы рассмотрим часть аутентификации, предоставленную Supabase.

Начиная

Аутентификация с использованием Supabase почти не отличается от аутентификации с использованием Firebase. Как и в случае с Firebase, мы также инициализируем экземпляр Supabase, указав URL-адрес нашего проекта Supabase и ключ проекта.

Чтобы получить учетные данные вашего проекта, сначала вам нужно создать проект или базу данных на панели инструментов Supabase. Когда база данных будет готова к использованию, перейдите на страницу настроек в нижней левой боковой панели, где в разделе конфигурации вы найдете все свои учетные данные. Сохраните учетные данные, так как они понадобятся нам для инициализации экземпляра Supabase. Давайте начнем вечеринку и выполним 5 шагов, чтобы добавить аутентификацию Google.

Локальная установка Supabase

Точно так же, как Firebase и другие третьи стороны предоставляют модули npm, Supabase можно установить локально в репозиторий с помощью модуля npm.

yarn add @supabase/supabase-js

После установки мы готовы инициализировать или подключить наш интерфейс к нашему проекту Supabase.

Подключение фронтенда к Supabase

Каждый проект Supabase имеет свой уникальный URL проекта и ключ проекта. Эти ключи важны для идентификации пользователя и подключения панели инструментов Supabase или проекта к внешнему репозиторию.

import { createClient } from "@supabase/supabase-js";
export const supabaseApp = createClient(YOUR_SUPABASE_DATABSE_URL, YOUR_SUPABASE_KEY);
// you can store the YOUR_SUPABASE_DATABSE_URL & YOUR_SUPABASE_KEY in env files

Наш клиент Supabase теперь подключен к панели управления проекта, чтобы подтвердить один раз, supabaseApp и просмотреть детали, совпадающие с информацией на панели инструментов.

Добавление учетных данных Google в Supabase Dashboard

В разделе «Аутентификация» на панели инструментов Supabase немного прокрутите вниз и включите метод подписи Google. После включения он покажет идентификатор клиента и форму ввода секрета клиента.

  • Это даст вам идентификатор клиента Google и секрет клиента Google, а взамен попросит вас указать URL-адрес и URL-адрес перенаправления.
  • URL-адрес всегда будет конечной точкой, на которой размещен интерфейс или к которому осуществляется доступ. Например, для целей тестирования ваш URL-адрес будет http://localhost:3000, а для перенаправления добавьте этот суффикс http://{YOUR_SUPABASE_PROJECT_URL}/auth/v1/callback к URL-адресу вашего проекта.

Для подробного понимания и шагов по добавлению идентификатора и секрета клиента Google прочитайте инструкции на https://supabase.io/docs/guides/auth/auth-google.

Добавление аутентификации в интерфейсе

Теперь вступает в игру кульминационная часть, нам просто нужно добавить несколько строк кода на стороне клиента и войти в систему с помощью кнопки Google, чтобы завершить задачу.

const login = () => {
 const { users, error } = await supabaseApp.auth.signIn({
   provider: 'google'
 });
};

Вы будете шокированы, прочитав код. Буквально, эта большая строка кода поможет вам добавить аутентификацию Google, это как легкая прогулка.

Мне больше нечего описывать, пользователь может управлять остальными вещами, связанными с аутентификацией пользователей, самостоятельно.

Просмотр аутентифицированных пользователей в панели управления проекта

Аутентифицированные пользователи добавляются в таблицу аутентификации. Добравшись туда, вы можете просмотреть таблицу пользователя, содержащую столбцы UID пользователя, электронной почты, телефона, провайдера и так далее. Каждый пользователь идентифицируется с помощью UID только во всем проекте Supabase.

Заключение

Всего за 4 шага вы можете добавить аутентификацию Google, широко используемый механизм аутентификации, в свой проект. В следующий раз мы расскажем о новых историях о добавлении GitHub и другой сторонней аутентификации только с использованием Supabase. До следующего раза, хорошего дня, люди!

For more such stories visit our website - 💻 iHateReading

Дополнительные материалы на plainenglish.io