Аутентификация Firebase в Nextjs с серверными компонентами

пожалуйста, пройдите ниже

вот так типичная конфигурация. файл выглядит как

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

вы, должно быть, беспокоитесь в основном о том, чтобы открыть общедоступный ключ API. поэтому прочитайте об этом ниже.

(ссылка api-keys#general-info)

Ключи API для Firebase отличаются от типичных ключей API.

В отличие от обычного использования ключей API, ключи API для сервисов Firebase не используются для контроля доступа к серверным ресурсам; это может быть только сделано с помощью правил безопасности Firebase (чтобы контролировать, какие пользователи могут получить доступ ресурсы) и Проверка приложений (чтобы контролировать, какие приложения могут получать доступ к ресурсам).

Обычно вам необходимо тщательно охранять ключи API (например, с помощью использование службы хранилища или установка ключей в качестве переменных среды); однако ключи API для сервисов Firebase можно включать в код или зарегистрированные файлы конфигурации.

Хотя ключи API для сервисов Firebase можно безопасно включать в код, есть несколько конкретных случаев, когда вам следует установить ограничения для вашего API-ключ; например, если вы используете Firebase ML, Firebase Аутентификация с использованием метода входа по электронной почте/паролю или с использованием оплачиваемого метода входа. Google Cloud API. Подробнее об этих случаях читайте далее на этой странице.

также пройдите безопасно ли выставлять Firebase-apikey на всеобщее обозрение

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

например :

для входа в систему с Google:

const signInWithGoogle = async () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  await firebase.auth().signInWithPopup(provider);
};

теперь с целью убедиться в статусе аутентификации пользователя (как вы подчеркнули). Вы можете использовать состояния подписки для изменений аутентификации. Чтобы подписаться на изменения аутентификации, выполните следующие действия:

Перейдите к файлу src/comComponents/Header.jsx. Замените функцию useUserSession следующим кодом:

function useUserSession(initialUser) {
        // The initialUser comes from the server through a server component
        const [user, setUser] = useState(initialUser);
        const router = useRouter();

        useEffect(() => {
                const unsubscribe = onAuthStateChanged(authUser => {
                        setUser(authUser);
                });
                return () => {
                        unsubscribe();
                };
        }, []);

        useEffect(() => {
                onAuthStateChanged(authUser => {
                        if (user === undefined) return;
                        if (user?.email !== authUser?.email) {
                                router.refresh();
                        }
                });
        }, [user]);

        return user;
}

для более подробной информации посетите ссылку: firebase-nextjs#5