1

Тема: Secret data for supabase in frontend section

Роблю проект ReactChat. Є частина для BackEnd та FrontEnd
На фронтенді є файл з даними, які потрібно сховати - supabaseUrl, supabaseKey.

/* eslint-disable no-unused-vars */
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = "мій url";
const supabaseKey = "мій секретний ключ";
const supabase = createClient(supabaseUrl, supabaseKey);
export const uploadToSupabase = async (file) => {
    const fileName = `${Date.now()}_${file.name}`;
    // Determine the MIME type of the file
    const contentType = file.type || "application/octet-stream"; // Default to binary stream if no type is found
    const { data, error } = await supabase.storage
        .from("chat")
        .upload(fileName, file, {
            upsert: false,
            cacheControl: "3600",
            contentType, // Set content type explicitly
        });
    if (error) {
        throw new Error("Error uploading file: " + error.message);
    }
    const urlData = supabase.storage.from("chat").getPublicUrl(fileName);
    return urlData?.data?.publicUrl; // Return the public URL of the uploaded file
};

Як правильно зробити? На беку є config.env, де зберігаються всі секретні дані. Потрібно занести секретні дані supabase у цей файл. А що далі? Як потім ці дані витягнути з бекенду і використати у фронтенді у файлі supabase.js? Чи можна підключати dotenv і використовувати config.env на фронтенді? Я так розумію що на фронті цього краще не робити і це не правильно.

це дані з config.env на backend:

PORT=8000
API_PORT=5000
MONGO_URI=мої дані
TOKEN_KEY=мої дані
NODEMAILER_APP_PASSWORD=мої дані
NODEMAILER_USER=мої дані

Тут мій проект -> https://github.com/SashaMaksyutenko/ReactChat2025

2 Востаннє редагувалося mikeos (31.01.2025 21:11:20)

Re: Secret data for supabase in frontend section

Ніколи не працював з supabase, але в них в документації є про api keys:
https://supabase.com/docs/guides/api/api-keys

Є два api key - anon i service_role
Ключ anon - не є секюрним, так само як і supabase url, тому їх можна зберігати на фронтенді, як показано в них в прикладі:

const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");

А потім можна робити аутентифікацію яка поверне якийсь jwt токен і решта запитів буде йти з тим токен.

Але це приклад роботи з supabase без бекенду.
А якшо у вас є бекенд, то тоді фронтеду не обовзяково знати про супабейз.
На бекенді зробити апі для свого фронтеду, фронтенд буде визивати апі бекенду а бекенд буде взаємодіяти з супабейз.

3

Re: Secret data for supabase in frontend section

І раджу використовувати якийсь форматер коду типу prettier або самому старатись трохи форматувати, бо дуже важко читати - жодного розділяючого порожнього рядка ))

4

Re: Secret data for supabase in frontend section

Такі зміни я зробив:
1. Додав роут backend/routes/index.js ->

const router = require('express').Router();
const authRoute = require('./auth');
const userRoute = require('./user');
const configRoute = require('./config');
router.use('/auth', authRoute);
router.use('/user', userRoute);
router.use('/config', configRoute); // added this line
module.exports = router

2. створив config.js y backend/routes/config.js

const express = require('express');
const dotenv = require('dotenv');
dotenv.config({ path: './config.env' });
const router = express.Router();
router.get('/supabase', (req, res) => {
    res.json({
        supabaseUrl: process.env.SUPABASE_URL,
        supabaseKey: process.env.SUPABASE_KEY,
    });
});
module.exports = router; 

3. Додав секретні дані для supabase у config.env на backend

backend/config.env -> PORT=8000
API_PORT=5000
MONGO_URI=мої дані
TOKEN_KEY=мої дані
NODEMAILER_APP_PASSWORD=мої дані 
NODEMAILER_USER=sasha.maksyutenko@gmail.com
SUPABASE_URL=мої дані
SUPABASE_KEY=мої дані

4. зробив деякі зміни у supabase на frontend

import { createClient } from "@supabase/supabase-js";
let supabaseUrl = '';
let supabaseKey = '';
async function fetchConfig() {
    const response = await fetch('/api/config/supabase');
    const config = await response.json();
    supabaseUrl = config.supabaseUrl;
    supabaseKey = config.supabaseKey;
}
await fetchConfig();
const supabase = createClient(supabaseUrl, supabaseKey);
export const uploadToSupabase = async (file) => {
    const fileName = `${Date.now()}_${file.name}`;
    // Determine the MIME type of the file
    const contentType = file.type || "application/octet-stream"; // Default to binary stream if no type is found
    const { data, error } = await supabase.storage
        .from("chat")
        .upload(fileName, file, {
            upsert: false,
            cacheControl: "3600",
            contentType, // Set content type explicitly
        });
    if (error) {
        throw new Error("Error uploading file: " + error.message);
    }
    const urlData = supabase.storage.from("chat").getPublicUrl(fileName);
    return urlData?.data?.publicUrl; // Return the public URL of the uploaded file
};
export default supabase;

5

Re: Secret data for supabase in frontend section

якщо supabase_key і supabase_url - це секретні дані, то в даному випадку вони стають зовсім не секретні, тому що їх можна просто отримати по урл .../supabase

Подякували: leofun011

6 Востаннє редагувалося sasha87 (01.02.2025 15:19:41)

Re: Secret data for supabase in frontend section

https://replace.org.ua/uploads/images/10138/a416457a6a0586f408a587765ec70437.jpg

Ось ці ключі. А як тоді їх сховати? Можливо їх і не треба ховати?

7 Востаннє редагувалося mikeos (02.02.2025 03:30:15)

Re: Secret data for supabase in frontend section

Ну тут пише "this key is safe to use in browser if you have enabled...". Значить можна і не ховати якщо правильно налаштовано.

Але якщо треба заховати, і якщо є бекенд то роботу з супабейз перенести на бекенд. Інакше треба правильно налаштувати цей публічний ключ, а для якихось захищених операції з супабейз які наприклад залежать від залогіненого користувача потрібно робити авторизації в супабейз.
Подивитись в документацію supabase-js.

8

Re: Secret data for supabase in frontend section

Остатачоний варіант додатку: https://github.com/SashaMaksyutenko/ReactChat2025.
Цікавить думка відносно цього додатку - що пофіксити, де є баги і на якому рівні написаний проект що і де можна було б покращити?  MONGO_URI=мої дані, TOKEN_KEY=мої дані, NODEMAILER_APP_PASSWORD=мої дані, NODEMAILER_USER=моя пошта, VITE_SUPABASE_URL=мої дані
VITE_SUPABASE_KEY=мої дані. Можу надати свої дані з конфігурації , якщо комусь буде цікаво потестити.

9

Re: Secret data for supabase in frontend section

Я так розумію для роботи з тим чатом користувач потрібен авторизуватись?
Функція uploadToSupabase ніяк не залежить від залогіненого користувача, немає авторизації для supabase.
Тобто, знаючи supabase url і key, можна генерувати реквести які робляться в тій функції поза межами цього чату. Наприклад можна написати скрипт який буде безкінечно слати якісь файли  :)

10

Re: Secret data for supabase in frontend section

Так, треба авторизуватись. Я вперше маю справу з Supabase. І передача файлів не працює