google 和 firebase 的 React Native expo auth-session 实现的问题

Question

非常感谢您检查这个。

所以，这个错误在过去几天里成功地激怒了我。错误在于，每当 expo-auth-session => 这个钩子时，调用 const [request、response、promptAsync] = Google.useIdTokenAuthRequest 时，它会给出这个模糊且不太有用的 错误：[错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因之一可能是：

为了向您提供有关此问题的更多详细信息，我们有一个 AuthProvider：

import React, {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
import * as Google from "expo-auth-session/providers/google";
import * as WebBrowser from "expo-web-browser";
import {
  GoogleAuthProvider,
  onAuthStateChanged,
  signInWithCredential,
  signOut,
} from "@firebase/auth";

import { auth } from "../firebase";

const AuthContext = createContext({});


export default function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  // const [message, setMessage] = useState();
  // const [acessToken, setAccessToken] = useState();
  // const [request, response, promptAsync] = Google.useAuthRpnaapequest(config);

  async function signInWithGoogle() {
    console.log("@signInWithGoogle");

    WebBrowser.maybeCompleteAuthSession();
    console.log("In google accessing");

    // console.log(config);

    try {
      console.log("At try block");

      const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
        androidClientId:
          "95092903-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      });

      console.log("request: ", JSON.stringify(request));
      console.log("response: ", JSON.stringify(response));
    } catch (error) {
      console.log("error: ", error);
    }
  }

  return (
    <AuthContext.Provider
      value={{
        user,
        signInWithGoogle,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

它用于将所有内容包裹在其周围，如下所示：

import React from "react";
import Navigation from "./navigation";
import AuthProvider from "./hooks/useAuth";

export default function App() {
  console.log("We are in the app now");

  return (
    <AuthProvider>
      <Navigation />
    </AuthProvider>
  );
}

然后在登录屏幕中调用 signInWithGoogle()，如下所示：

import { View, Text, Button, TouchableOpacity } from "react-native";
import React from "react";
import { useAuth } from "../hooks/useAuth";

const LoginScreen = ({ navigation }) => {
  const { user, signInWithGoogle } = useAuth();

  console.log(user);
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
      }}
    >
      <TouchableOpacity
        style={{ marginTop: 40, width: "70%", height: "10%" }}
        onPress={signInWithGoogle}
      >
        <View
          style={{
            width: "100%",
            height: "80%",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#0bcc82",
          }}
        >
          <Text style={{ fontSize: 22 }}>Get In</Text>
        </View>
      </TouchableOpacity>
    
    </View>
  );
};

export default LoginScreen;

这就是控制台日志对于这段代码的信息：

@signInWithGoogle
In google accessing
At try block
error:  [Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   

是的，类似问题的每一个部分和每一个细节都被吞噬了。他们中没有人给出哪怕一点点的暗示。我已经做了一切可能的事情来解决这个问题。我最后的避难所就是这里！

您能为这位新手编码员提供一些见解吗？或者你知道有什么办法摆脱这个吗？

Answer 1

google.useidtokenauthrequest是一个react钩子，因此不能有条件地调用，并且在组件的渲染过程中应始终调用。查看钩子的规则： https：//reactjs.s.s.org/docs/hooks-rules.htmlles.html 。

将其移至顶部，这样：

export default function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
        androidClientId:
          "95092903-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      });
   // ...
}

函数google.useidtokenauthrequest并没有真正执行任何操作，它只是准备以后执行。您现在可能会遇到其他错误，因为您正在尝试做的非常复杂，但这是对无效挂钩通话问题的答案。