在 Next JS 中哪里包含 Firebase 身份验证 pre-made UI？

Question

我是 React 和 NextJS 的新手，但我想为我的 NextJS Web 应用程序使用一些身份验证服务来管理用户帐户。

我想使用我们都知道和喜爱的 pre-made 用户登录，它包含一个一体化的解决方案，可以使用 Google、Facebook、Github、电子邮件登录等

我遵循的说明：

但是我在如何将这段代码集成到我自己的 NextJS 代码中遇到了问题。我不确定在哪里放置某些标签。这是我想模拟的代码片段，它创建一个配置并在 ui.start() 中传递 object（我不确定将 NextJS 放在哪里）：

<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample FirebaseUI App</title>
    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth-compat.js"></script>
    <!-- *******************************************************************************************
       * TODO(DEVELOPER): Paste the initialization snippet from this dialog box:
       * Firebase Console > Project Settings > Add App > Web.
       ***************************************************************************************** -->
    <script type="text/javascript">
      // FirebaseUI config.
      var uiConfig = {
        signInSuccessUrl: '/',
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          firebase.auth.GoogleAuthProvider.PROVIDER_ID
        ],
        // tosUrl and privacyPolicyUrl accept either url string or a callback
        // function.
        // Terms of service url/callback.
        tosUrl: '/',
        // Privacy policy url/callback.
        privacyPolicyUrl: '/'
        }
      };

      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // The start method will wait until the DOM is loaded.
      ui.start('#firebaseui-auth-container', uiConfig);
    </script>
  </head>
  <body>
    <!-- The surrounding HTML is left untouched by FirebaseUI.
         Your app may use that space for branding, controls and other customizations.-->
    <h1>Welcome to My Awesome App</h1>
    <div id="firebaseui-auth-container"></div>
  </body>
</html>

这就是我试图将代码片段集成到我的 NextJS 中的方法：

LoggedIn.js

import Box from '@mui/material/Box'
import {
  GoogleAuthProvider,
  getAuth } from 'firebase/auth'
import app from '../firebase'
import * as firebaseui from 'firebaseui'
import firebase from 'firebase/app'

export default function LoggedIn() {

  return (
    <>
    <script>
      var uiConfig = {
        signInSuccessUrl: '/sandbox/login/signup',
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          GoogleAuthProvider.PROVIDER_ID
          // FacebookAuthProvider.PROVIDER_ID
        ],
        tosUrl: '/',
        privacyPolicyUrl: '/'
      }

      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth())
      // The start method will wait until the DOM is loaded.
      ui.start('#firebaseui-auth-container', uiConfig)
    </script>
    <Box>
      <h1>Welcome to My Awesome App</h1>
      <Box id="firebaseui-auth-container"></Box>
    </Box>
    </>
  )
}

我试过了

在网上查看了一些解决方案，但它们对我来说没有意义，或者与我的设置略有不同

https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97

Answer 1

这个太难了，我发现了StyledFirebaseAuth

这使我的应用程序按预期工作。

import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth"

在 Next JS 中哪里包含 Firebase 身份验证 pre-made UI？

Where to include Firebase authentication pre-made UI in Next JS?

javascript

reactjs

firebase-authentication

firebaseui

next.js

LoggedIn.js

我试过了