🔐 Auth0 + Google OAuth (Netlify) — Setup Guide

Цей репозиторій публікується як статичний сайт на Netlify, з «закритим доступом» через Auth0 + Google OAuth.

Важливо: поточна реалізація client-side gate (оверлей/логін на фронті). Це не повноцінний server-side захист (контент HTML фізично віддається браузеру). Для домашніх/приватних матеріалів цього зазвичай достатньо; якщо потрібен реальний захист — потрібно робити server-side gating.

1) Створити Auth0 tenant

1. Перейти на https://auth0.com
2. Sign up / Log in
3. Створити Tenant (будь-яка назва)

2) Створити Auth0 Application

Auth0 Dashboard → Applications → Applications → Create Application

• Name: Bernina Video
• Type: Single Page Web Applications

У Settings скопіювати:

• Domain (наприклад: example.eu.auth0.com)
• Client ID

3) Налаштувати Callback / Logout / Origins

У Application Settings → Application URIs:

Allowed Callback URLs:

• http://localhost:3000
• https://YOUR-NETLIFY-SITE.netlify.app

Allowed Logout URLs:

• http://localhost:3000
• https://YOUR-NETLIFY-SITE.netlify.app

Allowed Web Origins:

• http://localhost:3000
• https://YOUR-NETLIFY-SITE.netlify.app

Примітка: YOUR-NETLIFY-SITE — це домен твого Netlify сайту.

4) Увімкнути Google OAuth у Auth0

4.1 Створити Google OAuth credentials

Google Cloud Console → APIs & Services → Credentials:

• Configure Consent Screen (External)
• Створити OAuth Client ID (Web application)
• Authorized redirect URI:
  • https://YOUR-TENANT.auth0.com/login/callback

Скопіювати Client ID + Client Secret.

4.2 Додати Google connection в Auth0

Auth0 Dashboard → Authentication → Social → Create Connection → Google

• вставити Client ID/Secret
• permissions: email, profile
• увімкнути connection для твого Application

5) Обмежити доступ (Email whitelist) — рекомендовано

Auth0 Dashboard → Actions → Flows → Login → додати Custom Action.

Приклад (мінімальний):

exports.onExecutePostLogin = async (event, api) => {
  const whitelist = [
    'your-email@gmail.com',
    'friend1@gmail.com'
  ];

  const userEmail = (event.user.email || '').toLowerCase();
  if (!whitelist.includes(userEmail)) {
    api.access.deny(`Access denied for ${userEmail}`);
  }
};

6) Вписати Auth0 Domain + Client ID у сайт

Відкрити auth0-config.js і замінити:

• YOUR_AUTH0_DOMAIN
• YOUR_AUTH0_CLIENT_ID

Файл не містить секретів — його можна комітити.

7) Деплой на Netlify

1. Netlify → Add new site → Import from Git
2. Обрати репозиторій bernina-video
3. Build command: empty
4. Publish directory: .

netlify.toml уже налаштований:

[build]
  publish = "."

8) Локальний тест

Підняти простий сервер:

python3 -m http.server 3000

Відкрити http://localhost:3000 і протестувати логін.