Next.js 在 SSR 中获取用户数据

Question

我很困惑如何通过 SSR 让当前用户获取一些用户数据。

我一直在使用带有 react 的上下文 API，并且它一直在工作，直到我需要 SSR 从 API 获取数据。我想获取当前的用户 id，以便获取存储在 Firestore 中的令牌。

Auth.js

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
}

SSR

export async function getStaticProps() {
  const api = {
    auth: "token",
  };

  //fetch api

  return {
    props: {
      data,
    },
  };
}

Answer 1

Firebase SDK 仅用于客户端，因此除非您设置 cookie，否则您将无法在服务器端获取当前用户。每当用户登录时，您都可以调用您的 API，该 API 将使用 Firebase Admin 创建一个 session cookie 并进行设置。

app.post('/sessionLogin', (req, res) => {
  const idToken = req.body.idToken.toString();
  const expiresIn = 60 * 60 * 24 * 5 * 1000;

  return admin
    .auth()
    .createSessionCookie(idToken, { expiresIn })
    .then(
      (sessionCookie) => {
        const options = { maxAge: expiresIn, httpOnly: true, secure: true };
        res.cookie('session', sessionCookie, options);
        res.end(JSON.stringify({ status: 'success' }));
      },
      (error) => {
        res.status(401).send('UNAUTHORIZED REQUEST!');
      }
    );
});

您可以读取getServerSideProps中的session cookie并验证它以获取用户的UID：

const decoded = await admin.auth().verifySessionCookie(sessionCookie)