对 Firebase 身份验证做出反应

Posted 2023-02-22

【中文标题】对 Firebase 身份验证做出反应

【英文标题】：React with Firebase authentication

【发布时间】：2019-01-11 21:40:27

【问题描述】：

我正在尝试设置对 firebase 身份验证的响应。

注册页面有问题。当我注释掉注册页面时，我的本地页面呈现没有任何问题。当我取消注释此页面时，我收到一条错误消息：

npm.js:341 Uncaught TypeError: Cannot read property 'app' of undefined
    at new hm (npm.js:341)
    at Object.<anonymous> (RegisterPage.js:12)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at Object.defineProperty.value (AppRouter.js:10)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at Object.<anonymous> (app.js:7)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at Object.<anonymous> (bundle.js:50999)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at module.exports (bootstrap 5a6a0f74168ebcba0a5a:62)

我已尝试在此代码沙箱中重新创建应用程序的最小部分：https://codesandbox.io/s/6w2r0267kk。但是，我在代码沙箱中收到错误消息：TypeError - 无法获取依赖项，请在几秒钟后重试：无法获取。每次出现这个错误大约需要2个小时，现在已经重复了3次。我不确定我在尝试使用该工具时是否做错了什么。

其他遇到与我相同的错误消息的人建议可能未正确定义“this”：Uncaught TypeError: Cannot read property 'app' of undefined

对我来说，该 const 分配在第 22 行。进一步搜索该查询行，人们注意到这是一个 ES5 表达式，应该针对 ES6 进行更新 - 然后引出一条推理路径，表明这不是'这是在 ES6 中使用的有用方法。我不确定试图弄清楚这一点是否是我寻求解决方案的过程的一部分。

当我只使用注册页面上的代码沙箱时，会显示从第 78 行开始的 return 语句中的语法错误，但我看不出有什么问题。

任何人都可以提供一些示例，说明如何在反应中开始使用 Firebase 身份验证（用户注册时带有待处理标志）。我自己没有编写这段代码，并且在最好的时候很难理解基础知识，所以我想试着把它当作一个学习练习，但如果它不是一个坚实的基础，那么我也很感激这个建议。

【问题讨论】：

您共享的代码都没有调用.app。你能分享错误的完整堆栈跟踪吗？我不确定您一直在使用什么代码沙箱。但如果它是类似 jsbin/stackblitz/glitch 的东西，那么如果您在此处分享指向该链接的链接可能会很有用，这样我们就可以看到完整的上下文。但总的来说：尝试通过在所谓的MCVE 中隔离问题来限制您要求我们消化的代码量（请阅读链接，因为它非常有用）。

谢谢。我现在会尝试重新写这篇文章。

【参考方案1】：

错误是因为您没有正确导出/导入 Firebase 身份验证对象。

打印在RegisterPage.js的第4行导入的auth变量，你会看到它是undefined：

import  firebase, auth  from "../../firebase/firebase";

检查路径是否正确，以及从firebase.js 导出的默认值是否具有auth 属性。

【讨论】：

感谢@Xander - 有人告诉我使用 firebase 来涵盖我使用的所有功能就足够了，事实证明，当我更改我的 firebase.js 导出语句以包含身份验证和数据库时，问题就消失了以及firebase：export firebase，auth，database；代码还是不行，不过感谢帮我解决这部分问题