0

我一直在尝试使用电子邮件和 LinkedIn 来实现 Magic Link 身份验证。到目前为止，我成功地集成了 Linkedin 登录，但是，当我尝试集成电子邮件登录时，我遇到了一个问题，即在单击电子邮件表单上的提交按钮后，Magic Link 会不断发出网络请求。

这些网络请求在 401 和 429 错误之间交替出现，表示我的身份验证未通过验证，然后我超出了速率限制。

只有在我访问我的电子邮件并完成登录过程后，请求才会停止。

电子邮件登录.js


export default function EmailLogin({onEmailSubmit, disabled}) {
    const [email,setEmail] = useState('');

    const handleSubmit = async(e) => {
        e.preventDefault();
        onEmailSubmit(email);
    }
  <form onSubmit={handleSubmit} className="border rounded p-3 login-form">
            <h2 className="text-center fs-2 mb-3">Login</h2>
            <div className="mb-3">
              <input
                placeholder="Email Address"
                className="form-control"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>
            <br />
            <div className="d-grid gap-1 col-6 mx-auto rounded btn-secondary">
              <button disabled={disabled} type="submit" className="btn btn-lg active text-dark ">
                Sign In
              </button>
            </div>
         
          </form>

}

登录.js

  const [disabled, setDisabled] = useState(false)
  const [user,setUser] = useContext(UserContext);

useEffect(() => {
    user?.issuer && Router.push('/profile')
  }, [user])

    async function handleLoginWithEmail(email) {
      try {
        setDisabled(true); // disable login button to prevent multiple emails from being triggered

        // Trigger Magic link to be sent to user
        let didToken = await magic.auth.loginWithMagicLink({
          email,
          redirectURI: new URL('/callback', window.location.origin).href, // optional redirect back to your app after magic link is clicked
        });

        // Validate didToken with server
        const res = await fetch('/api/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + didToken,
          },
        });
        console.log(res);

        if (res.status === 200) {
          // Set the UserContext to the now logged in user
          let userMetadata = await magic.user.getMetadata();
          await setUser(userMetadata);
          Router.push('/profile');
        }
      } catch (error) {
        setDisabled(false); // re-enable login button - user may have requested to edit their email
        console.log(error);
      }
    }
return  <EmailLogin  onEmailSubmit={handleLoginWithEmail} disabled={disabled}  />

UserContext.js

import { createContext, useState,useEffect } from 'react';
import { magic } from './Magic/magic';

export const UserContext = createContext(null);

export const UserProvider = (props) => {
    const [user,setUser] = useState();

    useEffect(() => {
        // if user doesn't exist , set user to magic logged in user
        ReAuthenticateUser();
    },[])

 
    // `ReAuthenticateUser()` returns user metadata object if user is currently logged in
    const ReAuthenticateUser = async() => {
        if(!user) {
            if (await magic.user.isLoggedIn()) {
                let loggedInUser = await magic.user.getMetadata();
                setUser(loggedInUser);
                console.log(loggedInUser);
            }
        }
    }
    return (
        <UserContext.Provider value={[user,setUser]}>
            {props.children}
        </UserContext.Provider>
    )
}

[![Magic Network 请求错误示例][1]][1] [1]: https://i.stack.imgur.com/zyxkN.png

4

0 回答 0