Estoy tratando de crear un token personalizado para que los usuarios inicien sesión con su nombre de usuario. Revisé parte de la documentación https://firebase.google.com/docs/auth/admin/create-custom-tokens#web , que se me vinculó a través de Cómo proporcionar un inicio de sesión de usuario con un nombre de usuario y NO un ¿Email? , y he visto que necesito agregar
Crea tokens personalizados con el SDK de administración de Firebase
y
Inicie sesión con tokens personalizados en los clientes
Por el momento, puedo ver qué debe incluirse según la documentación, pero no estoy seguro de dónde iría esto en el código fuente. ¿Dónde agrego el código de la documentación? Este es el código fuente del archivo userUser.js, en caso de que sirva de ayuda.
import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import firebase from "firebase/app"; import "firebase/auth"; import initFirebase from "../../config"; import { removeUserCookie, setUserCookie, getUserFromCookie, } from "./userCookie"; initFirebase(); export const mapUserData = async (user) => { const { uid, email } = user; const token = await user.getIdToken(true); return { id: uid, email, token, }; }; const useUser = () => { const [user, setUser] = useState(); const router = useRouter(); // this is most likely where the custom token for // username goes const logout = async () => { return firebase .auth() .signOut() .then(() => { router.push("/"); }) .catch((e) => { console.error(e); }); }; useEffect(() => { const cancelAuthListener = firebase .auth() .onIdTokenChanged(async (userToken) => { if (userToken) { const userData = await mapUserData(userToken); setUserCookie(userData); setUser(userData); } else { removeUserCookie(); setUser(); } }); const userFromCookie = getUserFromCookie(); if (!userFromCookie) { return; } setUser(userFromCookie); return () => cancelAuthListener; }, []); return { user, logout }; }; export { useUser };Cualquier ayuda sería muy apreciada.
Solo puede usar el SDK de administrador en un entorno de servidor (como en Firebase Functions o algún otro servidor); no puede usarlo en el entorno del cliente donde está usando React. Conceptualmente, la forma en que esto funciona es:
Entonces se vería así (nota: no manejo ningún error aquí, pero querrás hacerlo):
// client.js const sendToServer = (username, password) => { // Step 1 - client sends the username/password to the cloud function return axios.post(`${myCloudFunctionUrl}/login`, { username, password }).then((response) => { // Step 5 - the client logs the user in with the custom token return firebase.auth().signInWithCustomToken(response.data.token) }).then(() => { // Step 6 - the user is now logged in and redirected to the dashboard router.push("/dashboard") }) } // server.js (using Firebase Functions, but use whatever back end you want) exports.login = functions.https.onRequest((req, res) => { const {username, password} = req.body // Step 2 - function verifies the username and password and gets the user's uid for the custom token return verifyUserInDatabase(username, password).then((uid) => { // Step 3 - the server creates a custom token return admin.auth().createCustomToken(uid) }).then((token) => { // Step 4 - the server sends the token back in its response res.json({ token }) }) })