Next JS 使用魔法登录，在从电子邮件登录重定向后尝试抓取路由器

Question

我在 javascript 和 next js 中使用魔术登录将用户添加到我的应用程序，它工作得很好，但我遇到的问题是。 当用户返回页面时，我必须手动刷新页面以获取我的数据。 我曾尝试检查 url 参数，并重新加载它是否存在，然后更改更改 url 以不包含 url 参数，因此它不会循环。

但是在从魔术登录发送的电子邮件中单击登录按钮后，甚至找不到路由器。

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { gql, useQuery } from "@apollo/client";
import useSWR from "swr";
import { useEffect } from "react";
import Layout from "../components/layout";
import { useRouter } from "next/router";

export const GET_DAD_HAT = gql`
  query FindUserByID($id: ID!) {
    findUserByID(id: $id) {
      _id
      hats {
        data {
          name
        }
      }
    }
  }
`;

const fetcher = (url) => fetch(url).then((r) => r.json());

function useAuth() {
  const { data: user, error, mutate } = useSWR("/api/user", fetcher);

  const loading = user?.token === false || user === undefined;

  return {
    user,
    loading,
    error,
  };
}

export default function Profile() {
  const { user, loading } = useAuth();

  const router = useRouter();

  useEffect(() => {
    console.log("window", window);
    console.log(Object.keys(router.query)[0]);
    if (Object.keys(router.query)[0] === "magic_credentials") {
      router.reload(window.location.pathname);
      window.history.pushState({}, document.title, "/" + "profile");
    }
    if (loading) {
    }
  }, []);

  return (
    <Layout>
      <main>{loading ? "Loading..." : <Data user={user} />}</main>
    </Layout>
  );
}

const Data = ({ user }) => {
  const { loading, error, data } = useQuery(GET_DAD_HAT, {
    variables: { id: user.id },
  });

  if (loading) return <h1>Loading...</h1>;

  if (error) return <h1>{error.message}</h1>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

发生的情况是数据只是停留在加载中，直到我从电子邮件登录流程重定向到应用程序后手动点击刷新。

更新：我制作了一个可重现的沙箱。 https://omg5u.sse.codesandbox.io/login-magic

输入您的电子邮件，单击发送到电子邮件的登录链接。

如果没有被阻止，请随意使用https://getnada.com/等一次性电子邮件服务

当您到达个人资料页面时，看到它正在加载，直到您点击刷新，然后它应该显示您的用户 ID 和一个空的数据数组。

更新：看起来当我第一次登陆页面时，在 fetch to the user api 路由中对 fauna_client 的 cookie 查找返回未定义。 但是刷新后它会返回cookie。 如果我在点击刷新之前检查 cookie 是否存在，但是如果我在终端中查找下一个，cookie 是在查找后创建的。 我认为这与在登录魔术后创建 cookie 的登录 api 路由中的魔术重定向有关。

还是挺糊涂的。

Answer 1

必须在 auth-verify 页面和 login-verify api 路由上执行以下操作

useEffect(() => {
    finishEmailRedirectLogin();
  }, [router.query]);

  const finishEmailRedirectLogin = () => {
    if (router.query.magic_credential)
      magicClient.auth
        .loginWithCredential()
        .then((didToken) => authenticateWithServer(didToken));
  };

  // Send token to server to validate
  const authenticateWithServer = async (didToken) => {
    let res = await fetch("/api/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + didToken,
      },
    });

    if (res.status === 200) {
      // Set the UserContext to the now logged in user
      let userMetadata = await magicClient.user.getMetadata();
      // await setUser(userMetadata);
      router.push("/profile");
    }
  };

import { Magic } from "@magic-sdk/admin";

// Initiating Magic instance for server-side methods
const magic = new Magic(process.env.MAGIC_SECRET_KEY);

export default async function login(req, res) {
  try {
    const didToken = req.headers.authorization.substr(7);
    await magic.token.validate(didToken);
    res.status(200).json({ authenticated: true });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}