Вопрос или проблема
Первый раз работаю с firebase auth. У меня настроен минимальный пример (показан ниже), и эмулятор аутентификации запущен и работает.
Когда я вызываю signInWithRedirect с провайдером Google Auth, я получаю сообщение:
“В эмуляторе аутентификации нет учетных записей Google.com” и возможность создать новую учетную запись с фиктивными данными. Независимо от того, что я ввожу в эту форму, имеет ли фиктивная учетная запись адрес @gmail.com или нет, вход, похоже, не происходит, и учетная запись не отображается в интерфейсе эмулятора аутентификации.
Более того, учетные записи, которые я ввожу в интерфейсе эмулятора аутентификации (которые требуют, чтобы я добавил пароль или номер телефона, что заставляет меня думать, что они не будут работать с провайдером Google Auth), не отображаются в качестве опций в моем приложении.
Я подтвердил, что:
- моя конфигурация firebase правильная
- эмулятор работает на порту 9099
- в этом процессе не возникает ошибок
Я подозреваю, что у меня есть основное недопонимание того, как должен работать auth/emulator/provider, но что мне делать дальше?
Код:
//firebase.js
const app = initializeApp(firebaseConfig); //конфигурация не показана, она правильная
export const auth = getAuth();
export const provider = new GoogleAuthProvider();
if (process.env.NODE_ENV === "development") {
connectAuthEmulator(auth, "http://127.0.0.1:9099");
}
export default app;
//app.js
import app, { auth, provider } from "./firebase";
import { useEffect, useState } from "react";
function App() {
const [user, setUser] = useState(null);
const handleSignIn = (e) => {
e.preventDefault();
signInWithRedirect(auth, provider)
.then((result) => {
console.log(result);
setUser(result.user);
})
.catch((e) => console.log(e));
};
useEffect(() => {
if (!user) {
getRedirectResult(getAuth()) //пробовал это и с auth, не был на 100% уверен, нужно ли обновлять объект здесь)
.then((result) => console.log(result))
.catch((error) => console.log(error));
}
}, [user]);
return (
<div className="App">
{user ? (
<div>Здравствуйте, {user.name}</div>
) : (
<div>
Пожалуйста, войдите:{" "}
<button onClick={handleSignIn}>Войти с помощью Google</button>
</div>
)}
</div>
);
}
Ответ или решение
Ваш вопрос о проблеме с аутентификацией Google в эмуляторе Firebase – это довольно распространенная ситуация для разработчиков, начинающих работу с Firebase. Давайте подробно разберем ситуацию и предложим решения, которые помогут вам правильно настроить работу с аутентификацией.
Проблема
Вы получаете сообщение об ошибке: "No Google.com accounts exist in the Auth Emulator", когда пытаетесь выполнить вход в аккаунт Google через эмулятор Firebase. Это может происходить по нескольким причинам, а именно:
- Эмулятор аутентификации Firebase не поддерживает все функции, предлагаемые реальным сервисом аутентификации, включая аутентификацию через социальные сетевые аккаунты, такие как Google, без предварительной настройки учетных записей.
- Вы можете не создавать учетные записи Google в эмуляторе должным образом.
Решения
1. Создание тестовой учетной записи Google
Первый шаг к решению вашей проблемы – это создание тестовой учетной записи Google в аутентификаторе Firebase. Чтобы это сделать, вы можете воспользоваться интерфейсом эмулятора, который позволяет добавлять учетные записи. Однако важно отметить, что для аутентификации через Google, эта учетная запись должна иметь соответствующий формат. Убедитесь, что вы создаете учетную запись с правильным email (@gmail.com или другой домен).
Для этого, выполните следующее:
- Зайдите в интерфейс эмулятора (обычно доступен по адресу
http://localhost:9099). - Перейдите в раздел "Authentication".
- Используйте кнопку "Add user" для создания новой учетной записи, указывая действительный адрес электронной почты и пароль.
2. Проверка кода
Обратите внимание на ваш код. Он в целом выглядит правильно, но есть несколько моментов, которые можно улучшить или проверить:
-
Убедитесь, что вы импортировали необходимые функции из Firebase:
import { initializeApp } from 'firebase/app'; import { getAuth, signInWithRedirect, getRedirectResult, connectAuthEmulator, GoogleAuthProvider } from 'firebase/auth'; -
Проверьте использование функции
getRedirectResult. Необходимо убедиться, что вы вызываете эту функцию в нужный момент вашего приложения, то есть после того, как происходит редирект.
3. Использование эмулятора правильно
Важно понимать, что эмулятор Firebase ведет себя иначе, чем продакшен-версии. Обратите внимание на следующие моменты:
- Эмулятор должен быть запущен перед тем, как вы выполните запросы к аутентификации.
- Вместо перехода через редирект для входа в аккаунт Google вы можете рассмотреть возможность использования метода
signInWithPopup, который может быть более предсказуемым для использования в условиях локальной разработки.
Например, если вы хотите пройти аутентификацию через signInWithPopup, обновите ваш обработчик:
const handleSignIn = (e) => {
e.preventDefault();
signInWithPopup(auth, provider)
.then((result) => {
console.log(result);
setUser(result.user);
})
.catch((error) => {
console.log(error);
});
};Теперь, если все сделано правильно, вы должны увидеть учетную запись создавшуюся в эмуляторе после успешного входа.
Заключение
Операции с аутентификацией в Firebase могут быть сложными для новичков, особенно когда вы работаете с эмуляторами. Следуйте шага за шагом, и если вы завершите нахождение аккаунта через интерфейс эмулятора или измените методы аутентификации, это должно решить ваши проблемы. Если у вас все еще остаются вопросы или возникают дополнительные сложности, рассмотрите возможность обращения к официальной документации Firebase или сообществу разработчиков за дополнительной поддержкой.